@hotjp 2018-03-23T10:45:02.000000Z 字数 8744 阅读 3053

JavaScript编码规范

编码规范 培训

前言

开发过程中最开心的事情莫过于这个项目不需要自己做，闭着眼镜敲代码，不需要debug，放进浏览器就能跑，没有一点点防备就完成了项目。

实际情况是我们不得不经常临时受命付出大量工时完成项目的进度，一遍一遍review他人代码，唯一值得欣慰的是可以copy，但是有些时候却根本看不懂。

最近改了不少代码，也做了不少重构，总之是对着其他人的代码工作了几周。

说句俏皮的话：

代码质量由接手人的骂声频率决定

愿景

不管有多少人共同参与同一项目，每一行代码都像是同一个人编写的。

JavaScript

JavaScript语言规范

1. 变量

每个变量声明都要加上var。

var text = "123";
function foo(){
    var number = 123;   //好的写法
    text = "abc";       //不好的写法
}

如果不使用关键字var,该变量会暴露在全局作用域window中，很可能会覆盖全局作用域中的同名变量，并无法回收内存，亲请务必使用var声明变量。

2. 常量

常量声明用类似NAMES_LIKE_THIS这样的形式。
基本的常量使用注释简单介绍一下即可

/**
 * 一分钟有多少秒
 * @type {number}
 */
 foo.SECONDS_IN_MINUTE = 60;

对于非基本类型，使用@const注释一下

/**
 * 已知单位所对应的秒数
 * @type {Object.<number>}
 * @const
 */
foo.SECONDS_TABLE = {
    minute: 60,
    hour: 60 * 60,
    day: 60 * 60 * 24
}

3. 分号

每一语句的结尾请尽量加上分号，这是一个风格问题。

Array.prototype.foo = function(){
    //原型扩展
};       //这里需要加分号
(fcuntion(){
    //匿名函数
})();   //此处也要加分号
var foo = {
    //对象声明
    "i" : 1,
    "j" : 2
}；  //此处也要加分号
var foo = [1,2,3,4]; //此处也记得加分号
//注意没有列举的 if/for 等语句

虽然浏览器解析器和各种压缩合并工具都日益强大，但是某些特殊情况下会因为缺少分号而执行或压缩后出错。

function b() {
    return
    {
        a: 'a'
    };
}

解析执行后会变成

function b() {
    return;
    {
        a: 'a'
    };
}

最终会return undefined;

合理添加分号可以提升性能，因为这样解析器就不必花时间推测应该在哪里插入分号了。
----《JavaScript高级程序设计》

4. 嵌套函数

可以使用，没有问题，可以重用并减少代码量，还可以防止辅助方法暴露在外，请随意把玩（叫破喉咙也不会有人来救他的）

function foo(){
    function mySum(x, y){
        return x + y;
    };
    var number = mySum(1,6);
    console.log(number);
};
foo();

5. eval()

原则上只用于反序列化（将JSON字符串重构成对象或执行服务器返回的JS语句，即“输出”），很多产品类公司禁止在自家前端代码中出现eval()，原因是经过eval()的代码将被当做JS代码执行，在输入环境中使用则很容易成为渗透注入点。

6. with(){}

极不推荐使用，使用with 语句会使你的代码形如踏云，毫无安全感，因为用with添加过来的对象可能会对当前作用域的属性与方法产生冲突，影响整个环境

foo = {x:1};
with(foo){
    var x = 3;
    return x;
}

7. this

尽量仅在构造函数，对象方法中使用。
this的语义很特别。在大多数情况下会指向全局对象（window），有的时候会指向调用函数的作用域（使用eval()时），还可能会指向DOM节点（绑定事件时），新创建的对象（构造函数中），也可能是其他的一些什么乱七八糟的玩意（如果函数被call()或者apply()）。

下面是一个构造函数的例子

function Foo(){
    this.num = 1;
    this.mySum = function(a,b){
        return a + b;
    };
};
var foo = new Foo();

下面是一个对象方法

var foo = {
    init: function(){
        return this.num;
    },
    num: 1
};
foo.init();

下面是一个jQuery事件绑定

$("a").click(function(){
    return $(this).attr("href");
});

我就知道你们会要一个标准特性代码

PC端的事件侦听 addEventListener() 和获取属性 getAttribute() 方法兼容有问题，请勿直接投入开发环境使用.

document.getElementById("id").addEventListener("click",function(){
    return this.getAttribute("className");
});

8. for-in循环

