zoukankan      html  css  js  c++  java
  • 【转】JavaScript代码风格推荐

    前言:好的代码风格可以让你写起来事半功倍,而混乱或者没有代码风格会让你事倍功办,起写越乱

    1. Javascript代码应符合Douban-JSLint检验标准

     

    1-1. 语句必须都有分号结尾,除了for, function, if, switch, try, while

     

    1-2. 只有长语句可以考虑断行,如:

     

                                     TEMPL_SONGLIST.replace('{TABLE}', da['results'])
                                                   .replace('{PREV_NUM}', prev)
                                                   .replace('{NEXT_NUM}', next)
                                                   .replace('{CURRENT_NUM}', current)
                                                   .replace('{TOTAL_NUM}', da.page_total);

     

    为了避免和JSLint的检验机制冲突,“.”或“+”这类操作符放在行尾,上面代码应改为:

     

                                     TEMPL_SONGLIST.replace('{TABLE}', da['results']).
                                                   replace('{PREV_NUM}', prev).
                                                   replace('{NEXT_NUM}', next).
                                                   replace('{CURRENT_NUM}', current).
                                                   replace('{TOTAL_NUM}', da.page_total);

    1-3. 避免额外的逗号。如:var arr = [1,2,3,];

     

    1-4. 所有的循环体和判断体都需要用"{}"括起来。如:

     

    错:

                                     if (condition)
                                         statement;

                                     或
                                      if (condition) statement;
                                     

    对:

                                     if (condition) {
                                         statement;
                                     }

                                     或
                                     if (condition) { statement; }

    1-5. for-in循环体中必须用hasOwnProperty方法检查成员是否为自身成员。避免来自原型链上的污染。

     

    1-6. 变量声明。变量声明应放在function的最上面。避免使用未声明的变量。

    错:

                                     if (n > 0) {
                                       var isvalid = true;
                                     } 

                                     

    对:

                                     var isvalid;
                                     if (n > 0) {
                                       isvalid = true;
                                     } 

    1-7. 不要使用with, void, eval。

     

    1-8. 使用严格的条件判断符。用===代替==,用!==代替!=。

     

    1-9. 下面类型的对象不建议用new构造:new Number, new String, new Boolean, new Object(用{}代替), new Array(用[]代替)。

     

    1-10. 引用对象成员用obj.prop1代替obj[“prop1”],除非属性名是变量。

     

    注:Douban-JSLint是定制过的JSLint

    注:如果模块代码中,使用其它全局变量想跳过JSLint的检查,可以在该文件中加入/*global*/声明,如: /*global alert: true, console: true, top: true, setTimeout: true */

    2. Javascript命名规则

     

    2-1. 构造器的首字母大写。如:

     

                             function Dialog (config) {
                               statement;
                             }

                             var dlg = new Dialog({...});

     

    2-2. 对象的属性或方法名采用小驼峰式(lower camel-case),如"init", "bindEvent", "updatePosition":

                             Dialog.prototype = {
                               init: function () {},
                               bindEvent: function () {},
                               updatePosition: function () {}
                             ...
                             };

     

    2-3. 私有变量名用下划线开头。如:"_current", "_defaultConfig"

     

    2-4. 常量名全部大写,单词间用下划线分隔。如:“CSS_BTN_CLOSE”, "TXT_LOADING"

     

    2-5. 变量名的前缀:

    Prefix

    Element

    Example

    n

    integer

    nVariableName

    i,j,k,m,n, etc. *

    integer as counter/iterator

    (for i=0; i<=oArray.length; i++)

    s

    string

    sVariableName

    o

    object

    oObjectName

    is, can, has

    boolean

    [Boolean name]ConditionName

    event method

    event attachment

    [event type]_MethodName

    get

    accessor method

    getMethodName

    set

    accessor method

    setMethodName

    Note: Only a counter/iterator should use a single-letter designation.

    3. 代码格式化要求

     

    3-1. 语句中的必要空格和缩进

     

    3-1-1. 用来包含语句的"()"前后需要跟空格,诸如: if / for / while / switch ( statements ) { … } 等

     

    3-1-2. "="前后需要跟空格

     

    3-1-3. 数组成员间的","后面需要跟空格

     

    不好:

     

                 for (t in selected) { if (!hash[t]) deselect(t) }

     

    好:

     

                 for ( t in selected ) { 
                   if ( !hash[t] ) {
                    deselect(t); 
                   }
                 }

     

    3-2. 长语句采用断行:

     

    不好:

     

                 TEMPL_SONGLIST.replace('{TABLE}', da['results']).replace('{PREV_NUM}', prev).replace('{NEXT_NUM}', next).replace('{CURRENT_NUM}', current).replace('{TOTAL_NUM}', da.page_total);

     

    好:

     

                 TEMPL_SONGLIST.replace('{TABLE}', da['results']).
                               replace('{PREV_NUM}', prev).
                               replace('{NEXT_NUM}', next).
                               replace('{CURRENT_NUM}', current).
                               replace('{TOTAL_NUM}', da.page_total);

     

    3-3. 格式化对象参数:

     

    不好:

     

                  embedSWF(id, { url: '/swf/player30792.swf?url=' + el.href, 261, height: 30, params: { wmode:'transparent' }, attributes: { id: "player-sample" + i, name: "player-sample" + i }});

     

    好:

     

                  embedSWF(id, {
                     url: '/swf/player30792.swf?url=' + el.href, 
                      261,
                     height: 30,
                     params: { wmode:'transparent' },
                     attributes: {
                       id: "player-sample" + i,
                       name: "player-sample" + i
                     }
                   });

                  

    相关工具

     Douban-JSLint

     Closure Linter

    相关推荐

     Douglas Crockford: Code Conventions for the JavaScript Programming Language

     Google JavaScript Style Guide

     JQuery Core Style Guidelines

     

  • 相关阅读:
    GitHub地址汇总
    Jenkins相关
    兼容性测试相关
    测试开发中间件相关知识点
    QQ国际版安装
    ubuntu本機安裝软件
    从零开始ubuntu 安装ubuntu16.04
    docker 学习网站
    Apt-get 命令出现错误 python版本切换
    白盒测试系列(四)条件判定覆盖
  • 原文地址:https://www.cnblogs.com/codefish/p/2859015.html
Copyright © 2011-2022 走看看