JavaScript常用代码书写规范的超全面总结

一、全局命名空间污染

总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块。

不推荐

var x = 10, y = 100; console.log(window.x + ' ' + window.y);

推荐

;(function(window){ 'use strict'; var x = 10, y = 100; console.log(window.x + ' ' + window.y); }(window));

二、立即执行函数

在立即执行函数里面,如果有用到全局变量应该通过变量传递的方式,让立即执行函数的函数体在调用时,能以局部变量的形式调用,在一定程度上提升程序性能。

并且应该在立即执行函数的形参里加上undefined,在最后一个位置,这是因为ES3里undefined是可以读写的,如果在全局位置更改undefined的值,你的代码可能得不到逾期的结果。

另外推荐在立即执行函数开始跟结尾都添加上分号,避免在合并时因为别人的代码不规范而影响到我们自己的代码

不推荐

(function(){ 'use strict'; var x = 10, y = 100, c, elem=$('body'); console.log(window.x + ' ' + window.y); $(document).on('click',function(){ }); if(typeof c==='undefined'){ //你的代码 } }());

推荐

;(function($,window,document,undefined){ 'use strict'; var x = 10, y = 100, c, elem=$('body'); console.log(window.x + ' ' + window.y); $(document).on('click',function(){ }); if(typeof c==='undefined'){ //你的代码 } }(jQuery,window,document));

三、严格模式

ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮,运行的也更加快速。

严格模式会阻止使用在未来很可能被引入的预留关键字。

你应该在你的脚本中启用严格模式,最好是在独立的 立即执行函数 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。

不推荐

'use strict'; (function(){ }());

推荐

(function(){ 'use strict'; }());

四、变量声明

对所有的变量声明,我们都应该指定var,如果没有指定var,在严格模式下会报错,并且同一个作用域内的变量应该尽量采用一个var去声明,多个变量用“,”隔开。

不推荐

function myFun(){ x=5; y=10; }

不完全推荐

function myFun(){ var x=5; var y=10; }

推荐

function myFun(){ var x=5, y=10; }

五、使用带类型判断的比较判断

是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。

如果你使用 === 操作符,那比较的双方必须是同一类型为前提的条件下才会有效。

不推荐

(function(w){ 'use strict'; w.console.log('0' == 0); // true w.console.log('' == false); // true w.console.log('1' == true); // true w.console.log(null == undefined); // true var x = { valueOf: function() { return 'X'; } }; w.console.log(x == 'X');//true }(window.console.log));

推荐

(function(w){ 'use strict'; w.console.log('0' === 0); // false w.console.log('' === false); // false w.console.log('1' === true); // false w.console.log(null === undefined); // false var x = { valueOf: function() { return 'X'; } }; w.console.log(x === 'X');//false }(window));

六、变量赋值时的逻辑操作

逻辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象,那每个表达式将会被自左向右地做真假判断。基于此操作,最终总有一个表达式被返回回来。这在变量赋值时,是可以用来简化你的代码的。

不推荐

if(!x) { if(!y) { x = 1; } else { x = y; } }

推荐

x = x || y || 1;

七、分号

总是使用分号,因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题[1] 。

以下几个示例展示了缺少分号的危害:

// 1. MyClass.prototype.myMethod = function() { return 42; } //这里没有分号 (function() { })(); //2. var x = { 'i': 1, 'j': 2 } // 这里没有分号 //我知道这样的代码你可能永远不会写,但是还是举一个例子 [ffVersion, ieVersion][isIE](); // 3. var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // 这里没有分号 -1 == resultOfOperation() || die();

错误结果

1. JavaScript 错误 —— 首先返回 42 的那个 function 被第二个function 当中参数传入调用,接着数字 42 也被“调用”而导致出错。

2.八成你会得到 ‘no such property in undefined' 的错误提示,因为在真实环境中的调用是这个样子:xffVersion, ieVersion().

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjpgs.html