前端代码规范合集

0.全局命名空间污染与IIFE

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。

IIFE（立即执行的函数表达式）

无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。

所有脚本文件建议都从 IIFE 开始。

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。

不推荐

(function(){})();

1.深入IIFE

函数跟随一对圆括号()表示函数调用

//函数声明语句写法 function test(){};
test();
//函数表达式写法
var test = function(){};
test();

但有时需要在定义函数之后，立即调用该函数。

这种函数就叫做立即执行函数，全称为立即调用的函数表达式IIFE(Imdiately Invoked Function Expression)

[注意]javascript引擎规定，如果function关键字出现在行首，一律解释成函数声明语句

【1】函数声明语句需要一个函数名，由于没有函数名，所以报错

//SyntaxError: Unexpected token (
function(){}();

【2】函数声明语句后面加上一对圆括号，只是函数声明语句与分组操作符的组合而已。由于分组操作符不能为空，所以报错

//SyntaxError: Unexpected token )
function foo(){}();
//等价于
function foo(){};
();//SyntaxError: Unexpected token )

【3】函数声明语句加上一对有值的圆括号，也仅仅是函数声明语句与不报错的分组操作符的组合而已

function foo(){}(1);
//等价于
function foo(){};

所以，解决方法就是不要让function出现在行首，让引擎将其理解成一个表达式

最常用的是前两种方法

(function(){ /* code */ }());//强烈推荐！
(function(){ /* code */ })();
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();
new function(){ /* code */ };
new function(){ /* code */ }();

用途

IIFE一般用于构造私有变量，避免全局空间污染

接下来用一个需求实现来更直观地说明IIFE的用途。假设有一个需求，每次调用函数，都返回加1的一个数字(数字初始值为0)

【1】全局变量

一般情况下，我们会使用全局变量来保存该数字状态

var a = 0;
function add(){
return ++a;
}
console.log(add());//1
console.log(add());//2

【2】自定义属性

但上面的方法中，变量a实际上只和add函数相关，却声明为全局变量，不太合适。

将变量a更改为函数的自定义属性更为恰当

function add(){
return ++add.count;
}
add.count = 0;
console.log(add());//1
console.log(add());//2

【3】IIFE

其实这样做，还是有问题。有些代码可能会无意中将add.count重置

使用IIFE把计数器变量保存为私有变量更安全，同时也可以减少对全局空间的污染

var add = (function(){
var counter = 0;
return function(){
return ++counter;
}
})();
console.log(add())//1
console.log(add())//2

注意事项

IIFE称为立即执行函数，这个立即执行函数有多立即呢？

立即执行函数再快也得按照代码执行顺序，逐行执行，如下代码返回1

var a = 1;
(function(){
console.log(a);//1
})();

类似地，函数也是这种情况

function a(){
return 1;
}
(function(){
console.log(a());//1
})();

但，如果是函数表达式就不一样了。执行如下代码会报错，提示此时的a是undefined

var a = function(){
return 1;
}
(function(){
console.log(a());//报错
})();

函数有一个声明提升的过程，函数表达式其实分为先声明后赋值这两步。而，如果后面存在着立即执行函数IIFE，这个IIFE会快到函数表达式a执行完第一步骤函数声明之后IIFE就会立即执行，这此时a未被赋值，是undefined，所以执行a()时会报错

前端代码规范(2)——IIFE