开发工具
【强制】使用Visual Studio Code 【强制】手脚架 umi.js
注释规范
【强制】逻辑代码块超过5行必须给注释说明；函数/方法除极易简单（简单功能实现，3行以内）的函数/方法外其余必须给注释说明；每个文件头部必须给上注释。
1 单行注释
【强制】必须独占一行； // 后必须跟一个空格，缩进量整个项目统一。Ctrl+/ 快捷注释
2 多行注释
【强制】代码中多行/方法头注释使用 /*...*/ 格式。
3 文档化注释
【强制】为了便于代码阅读和自文档化，以下内容必须包含以/**...*/形式的块注释中。
以下内容：
1、函数或方法
2、全局变量
3、文件
【强制】文档注释前必须空一行。
【建议】自文档化的文档说明的是what，而不是how。
4 函数/方法注释
【强制】函数/方法注释必须包含函数/方法说明，有参数和返回值时必须使用注释标识。备注：当return关键字仅作为退出函数/方法使用时，无需对返回值作注释标识。
示例：
/** * @Detail函数的描述* @Param p1参数1的说明* @Param p2参数2的说明，若比较长*那就换行了。* @Return返回值的描述* @Author作者* @Date日期*/functionfoo(p1:string,p2:number){ ....return{ p1, p2 }}
【强制】若传入参数为较为复杂的对象时，必须用@param对对象中各项进行标识。
示例：
/** * @Detail函数的描述* @Param obj参数的描述文件位置* @Author作者* @Date日期*/functionfoo(obj:Object){ ...}
5 全局变量
【强制】全局变量必须用@global标识。
示例：
/** * @Global user变量的描述* @Author作者* @Date日期*/letuser = {}
6 文件
【强制】每个文件头部都需给上注释，这里统一规定使用vscode自动化插件生成（korofileheader)。
7 细节注释
对于内部实现、不容易理解的逻辑说明、摘要信息，我们可能需要编写细节注释。
【建议】细节注释遵循单行注释的格式。说明必须换行时，每行都遵循单行注释规范。
示例：
functionfoo(p1,p2){//这里对具体内部逻辑进行说明//说明太长时换到此行for(...){...}}
【建议】有时我们会使用一些特殊标记进行说明。特殊标记(使用全大写)必须使用单行注释形式。下面列举一些常用标记：
1.TODO：有功能待完善。此时需要对将要实现的功能进行简单说明。
...更多见详细版
方法命名规范
1 主要使用驼峰命名法
UserList.html --大驼峰 userList.html --首字母小写驼峰式 userlist.html --全小写 user-list.html --符号隔开
一般函数方法使用小驼峰命名
functiongetNumber(nTotal){}
类式组件使用大驼峰命名
classPersonInfo{constructor(name) {this.name = name; }}
常量和私有变量使用下划线
constMAX_COUNT =10;functiongetNumber(val){if(val <100) { val =100; }return_add(val);function_add(number){ number++;returnnumber; }}
2 命名有意义
给文件命名
给方法的命名采用动宾短语，要有逻辑意义：例如： popWindow就比 myWindow 好多了。
一般采用英文单词全拼（除个别通用缩写外）。
get获取/set设置,add增加/remove删除open打开/close关闭,edit编辑/modify修改,submit提交/commit交付find查找/search搜索clean清理/clear清除
方法定义规范
1 函数定义
使用命名函数表达式而不是函数声明。
// badfunctionfoo(){// ...};// goodconstfoo =()=>{// ...};
不要用函数构造器创建函数。
// badvaradd =newFunction('a','b','return a + b');// still badvarsubtract =Function('a','b','return a - b');
函数定义部分要有空格。
// badconstf =function(){};constg =function(){};consth =function(){};// goodconstx =function(){};consty =functiona(){};
2 不要在非函数块内声明函数
不要在非函数块（if、while 等）内声明函数。把这个函数分配给一个变量。这样操作会出现浏览器优化问题影响性能。
// badif(currentUser) {functiontest(){console.log('Nope.'); }}// goodlettest;if(currentUser) { test =()=>{console.log('Yup.'); };}
3 关于参数
1 接收参数（强制）
不要用 arguments 命名参数。他的优先级高于每个函数作用域自带的 arguments 对象，这会导致函数自带的 arguments 值被覆盖。
// badfunctionfoo(name, options,arguments){// ...}// goodfunctionfoo(name, options, args){// ...}
不要使用 arguments，用收集参数语法 ... 代替。
// badfunctionconcatenateAll(){constargs =Array.prototype.slice.call(arguments);returnargs.join('');}// goodfunctionconcatenateAll(...args){returnargs.join('');}
4 参数默认值
用默认参数语法而不是在函数里对参数重新赋值。
// really badfunctionhandleThings(opts){//不！我们不该修改arguments//第二：如果opts的值为false,它会被赋值为{}//虽然你想这么写，但是这个会带来一些微妙的bug。opts = opts || {};// ...}// still badfunctionhandleThings(opts){if(opts ===void0) { opts = {}; }// ...}// goodfunctionhandleThings(opts = {}){// ...}
避免默认参数的副作用。
varb =1;// badfunctioncount(a = b++){console.log(a);}count();// 1count();// 2count(3);// 3count();// 3
把默认参数赋值放在最后。
// badfunctionhandleThings(opts = '123', name){// ...console.log('opts:',opts,"name",name)}//如果我不想给传opts这个参数，想使用方法定义的默认值handleThings(undefined,'username')// opts: 123 name username// goodfunctionhandleThings(name, opts = '123'){// ...}//如果我不想给传opts这个参数，想使用方法定义的默认值handleThings('username')// opts: 123 name username
不要对参数重新赋值。
// badfunctionf1(a){ a =1;// ...}functionf2(a){if(!a) { a =1; }// ...}// goodfunctionf3(a){constb = a ||1;// ...}functionf4(a = 1){// ...}
使用拓展运算符调用多参数的函数。
// badconstx = [1,2,3,4,5];console.log.apply(console, x);// goodconstx = [1,2,3,4,5];console.log(...x);// badnew(Function.prototype.bind.apply(Date, [null,2016,8,5]));// goodnewDate(...[2016,8,5]);
调用或者编写一个包含多个参数的函数的缩进，应该像这个指南里的其他多行代码写法一样——即每行只包含一个参数，每行逗号结尾。
// badfunctionfoo(bar,
baz,
quux){// ...}// good缩进不要太过分functionfoo( bar,
baz,
quux,){// ...}// badconsole.log(foo, bar, baz);// goodconsole.log( foo, bar, baz,);
5 箭头函数
当你一定要用函数表达式（在回调函数里）的时候，使用箭头函数。
// bad[1,2,3].map(function(x){consty = x +1;returnx * y;});// good[1,2,3].map((x) =>{consty = x +1;returnx * y;});
如果函数体由一个没有副作用的 表达式 语句组成，删除大括号和 return。否则，使用大括号和 return 语句。
// bad[1,2,3].map((number) =>{constnextNumber =number+1;`A string containing the${nextNumber}.`;});// good[1,2,3].map((number) =>`A string containing the${number + 1}.`);// good[1,2,3].map((number) =>{constnextNumber =number+1;return`A string containing the${nextNumber}.`;});// good[1,2,3].map((number, index) =>({ [index]:number,}));//没有明显的return语句，可能存在副作用。functionfoo(callback){constval = callback();if(val ===true) {//当callback返回true时...}}letbool =false;// badfoo(()=>bool =true);// good foo(()=>{ bool =true; });
如果表达式涉及多行，把他包裹在大括号或圆括号里以提高可读性。（建议）
// bad['get','post','put'].map(httpMethod=>Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod ));// good['get','post','put'].map(httpMethod=>{Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod )});
在箭头函数参数两头，总是使用小括号包裹住参数，这样做使代码更清晰且一致。（建议）
// bad[1,2,3].map(x=>x * x);// good[1,2,3].map((x) =>x * x);// bad[1,2,3].map(number=>(`A long string with the${number}. It’s so long that we don’t want it to take up space on the .map line!`));// good[1,2,3].map((number) =>(`A long string with the${number}. It’s so long that we don’t want it to take up space on the .map line!`));// bad[1,2,3].map(x=>{consty = x +1;returnx * y;});// good[1,2,3].map((x) =>{consty = x +1;returnx * y;});
避免箭头函数（=>）和比较操作符（<=, >=）混淆. eslint: no-confusing-arrow （建议）
// badconstitemHeight =(item) =>item.height <=256? item.largeSize : item.smallSize;// badconstitemHeight =(item) =>item.height >=256? item.largeSize : item.smallSize;// goodconstitemHeight =(item) =>(item.height <=256? item.largeSize : item.smallSize);// goodconstitemHeight =(item) =>{const{ height, largeSize, smallSize } = item;returnheight <=256? largeSize : smallSize;};
使箭头函数体有一个清晰的返回。 eslint: implicit-arrow-linebreak
// bad(foo) => bar;(foo) =>(bar);// good(foo) => bar;