美文网首页
前端javascript编写规范

前端javascript编写规范

作者: 易则知 | 来源:发表于2016-07-03 19:02 被阅读52次
    dot fish say code in self style !

    导语:

    为了便于前端JavaScript的开发和维护,编写出的代码是易读易懂的,并确保在团队中的所有成员杜能保持相似的编程风格,除了js规定的固有规则外,我们会规定规定一些自己的团队编码风格,方便团队的代码维护及团队的持续发展。


    编写规范

    命名规范
    • 变量名使用描述性的名字*
    • 以小写字母开头,采用驼峰命名分割单词*
    • 全局常量使用全大写的名字*
    • 将jQuery选择器返回的内容存进变量以便重用
      var $myDiv = $("#myDiv");
      $myDiv.click(function(){...});
      
    
    
    #####编写规范
    - 程序块要采用缩进风格编写,缩进的空格数为4个;
    - 所有的语句中都使用分号;
    - 相对独立的程序块之间、变量说明之后必须加空行。
    - 较长的语句(>80字符)要分成多行书写
        ```
      perm_count_msg_head_len = NO7_TO_STAT_PERM_COUNT_LEN   
                                  + STAT_SIZE_PER_FRAM * 10;
    
      if  ((taskno < max_act_task_number)
            && (n7stat_stat_item_valid (stat_item))){ 
            ... // program code
       } 
        ```
    - 大括号形式
      ```
     // bad
    function hello(){
    ...
    }
    // good
    function hello() {
    ...
    }
      ```
    - 新建一个对象
    

    // bad
    var obj = new Object();
    // good
    var obj = {};

      - 新建一个数组
    

    // bad
    var arr = new Array();
    // good
    var arr = [];

    
      -  优先使用单引号
            ```
    // bad
    var name = "joker";
    // good
    var name = 'joker';
            ```
      -  当字符串较长时
    

    // good
    var str = '';
    str += '<header>' + header + '</header>';
    str += '<token>' + token + '</token>';
    str += '<url>' + url + '</url>';
    ...
    ```

    • && 与 || 尽量避免右边使用具有副作用(赋值、递增、递减和函数调用)的表达式
    // bad
    if( a++ > 10 && !a ) {
    }
    if( !a || b++ > 10 ) {
    }
    // good 
    if( !a && a++ > 10 ) {
    }
    if( b++ > 10 || !a ) {
    }
            ```
      -  当同时定义多个变量时
    

    // bad
    var _qQuery = window.jQuery;
    var _$ = window.$;
    var class2type = {};
    // good
    var _jQuery = window.jQuery,
    _$ = window.$,
    class2type = {};

    
      -  单行注释,放在被注释语句,函数的上一行,并且与其对齐,注释前空一行
    

    // Trigger any bound ready events
    if ( jQuery.fn.trigger ) {
    jQuery( document ).trigger("ready").off("ready");
    }

    ---         <未完待续>             

    相关文章

      网友评论

          本文标题:前端javascript编写规范

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