只在 Object / Map / Hash 需要遍历键值的时候使用，对 Array 进行for-in 循环可能会出错，因为它不是从 0 到 length - 1,而是这个对象包括其原型链上的所有键值。

function printArray(arr){
    for (var key in arr){
        console.log(arr[key]);
    }
};
printArray([0,1,2,3]); //这样没问题
var a = new Array(1);
printArray(a);  //这样就出错了
a = [0,1,2,3];
a.foo = "foo";
printArray(a);//错

so，遍历数组用 for 循环好了（Tip：如果没有顺序要求，可使用for(var i = length; i--) 在10万级数据背景下可以感受到速度提升）。

function printArray(arr){
    var length = arr.length;
    for(var i = 0; i < length; i++){
        console.log(arr[i]);
    };
};

9. 关联数组

不要用 Array 做类似 Map / Hash 的事情。即不要用数字索引的数组做关联（除非你敢保证数组的结构到手的时候一定是关联的，往往无法保证）
如果真的需要那么就用 Object 。

    /**
     * 根据array1获取array2的数据
     */
    var array1 = ["a","b","c","d"],
        array2 = [12,64,1,20];
    function getTrueNum(name,arr1,arr2){
        var l = arr1.length;
        for(var i = 0; i < l; i++){
            if(name == arr1[i]){
                return arr2[i];
            }
        }
    };
    getTrueNum("a",array1,array2); //12
    array2.sort(); //并不能看出关联关系，不知情的情况下排序了数组
    getTrueNum("a",array1,array2); //1

10. 多行字符串字面量（声明）

//错误的写法
var str =   "Without you?I'd be a soul without a purpose. \   
            Without you?I'd be an emotion without a heart \   
            I'm a face without expression,A heart with no beat. \
            Without you by my side,I'm just a flame without the ..."

从第二行开始的空白字符有可能是空格或制表符（tab），斜杠的结尾后面如果有空格会导致未知错误,可以用如下方式拼接多行字符串。

var str =   "没有你？ 我将是一个没有目的的灵魂；" +
            "没有你？ 我的情感将没有了根基；" +
            "我将是一张没有表情的脸；" +
            "一颗停止跳动的心；" +
            "没有你在我身边；我只是一束没有热量的火焰。" +

11. Array和Object字面量（声明）

//不推荐使用
var arr1 = new Array([0,1,2,3,4]);
//推荐使用
var arr2 = [0,1,2,3,4];

//不推荐的写法
var obj1 = new Object();
var obj2 = new Object();
obj2.a = 0;
obj2.b = 1;
obj2.c = 2;
obj["xxx"] = 3;
//推荐的写法
var obj1 = {};
var obj2 = {
    a: 0;
    b: 1;
    c: 2;
    "xxx": 3；
};

12. 修改内置对象的原型

禁止修改 Object.protopye 或 Array.protopye 或 window 或 document 这样类似的内置对象。

13. 闭包

从外部调用内部 function 时，内部的 function 可以访问外部 function 里的变量，就是闭包。（也有人将所有 function 都称为闭包）

//基本常见写法的闭包
function Circle(r){
    this.r = r;
};
Circle.PI = 3.14159265354;
//判断闭包的位置在这
Circle.prototype.area = function(){
    return Circle.PI * this.r * this.r; //圆面积公式
};
var c = new Circle(1);
alert(c.area());

这里列举一个详细基础的闭包实例

var db = (function() {
// 创建一个隐藏的object, 这个object持有一些数据
// 从外部是不能访问这个object的
var data = {};
// 创建一个函数, 这个函数提供一些访问data的数据的方法
return function(key, val) {
    if (val === undefined) { return data[key] } // get
    else { return data[key] = val } // set
    }
// 我们可以调用这个匿名方法
// 返回这个内部函数，它是一个闭包
})();
db('x'); // 返回 undefined
db('x', 1); // 设置data['x']为1
db('x'); // 返回 1
// 我们不可能访问data这个object本身
// 但是我们可以设置它的成员

另有一个重要的问题在此统一说一下：

14.IIFE（立即执行函数）

;(function(){
    //...
})();

上面这段代码可能有很多人在很长的一段时间都称呼他为闭包，然而并不是，这种写法被称为IIFE（立即执行函数）”。
一个 function 的基本定义和执行如下：

//声明
function foo(){
    //...
};

//解析器执行
foo();

如果让这个js立即执行应该连起来写

function foo(){
    //...
};
foo();

上面代码的问题

传统方法啰嗦，定义和执行分开写

传统方法直接污染全局命名空间，假如有人 function 名写成 window（我知道各位都不会这么干 - -#）

