本文为原创文章，转载请注明——来自桃园小盘的博文序言虽然本系列是前端规范，但我的理解略有不同。代码格式：具体到换行符、符号、空格等每一个细节代码规范：必须这样做Bestpractice：最好这样做代码格式自然是prettier做的。本系列结合了编码约定和一些最容易实施的最佳实践。1.优先使用es6+新语法解构赋值类类箭头函数函数参数默认值可选链?。仅列出部分功能。es6+语法更具表现力，如果你还没有学过或者不习惯的话。然后强迫自己学习并习惯它，你就会爱上它。2.函数必须加多行注释例外：生命周期函数/***启动批处理*/functionlaunchBatch(){batching.value=true}其实最好的注释是靠方法命名和方法参数命名来表达意思。但实际情况是每个团队的情况都不一样，而且中国人的英语水平普遍不好，所以不能光靠命名的方法。因此，我们在第一版规范中规定，如果开发者个人认为函数名不好理解，那么需要添加注释。如果函数参数值多样，也需要注释。然而真实的情况是，大家都觉得他们的函数名很容易理解，所以评论几乎没有。所以这次就要求所有的函数都必须注释掉。3、函数的长度一般控制在20行以内。为什么是20行？考虑多种因素。个人经验，易维护，模块化。其实20行是一个风向标。如果真的是21行，这段代码是不是不好？自然不是，这份规范就是提醒每一位开发者，当这段代码超过20行时，要重新审视。当然，有些代码即使少于10行也不是好代码。4.两个以上的函数参数可以改为参数对象constitem=awaitgetItemFromCollection(54391,'shop')//更好constitem=awaitgetItemFromCollection({id:54391,collectionName:'shop',})asyncfunctiongetItemFromCollection({id,collectionName}){//dosomething}参数对象的方法，从调用者的角度更容易理解参数的含义，相当于调用这里，帮助我们给参数命名.否则，我们只好到函数定义的地方去查看相关说明。5.不要将函数参数定义为boolean类型6.尽量不要使用switchcase7.用guard语句替换嵌套条件表达式//badfunctiongetPayAmount(){letresultif(isDead){result=deadAmount()}else{if(isSeparated){result=separatedAmount()}else{if(isRetired){result=retiredAmount()}else{result=normalPayAmount()}}}returnresult}//goodfunctiongetPayAmount(){if(isDead){返回deadAmount()}if(isSeparated){returnseparatedAmount()}if(isRetired){returnretiredAmount()}returnnormalPayAmount()}8.多字符串连接使用模板字符串//badconststr='a'+'b'+test//goodconststr=`ab${test}`9.优先使用迭代器遍历10.当循环嵌套三次时，复杂度为O(n^3)。注意性能问题。如果想更好的处理这类问题，群里的小伙伴还是需要有算法知识的。只是现实通常是不同的。考虑到很多人缺乏算法知识，才有了这篇文章。还是那句话，没有最好的规格，只有适合和更好的规格。11.对于业务相关的数字，需要定义常量//badif(type===1){//doSomething}elseif(type===2){//doSomething}//goodconstMANAGER=1constGENERAL=2if(type===MANAGER){//doSomething}elseif(type===GENERAL){//doSomething}12.这个转换命名为self13.实用函数优先使用lodash，推荐使用lodash-es库优化webpack的treeshaking音量。14、特殊业务逻辑需要为特殊业务添加单行注释。通常能记住的情景因人而异。有可能你一直记得这个特殊的业务逻辑，可能过了一个星期就忘记了。为球队，也为未来的自己，写下一份美好的记录。15.尽快删除TODO注释16.及时删除过期代码。如果你真的想找回它，你可以查看git历史记录。17、尽快删除debuggingconsole.log语句。如果你在代码中写了很多调试语句，可能是调试代码的方式不够好，试试调试器的方式。18、在特殊情况下，for循环中使用i为宜，变量交换中使用temp为宜。参考资料《重构》《代码整洁之道》《代码之丑》
