这些被同事喷的JS代码风格你写过多少？

NO：对于求值获取的变量，没有兜底。

const MIN_NAME_LENGTH = 8;  
let lastName = fullName[1];  
if(lastName.length > MIN_NAME_LENGTH) { // 这样你就给你的代码成功的埋了一个坑，你有考虑过如果fullName = ['jackie']这样的情况吗？这样程序一跑起来就爆炸。要不你试试。  
    ....  
} 

YES：对于求值变量，做好兜底。

const MIN_NAME_LENGTH = 8;  
let lastName = fullName[1] || ''; // 做好兜底，fullName[1]中取不到的时候，不至于赋值个undefined,至少还有个空字符，从根本上讲，lastName的变量类型还是String，String原型链上的特性都能使用，不会报错。不会变成undefined。 
 if(lastName.length > MIN_NAME_LENGTH) {  
    ....  
}  
其实在项目中有很多求值变量，对于每个求值变量都需要做好兜底。  
let propertyValue = Object.attr || 0; // 因为Object.attr有可能为空，所以需要兜底。  
但是，赋值变量就不需要兜底了。  
let a = 2; // 因为有底了，所以不要兜着。  
let myName = 'Tiny'; // 因为有底了，所以不要兜着。 

二、函数相关

（1）函数命名

NO：从命名无法知道返回值类型

function showFriendsList() {....} // 现在问，你知道这个返回的是一个数组，还是一个对象，还是true or false。你能答的上来否？你能答得上来我请你吃松鹤楼的满汉全席还请你不要当真。 

Yes：对于返回true or false的函数，最好以should/is/can/has开头

function shouldShowFriendsList() {...}  
function isEmpty() {...}  
function canCreateDocuments() {...}  
function hasLicense() {...} 

（2）功能函数最好为纯函数

NO: 不要让功能函数的输出变化无常。

function plusAbc(a, b, c) {  // 这个函数的输出将变化无常，因为api返回的值一旦改变，同样输入函数的a，b,c的值，但函数返回的结果却不一定相同。  
        var c = fetch('../api');  
        return a+b+c;  
} 

YES：功能函数使用纯函数，输入一致，输出结果永远唯一

function plusAbc(a, b, c) {  // 同样输入函数的a，b,c的值，但函数返回的结果永远相同。  
        return a+b+c;  
} 

（3）函数传参

NO：传参无说明

page.getSVG(api, true, false); // true和false啥意思，一目不了然 

YES: 传参有说明

page.getSVG({  
    imageApi: api,  
    includePageBackground: true, // 一目了然，知道这些true和false是啥意思  
    compress: false,  
}) 

（4）动作函数要以动词开头

NO: 无法辨别函数意图

function emlU(user) {  
    ....  
} 

YES：动词开头，函数意图就很明显

function sendEmailToUser(user) {  
    ....  
} 

（5）一个函数完成一个独立的功能，不要一个函数混杂多个功能

这是软件工程中最重要的一条规则，当函数需要做更多的事情时，它们将会更难进行编写、测试、理解和组合。当你能将一个函数抽离出只完成一个动作，他们将能够很容易的进行重构并且你的代码将会更容易阅读。如果你严格遵守本条规则，你将会领先于许多开发者。

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!