所以我们晓得 function 名后接小括号可以执行该 function ,所以下面的代码可以直接执行么？

function foo(...){
    //...
}();

function foo(...){...} 这段代码相当于用字符串声明一个 function 对象，它需要被解析后才会执行比如：

eval(function foo(...){
    //...
});

所以上面直接加小括号的方法是错误的，正确的思路是：

将声明变成表达式

最常见的转换方法 `()` ：

//IIFE
(function foo(){
    //...
})  //这里故意换行，方便对比，常见是连起来写
();
//normall
var foo = function (){
    //...
}; //这里是一个赋值表达式
foo();

所以之前的错误代码放进 () 也是可以用的哟！并且执行方面没有区别，只是不太眼熟。

(function foo(...){
    //...
}()); //函数名可省略

有没有其他方法？

有的哟！转变表达式的方法其实很多。

//利用非表达式转换
!function (...){
    //...
}();  //返回返回值的相反布尔值（true/false）
//利用运算符转换
+function (...){
    //...
}(); //返回 NaN
//以上两种写法是有特殊return的
void function (...){
    //...
}(); //无特殊return
//

总结一下以上几种写法的共同优点

立即执行，不需要多写一次函数名

不污染全局变量（因为有独立的作用域在表达式中）

如果你需要传入全局对象或参数

(function(win){
    console.log(win);
})(window);

如果你需要一种推荐的写法

从图上来看每秒最慢是 + 运算符,其他几个差距不明显，当然正常使用差别不大。

一个复杂点的例子

在简单功能的插件中很常见，变量没有对全局进行操作，全在局部作用域中。

// 推荐void开头的代码
void(function(yourCode){
    //传递Globe对象
    yourCode(window.jQuery, window, document);
})(function($, window, document){
    //此处可以执行js或者声明函数
    function foo(){
        alert(1);
    };
    foo();
    //页面dom加载完成
    $(function(){
        $("body").css({"background" : "#00ccff"});
    });
});

JavaScript代码风格规范

两空格缩进，这很重要

1. 命名

usually，我们使用类似于 setElementAttr 、getElementAttr 或 ConstructionApple 、 ConstructionBanana 或 THIS_IS_A_CONST 这种命名方式（驼峰式），函数语义更接近动宾短语（动词开头），构造函数首字符大写（大驼峰），常量全大写用下划线 _ 连接。

1.1 属性和方法

1.1.1 私有属性

变量和方法都应以下划线 _ 开头

1.1.2 受保护的属性（不常见）

变量和方法不需要用下划线（和公开相同）

公有方法（变量） public 、私有方法（变量） private 、受保护的方法（变量） protected 请自行查阅资料

1.2 方法和函数参数

可选参数以 opt_ 开头，或书写jsDoc进行说明。

function foo(a,b,opt_c){
    //...
};

函数参数不固定的时候应该有个参数 args 以数组的形式将参数传进来，也许你并不喜欢整理出一个数组，那么可以使用 arguments 伪数组。

//定义参数
var args = [1,2,3,4,5];
function foo(args){
    //...
};
//不定义参数
function foo(){return arguments};
foo(1,2,3,4,5,6); //[1,2,3,4,5,6]

1.3 命名空间

JavaScript并不支持包和命名空间

所以当多个项目代码或者多个组件集成在同一个环境中会出现全局下的明明冲突，后果严重且不易调试。为了提高代码的公用性，可以按照以下约定进行。

1.3.1 在全局作用域下使用伪命名空间

在全局环境中对相关的组件功能使用唯一的顶级变量标识当做伪命名空间，假设组件功能是设备对比，可以定义一个伪命名空间 compare.*。

//可以这样写
var compare = {};
compare.init = function(){
    //...
};
//...
//也可以这样写
var compare = {
    init: function(){
        //...
    },
    //...
};

1.3.2 明确命名空间所有权

当然，在你找到一个合适的命名空间后，还是需要协调一下其他开发人员，避免命名冲突。

1.3.2 外部代码和内部代码使用不同命名空间

“外部代码”指的是当前开发功能以外的可独立执行的代码，比如用了一个通用的工具 foo.tools.* ,那么当前的功能代码就不应该直接定义在其下，否则容易冲突并难以维护。


foo.tools;
/**
 * 不要这样做
 * @constructor
 * @extend{foo.tools.Mouse}
 */
foo.tools.Mouse = function(){
    this.name = "mouse"；
    //...
};

1.3.3 为增强可读性，将长名引用化为短别名

