标签搜索
搜索到
137
篇与
的结果
-
React-eslint eslint配置npm install --save-dev eslint eslint-plugin-html eslint-plugin-import eslint-plugin-node babel-eslint eslint-plugin-reactmodule.exports = { "parser": "babel-eslint", "plugins": [ "react" ], "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "browser": true, "amd": true, "es6": true, "node": true, "mocha": true }, "rules": { "comma-dangle": 1, "quotes": [0, "single"], "no-undef": 1, "global-strict": 0, "no-extra-semi": 1, "no-underscore-dangle": 0, "no-console": 1, "no-unused-vars": 1, "no-trailing-spaces": [1, { "skipBlankLines": true }], "no-unreachable": 1, "no-alert": 0, "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1, "no-extra-semi": 1, //禁止多余的冒号 "no-implicit-coercion": 1, //禁止隐式转换 "no-multi-spaces": 1, //不能用多余的空格 "no-trailing-spaces": 1, //一行结束后面不要有空格 "no-undef": 1, //不能有未定义的变量 "no-unused-vars": [2, { "vars": "all", "args": "after-used" }], //不能有声明后未被使用的变量或参数 "brace-style": [1, "1tbs"], //大括号风格 "callback-return": 1, //避免多次调用回调什么的 "comma-dangle": [2, "never"], //对象字面量项尾不能有逗号 "indent": [1, 2], //缩进风格 "new-parens": 2, //new时必须加小括号 "max-params": [1, 3], //函数最多只能有3个参数 "new-cap": 2, //函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用 "quote-props": [0, "always"], //对象字面量中的属性名是否强制双引号 "vars-on-top": 2, //var必须放在作用域顶部 //空行最多不能超过100行 "no-multiple-empty-lines": [2, { "max": 1 }], "semi": [1, "always"] //语句强制分号结尾 } } -
在已有的Vue项目添加单元测试 1.在相对应的文件夹添加一下3个文件.2.安装对应的依赖npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage运行npm run unit你会看到一下错误信息{ "message": "Error: [vuex] vuex requires a Promise polyfill in this browser.\nat webpack:///~/vuex/dist/vuex.esm.js:97:19 <- index.js:11802:55", "str": "Error: [vuex] vuex requires a Promise polyfill in this browser.\nat webpack:///~/vuex/dist/vuex.esm.js:97:19 <- index.js:11802:55" } //使用Babel polyfill解决了这个问题。以下是我所做的步骤： //安装Babel Polyfill： npm install --save-dev babel-polyfill //然后包括前内源和测试文件的填充工具文件files的部分karma.conf.js： files: [ '../node_modules/babel-polyfill/dist/polyfill.js', 'index.js' ],注意异步主件在断言时必须保证渲染完成.所以要使用nextTick
-
-
Vuex全局守卫 全局守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })每个守卫方法接收三个参数：to: Route: 即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。利用router.beforeEach禁止跳转不存在的路由router.beforeEach((to, from, next) => { let routes = router.options.routes; //递归判断是否跳转路由 let jump = (arr, to, from, next) => { for (let v of arr) { if (v.path === to.path) { next(); continue; } else { if (v.children instanceof Array && v.children.length > 0) { jump(v.children, to, from, next); } next(false); } } }; jump(routes, to, from, next); });
-
Vue-router向路由主件传参 通过配置路由的props进行传参如果 props 被设置为 true，route.params 将会被设置为组件属性。const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } ] })如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } //主件的props:['newsletterPopup'] ] })你可以创建一个函数返回 props。const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: (route) => ({ query: route }) } //主件的props:['query'] ] })
-
JS生成器 function* 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。function* generator(i) { yield i; yield i + 10; } var gen = generator(10); console.log(gen.next().value); // expected output: 10 console.log(gen.next().value); // expected output: 20生成器函数在执行时能暂停，后面又能从暂停处继续执行。调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的 迭代器 （iterator ）对象。当这个迭代器的 next() 方法被首次（后续）调用时，其内的语句会执行到第一个（后续）出现yield的位置为止，yield 后紧跟迭代器要返回的值。或者如果用的是 yield*（多了个星号），则表示将执行权移交给另一个生成器函数（当前生成器暂停执行）。next()方法返回一个对象，这个对象包含两个属性：value 和 done，value 属性表示本次 yield 表达式的返回值，done 属性为布尔类型，表示生成器后续是否还有 yield 语句，即生成器函数是否已经执行完毕并返回。调用 next()方法时，如果传入了参数，那么这个参数会作为上一条执行的 yield 语句的返回值function *gen(){ yield 10; y=yield 'foo'; yield y; } var gen_obj=gen(); console.log(gen_obj.next());// 执行 yield 10，返回 10 console.log(gen_obj.next());// 执行 yield 'foo'，返回 'foo' console.log(gen_obj.next(10));// 将 10 赋给上一条 yield 'foo' 的左值，即执行 y=10，返回 10 console.log(gen_obj.next());// 执行完毕，value 为 undefined，done 为 true
-
迭代器[Symbol.iterator] 当需要对一个对象进行迭代时（比如开始用于一个for..of循环中），它的@@iterator方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值。自定义迭代器let arr []; arr[Synbol,iterator] = fuction(){ let i = 0; let self = this; return { next() { return { done: self.length - 1 < i, value: self[i++] }; } }; } for (let v of arr) { console.log(v); }当执行 for(var i of arr) 的时候，其实是调用了 arr[Symbol.iterator]() 方法，这个方法返回了一个iterator（迭代器）。迭代器有一个next方法，for循环会不断调用这个 arr.next方法来获取下一个值，直到返回值中的 done 属性为true的时候结束循环。
-
Objict属性操作 属性的描述Object.defineProperty(..)修改或新增对象的属性的描述.let Obj = {}; Object.defineProperty(Obj,a,{ value:2, writable:true,//可写 enumerable:true,//可枚举 configurable:true//可配置(值为false时对象属性将不可删除,writable可以从true改为false) })禁止扩展Object.preventExtensions();禁止添加新属性.密封及不能添加也不能删除对象属性.Object.seal();冻结及不可修改,不可添加,不可新增属性.Object.freeze();如果这个对象引用了其他对象, freeze不会生效.“深度冻结”一个对象，具体方法为，首先在这个对象上调用 Object.freeze(..)，然后遍历它引用的所有对象并在这些对象上调用 Object.freeze(..)。但是一定要小心，因为这样做有可能会在无意中冻结其他（共享）对象。in 操作符和hasOwnProperty()in 检查对象属性是否在对象及prototype中.hasOwnProperty 检查对象属性是否在对象不检查原型链. var Obj = {}; (a in Obj)//false Obj.hasOwnProperty('a')//false
-
JS计算精度问题 export default function point(f) { if (f === '+') { return accAdd; } else if (f === '-') { return accSub; } else if (f === '*') { return accMul; } else { return accDiv; } } /** ** 除法函数，用来得到精确的除法结果 ** 说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 ** 调用：accDiv(arg1,arg2) ** 返回值：arg1除以arg2的精确结果 **/ function accDiv(arg1, arg2) { var t1 = 0; var t2 = 0; var r1, r2; try { t1 = arg1.toString().split('.')[1].length; } catch (e) {} try { t2 = arg2.toString().split('.')[1].length; } catch (e) {} r1 = Number(arg1.toString().replace('.', '')); r2 = Number(arg2.toString().replace('.', '')); return (r1 / r2) * Math.pow(10, t2 - t1); } //给Number类型增加一个div方法，调用起来更加方便。Number.prototype.div = function (arg) { return accDiv(this, arg); /** ** 乘法函数，用来得到精确的乘法结果 ** 说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 ** 调用：accMul(arg1,arg2) ** 返回值：arg1乘以 arg2的精确结果 **/ function accMul(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try { m += s1.split('.')[1].length; } catch (e) {} try { m += s2.split('.')[1].length; } catch (e) {} return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m); } // 给Number类型增加一个mul方法，调用起来更加方便。Number.prototype.mul = function (arg) { return accMul(arg, this); /** ** 减法函数，用来得到精确的减法结果 ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。 ** 调用：accSub(arg1,arg2) ** 返回值：arg1加上arg2的精确结果 **/ function accSub(arg1, arg2) { var r1, r2, m, n; try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度 n = (r1 >= r2) ? r1 : r2; return ((arg1 * m - arg2 * m) / m).toFixed(n); } // 给Number类型增加一个mul方法，调用起来更加方便。Number.prototype.sub = function (arg) { return accMul(arg, this); /** ** 加法函数，用来得到精确的加法结果 ** 说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 ** 调用：accAdd(arg1,arg2) ** 返回值：arg1加上arg2的精确结果 **/ function accAdd(arg1, arg2) { var r1, r2, m, c; try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; } c = Math.abs(r1 - r2); m = Math.pow(10, Math.max(r1, r2)); if (c > 0) { var cm = Math.pow(10, c); if (r1 > r2) { arg1 = Number(arg1.toString().replace('.', '')); arg2 = Number(arg2.toString().replace('.', '')) * cm; } else { arg1 = Number(arg1.toString().replace('.', '')) * cm; arg2 = Number(arg2.toString().replace('.', '')); } } else { arg1 = Number(arg1.toString().replace('.', '')); arg2 = Number(arg2.toString().replace('.', '')); } return (arg1 + arg2) / m; } //给Number类型增加一个add方法，调用起来更加方便。Number.prototype.add = function (arg) { return accAdd(arg, this);
-
vue-cli注册全局方法 把方法挂载到window对象上!import axios from 'axios'; window.axios = axios;//这样每个vue主件都可以调用axios把方法挂载到Vue的原型上import Vue from 'vue'; import axios from 'axios'; Vue.prototype.axios = axios;通过webpack全局注入!plugins:[ new webpack.ProvidePlugin({ //webpack配置项 axios:"axios", jQuery: "jquery", $: "jquery" }) ]总结:挂载到window上将被暴露在全局,(不推荐使用).挂载到Vue原型上, 可以在每个Vue实例上使用.(每次使用都的加this).webpack注入, 会在编译后在每个模块中引入.(推荐使用)
![迭代器[Symbol.iterator]](https://blog.cicaba.cn/usr/themes/Joe-master/assets/thumb/15.jpg)
