专栏名称: 网页设计轻松学
网页设计与制作技术,php、html javascript、网站开发技术的交流与学习。PS AI平面网页设计,修图等相关学习应有尽有!!
目录
相关文章推荐
融媒吴江  ·  突然宣布!大范围裁员! ·  昨天  
融媒吴江  ·  突然宣布!大范围裁员! ·  昨天  
电池中国  ·  保时捷收购德国瓦尔塔高性能电池业务 ·  2 天前  
青岛交通广播FM897  ·  突然宣布!大范围裁员!涉及8200人 ·  2 天前  
青岛交通广播FM897  ·  突然宣布!大范围裁员!涉及8200人 ·  2 天前  
潮流财经  ·  太突然!双双宣告停产!一代经典落幕 ·  2 天前  
51好读  ›  专栏  ›  网页设计轻松学

JavaScript-总结常用代码书写规范

网页设计轻松学  · 公众号  ·  · 2018-02-22 07:24

正文

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 =







请到「今天看啥」查看全文