美文网首页
前端代码规范

前端代码规范

作者: 从不放弃 | 来源:发表于2017-06-26 11:20 被阅读12次

    一、格式化

    1、代码缩进

    4 个空格字符为一个缩进层级

    2、语句结尾

    每行语句结束必须使用分号结尾(“:”)

    3、行的长度

    每行语句不超过80个字符

    4、换行

    运算符后换行,第二行追加两个缩进

     callAFunction(document,element,window,"somes tring",trrue,
             navigator)
    

    5、空行

    • 在方法之间
    • 在方法中的局部变量和第一条语句之间
    • 在多行或单行注释之前
    • 在方法内的逻辑片段之间出去空行,提高可读性

    6、命名

    a、变量 :

    • 下划线连接 "_"
    • 第一个单词为名词
     var user_name = "ding";
    

    b、函数:

    • 使用小驼峰命名法(首字母小写,后续每个单词首字母都大写)
    • 第一个单词为动词(can、has、is、get、set等)
    function getUserName () {}
    

    c、构造函数:

    • 使用大驼峰命名法(首字母大写,后续每个单词首字母都大写)
    • 单词为名词
    function Person() {}
    

    d、常量:

    • 下划线连接 "_"
    • 所有单词均大写
     var MAX_COUNT = 10;
    

    7、直接量

    a、字符串:

    • 使用双引号: ""
    • 拼接html使用单引号:''
    var user_name = "ding";
    var html = '<div class="demo"></div>'
    

    b、数字:

    • 完整书写
    例如: 1.0
    var user_number = 1.0;  
    //而不是
    var user_number = 1.; 
    例如: 0.1
    var height = 0.1;  
    //而不是
    var height = .1;  
    

    c、对象:

    • 使用 {} 创建
    var user_info = {
             name : "ding",
             age : 24
    }
    

    d、数组:

    • 使用 [] 创建
    var numbers = [1,2,3,4] 
    

    e、字符串:

    • 使用"" 创建
    var name = "ding";
    

    二、注释

    1、单行注释

    • 两个斜线
    • 增加空行
    var user = {}
    //空行
    //定义用户信息
    var user_info = {}
    

    2、多行注释

    “/*”开始,“*/”结束

    /*注释*/
    var name = "ding";
    //空行
    /*
     *两行注释
     *第二行
     */
    var age = 25;
    

    3、文档注释

    “/**”开始,“**/”结束

    /**
    返回一个对象,包含其属性
    return object
    **/
    function getObject (name) {
        var obj = {
            name: name,
            age: 25
        }
        return obj;
    }
    

    三、语句和表达式

    1、花括号的对齐方式和块语句间隔

    if ( condition ) {
        doSomething();
    } else {
        doSomethingElse();
    }
    

    2、switch语句

    switch (condition)
        case "one"
             //代码
             break;
        case "two"
             //代码
             break;
        default
             //代码或者无逻辑
    

    3、with语句 : 禁止使用

    4、for循环

    var values = [1,2,3,4],
        i,len;
    for (i=0, len=values.length; i < len; i++) {
        if ( i != 2 ) {
            coonsole.log(i);
        }
    }
    

    4、for-in循环

    • 以为for-in 不仅遍历对象的实例属性,而且还遍历从原型继承来的属性,
      所以使用hasOwnProperty()过滤实例属性
    • 禁止遍历数组
    var i;
    //空行
     for (i in obj) {
          if ( Object.hasOwnProperty(i) ) {
              console.log(i);
              console.log(obj[i]);
          }
    }
    

    5、变量和函数声明

    必须先定义后调用

    var name = "ding";
    console.log(name);
    function getName () {}
    getName();
    

    6、立即调用的函数

    var value = (function() {
        return {
            msg: "123"
        }
    }());
    

    7、相等判断

    使用 "=== 与 !==" 替代 "== 与 !="

    console.log(1 == "1"); // true
    console.log(1 === "1"); // false
    

    7、eval(),setTimeout(),setInterval()

    a、eval() : 只有别无他法的时候才使用eval()

    eval("alert('demo')");
    

    b、setTimeout()与setInterval() : 禁止使用字符串参数,要使用function

    setTimeout(function() {
        document.body.style.background = "red";
    },50);
    setInterval(function() {
        document.title = (new Date());
    },1000);
    

    相关文章

      网友评论

          本文标题:前端代码规范

          本文链接:https://www.haomeiwen.com/subject/lludcxtx.html