用局部别名引用完整的包名可增强可读性。局部别名命名应和完整包名的最后一部分相匹配。


it.is.a.really.long.nameSpace.MyClass = function(){
    //...
};
it.is.a.really.long.nameSpace.MyClass.someWorker = function(a){
    //...
};
//当我要使用myClass内的各种函数时
myApp.main = function(){
    var MyClass = it.is.a.really.long.nameSpace.myClass;
    var someWorker = it.is.a.really.long.nameSpace.MyClass.someWorker;
    someWorker(new Myclass());
};
//这里有个错误的例子
myApp.main = function(){
    var nameSpace = it.is.a.really.long.nameSpace;
    //...
    nameSpace.someWorker(new nameSpace.Myclass());
};

不要在全局作用域中创建别名引用，仅在函数中使用。

1.3.4 文件命名

文件名应该全部字母小写，避免在某些区分大小写的系统平台产生文件名混淆，html文件建议使用 _(下划线)做连字符，js和css文件建议使用 .(英文句号) 做连字符。

1.4 明确作用域

始终需要明确

任何时候都要明确作用域-提高可移植性和清晰度。例如，不要过度依赖作用域中的 window 对象。有的时候你可能会让你的函数访问的window对象不是之前所指的窗体对象（iframe的情况）。

a = 1;
function getOne(){
    return window.a;
};
//拿到1
getOne();
(function(){
    a++
})(a);
//拿到1？
getOne();

2. 代码格式化

这是一个比较大的问题，我们展开讨论。

2.1 大括号

因为解析器会自动添加分号到代码中，所以应该让左括号和前面的代码放在一行，防止误读或误解析。例如：

if(someThing){
    //...
}else{
    //...
}

2.2 数组和对象的格式化

单行时，不加空格，方便发现中文全角标点，最后一项不加逗号。

var arr = [1,2,3,4，5]; //没有空格
var obj = {a:1,b:2,c:3，d：4}; //没有空格

多行时，最好缩进(2空格缩进)

//数组
var rows = [
    "qwert",
    "yuiop",
    "asdfg",
    "hjkl;",
    "zxcvb",
    "nm,./"
];
//对象,冒号后加空格
var inset = {
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
};
//对象,有的ide支持强迫症式对齐，我完全支持你，但是手工对齐成这样，就是屌丝了
var inset = {
    top    :10,
    right  :20,
    bottom :30,
    left   :40
};

2.3 函数参数

尽可能将函数的所有参数都写在同一行，但为了连续可读性，单行过长时可以适当换行，但记得缩进。

foo(veryLongArgumentNumberOne,
    veryLongArgumentNumberTwo,
    veryLongargumentNumberThree);

当然还有声明的时候

function foo(veryLongArgumentNumberOne,
    veryLongArgumentNumberTwo,
    veryLongargumentNumberThree){
    //...
};

日常中真的会出现如此长参数名的话，你的英文造句好棒啊！

2.4 传递匿名函数（callback）

如果调用方法传参时需要传入匿名函数的声明，记得换行并缩进，这样匿名函数更易阅读。

//使用jQuery的常见写法
$("a").on("click", function(){
    $(this).hide();
});
//回调函数
foo(argument1, argument2, function(){
    return argument1 + argument2;
})

2.5 空行

用空行划分一组逻辑上相关的代码

doSomeThing(x);
doSomeOtherThingTo(x);
doSomeThingTo(y);
doSomeThing(z);

2.6 括号

没必要的时候不要使用它（有必要的时候务必使用）

对于以下操作符：
delete/typeof/void
或某些关键字：
return/throw/case/new
后面永远不要用括号。

2.7 字符串

单引号' 比双引号" 更好

特别是在创建一个HTML代码段的时候：

var msg = '<a class="some_class" href="#">我想说点啥</a>'；

2.8 代码注释

要求代码（一眼看不懂的函数）使用JSDoc编写注释，文档在这里。

一些需要说明的变量或对象或数组或函数请一定要说明一下，说不定你自己明天就不记得了。

明天记得后天，后天记得还有大后天，所以一定要写注释。

2.9 编译压缩

推荐上线后使用，编译压缩后的代码可以更快下载和使用

结语

坚持一致原则

如果你需要编辑他人代码，先花几分钟看看它的代码风格，如果它这么做，那你也应该这么做。
风格统一了，就有了一个共同思维的环境，参与者就可以专注的看你要说什么，而不是先想你说哪星球的语言。虽然提出了统一样式规则，但就只是想让大家都知晓并了解并对自己的风格略作调整。当然，保持自己独有的风格首页是很重要的。