js规范
一.命名
1.文件夹命名:文件夹、文件的命名与命名空间应能代表代码功能,可读性强,如hub
2.函数和变量命名:
具有意义的驼峰命名,如hubList;
变量函数名禁止使用关键字和保留字,禁止重新定义(不能重名)或定义不用
3.常量:大写字母,如HUBLIST
二.编码
采用统一的缩进方式排版代码。缩进为2个ASCII空格,句末必须用分号结尾(待定,vue就无分号)
三.注释
1.单行注释
// let str = []
2.多行注释
/** * 方法说明 * @method getSum * @params {Number} firstNumber, secondNumber 第一个值和第二个值 * @return {Number} 两个数之和 */ function getSum(firstNumber, secondNumber) { return firstNumber + secondNumber; }
3..Js代码注释console.log和debugger再提交
4..重要函数或者类等都要添加头描述
四.字符串拼接
应使用数组保存字符串片段,使用时调用join方法。避免使用+或+=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能。
// good let str = []; for (var i = 0; len = list.length; i < len; i++){ str.push('<div>' + list[i] +'<div>'); } fom.innerHTML = str.join(''); // bad let str = []; for (var i = 0; len = list.length; i < len; i++){ str += '<div>' + list[i] +'<div>'; } fom.innerHTML = str.join('');
五.ES6使用
1.变量申明:let :不存在变量提升问题; 不能重复申明。
2.常量申明: const:原理是内存地址不变。
3.箭头函数:
- 有名函数
- let getCount = (firstNumber, secondNumber) => { return firstNumber + secondNumber; }
- 无名函数
(firstNumber + secondNumber) => {return firstNumber + secondNumber}
- 箭头函数使用注意的问题: This指向定义者,内部无arguments对象,不能new(因为箭头函数的this就是指向定义本身),函数里面不要有太多的return
- 函数的形参不超过7个,超过用数组,调用时实参和形参对应
- 不能有重复的返回
- 在循环内部声明函数慎用,因为是循环执行完成函数调用才会执行
- Return后面不要写代码,并且不封装成if…then…else…
4.导入和导出
使用import和export,只能位于代码顶部和顶部,如果代码中部需要按需导入文件使用require
5.解决地狱回调问题
解决回调地狱有很多方法,比如:Promise 对象、Generator 函数、async 函数
promise对象解决回调地狱
采用链式的 then,可以指定一组按照次序调用的回调函数。这时,前一个 then 里的一个回调函数,返回的可能还是一个 Promise
对象(即有异步操作),这时后一个回调函数,就会等待该 Promise
对象的状态发生变化,才会被调用。由此实现异步操作按照次序执行。
var sayhello = function (name) { return new Promise(function (resolve, reject) { setTimeout(function () { console.log(name); resolve(); //在异步操作执行完后执行 resolve() 函数 }, 1000); }); } sayhello("first").then(function () { return sayhello("second"); //仍然返回一个 Promise 对象 }).then(function () { return sayhello("third"); }).then(function () { console.log('end'); }).catch(function (err) { console.log(err); })
上面代码中,第一个 then 方法指定的回调函数,返回的是另一个Promise
对象。这时,第二个then
方法指定的回调函数,就会等待这个新的Promise
对象状态发生变化。如果变为resolved
,就继续执行第二个 then 里的回调函数。
Generator 函数解决回调地狱
// 用 co 模块自动执行 var co = require('co'); var sayhello = function (name, ms) { setTimeout(function (name,ms) { console.log(name); }, ms); } var gen = function* () { yield sayhello("xiaomi", 2000); console.log('frist'); yield sayhello("huawei", 1000); console.log('second'); yield sayhello("apple", 500); console.log('end'); } co(gen());