最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 书写 JavaScript 代码的 15 个整洁之道

    正文概述 掘金(bb老猫)   2020-12-29   413

    原文链接:

    medium.com/javascript-…

    无论你是 React 开发者还是 Node.js 开发者. 都能写出可以运行的代码. 但是你写的代码美观并且别人能看懂吗?

    下面的规则可以让你的 JavaScript 代码更加整洁和清晰.

    规则1. 不要使用随机的字符作为变量

    不要使用随机字符去表示一个变量.

    // BAD
    const x = 4;
    

    应该采用语义化的方式去命名变量.

    // GOOD
    const numberOfChildren = 4;
    

    规则2. 使用驼峰式命名

    不要使用蛇形命名(snake_case)、帕斯卡命名(PascalCase)或者变量名以动词开头.

    // Bad: 以大写字母开头 
    var UserName = "Faisal"; 
    
    // Bad: 以动词开头 
    var getUserName = "Faisal"; 
    
    // Bad: 使用下划线 
    var user_name = "faisal";
    

    使用驼峰命名法代替, 并且使用名词.

    // Good
    const userName = "Faisal";
    

    规则3. 使用良好的驼峰来命名函数

    函数名不要用名词, 避免与变量名混淆.

    // Bad: 以大写字母开头 
    function DoSomething() {  
        // code 
    } 
    
    // Bad: 以名词开头 
    function car() {  
        // code 
    } 
    
    // Bad: 使用下划线 
    function do_something() {  
        // code 
    }
    

    而应该使用驼峰式命名, 并且以动词开头.

    //GOOD
    function doSomething() {
        // code
    }
    

    规则4. 使用帕斯卡来命名构造函数

    // Bad: 以小写字母开头 
    function myObject() {  
        // code 
    } 
    
    // Bad: 使用下划线 
    function My_Object() {  
        // code 
    } 
    
    // Bad: 以动词开头 
    function getMyObject() {  
        // code 
    }
    

    同样的, 构造函数名不应该以动词开头, 并且通过 new 来创建对象实例是一个动作.

    // GOOD
    function MyObject() {  
        // code 
    }
    

    规则5. 全局常量

    全局常量的值不能被改变, 不应该以命名正常变量的方式来命名它.

    // BAD
    const numberOfChildren = 4;
    // BAD 
    const number_of_children = 4;
    

    所有的单词应该大写, 并且以下划线分隔.

    // GOOD
    const NUMBER_OF_CHILDREN = 4;
    

    规则6. 分配变量

    不要直接将一个 比较值 分配给变量.

    // BAD 
    const flag = i < count;
    

    应该使用小括号包裹:

    // GOOD
    const flag = (i < count);
    

    规则7. 相等运算符的用法

    不要使用 "==" 或 "!=" 来对比值. 因为它们不会检查两个值的类型是否相同.

    //BAD
    if (a == b){
        //code
    }
    

    而应该使用 "===" 或 "!==", 避免类型错误.

    //GOOD
    if (a === b){
        //code
    }
    

    规则8. 三元运算符的用法

    不要使用三元运算符代替 if 条件语句:

    //BAD
    condition ? doSomething() : doSomethingElse();
    

    仅仅在某些条件下使用它来分配值:

    // GOOD
    const value = condition ? value1 : value2;
    

    规则9. 简单的声明

    不要在一行写多个声明语句, 尽管 JavaScript 是支持这么写的.

    // BAD
    a =b; count ++;
    

    多个声明语句应该分成多行. 并且总是应该在语句的末尾添加分号.

    // GOOD
    a = b;
    count++;
    

    规则10. if 语句的使用

    不要省略 if 语句的大括号, 并且首尾大括号不要写在同一行.

    // BAD: 不正确的空格 
    if(condition){  
        doSomething(); 
    } 
    ----
    // BAD: 缺失大括号 
    if (condition)  
        doSomething(); 
    ----
    // BAD: 所有的代码都在一行 
    if (condition) { doSomething(); } 
    ----
    // BAD: 代码挤在一行, 并且没有大括号 
    if (condition) doSomething();
    

    应该总是使用大括号并且进行适当的缩进:

    // GOOD
    if (condition) {
        doSomething();
    }
    

    规则11. 循环语句的用法

    不要在 for 循环内部声明变量.

    // BAD: 在循环体内声明变量 
    for (let i=0, len=10; i < len; i++) {  
        // code
        let i = 0;
    }
    

    而应该在 for 循环之前声明.

    // GOOD
    let i = 0;
    
    for (i=0, len=10; i < len; i++) {  
        // code 
    }
    

    规则12. 缩进长度保持一致

    始终使用 2 个或 4 个缩进.

    // GOOD
    if (condition) {
        doSomething();
    }
    

    规则13. 单行长度

    任意行的代码都不要超过 80 个字符. 如果超出的话, 超出的部分应该另起一行.

    // BAD: 下一行只缩进 4 个空格 
    doSomething(argument1, argument2, argument3, argument4,
        argument5); 
    
    // BAD: 在运算符前换行 
    doSomething(argument1, argument2, argument3, argument4
            ,argument5);
    

    第二行应该是 8 个缩进而不是 4 个, 并且不应该以分隔符开头.

    // GOOD
    doSomething(argument1, argument2, argument3, argument4,
            argument5);
    

    规则14. 原始值

    字符串不应该使用单引号包裹.

    // BAD
    const description = 'this is a description';
    

    而应该使用双引号.

    // GOOD
    const description = "this is a description";
    

    规则15. 使用 "undefined"

    不要使用全等运算符判断变量是否为 undefined.

    // BAD
    if (variable === "undefined") {  
        // do something 
    }
    

    使用 typeof 操作符来查看一个变量是否已经定义.

    // GOOD
    if (typeof variable === "undefined") {  
        // do something 
    }
    

    因此, 遵循上述的这些规则, 可以让你的 JavaScript 项目更加整洁.

    上述所有的规则都可以在 "编写可维护的JavaScript" 这本书中找到. 所以即使你不同意其中的某些规则也没关系. 因为编码风格是多样化的. 但是这些规则可以作为一个良好的起点.

    编码愉快! :D


    起源地下载网 » 书写 JavaScript 代码的 15 个整洁之道

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元