JavaScript常用代码书写规范的超全面总结_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().

     3.die 总是被调用。因为数组减 1 的结果是 NaN,它不等于任何东西(无论 resultOfOperation 是否返回 NaN)。所以最终的结果是 die() 执行完所获得值将赋给 THINGS_TO_EAT.

八、语句块内的函数声明

切勿在语句块内声明函数,在 ECMAScript 5 的严格模式下,这是不合法的。函数声明应该在作用域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

不推荐

if (x) {
 function foo() {}
}

推荐

if (x) {
 var foo = function() {};
}

九、不要使用eval函数

eval() 不但混淆语境还很危险,总会有比这更好、更清晰、更安全的另一种方案来写你的代码,因此尽量不要使用 eval 函数。

十、数组和对象字面量

1.用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

不推荐

//数组长度3
var a1 = new Array(x1, x2, x3);
//数组长度2
var a2 = new Array(x1, x2);

//如果x1是一个自然数,那么它的长度将为x1
//如果x1不是一个自然数,那么它的长度将为1
var a3 = new Array(x1);

var a4 = new Array();

正因如此,如果将代码传参从两个变为一个,那数组很有可能发生意料不到的长度变化。为避免此类怪异状况,请总是采用可读的数组字面量。

推荐

var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

2.对象构造器不会有类似的问题,但是为了可读性和统一性,我们应该使用对象字面量。

不推荐

var o = new Object();

var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;

推荐

var o = {};
var o2 = {
 a: 0,
 b: 1,
 c: 2,
 'strange key': 3
};

十一、三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

if(x === 10) {
 return 'valid';
} else {
 return 'invalid';
}

推荐

return x === 10 ? 'valid' : 'invalid';

十二、for循环

使用for循环过程中,数组的长度,使用一个变量来接收,这样有利于代码执行效率得到提高,而不是每走一次循环,都得重新计算数组长度

不推荐

for(var i=0;i<arr.length,i++){

}

推荐

for(var i=0,len=arr.length;i<len,i++){

}

十三、重复的dom操作

重复的dom操作,使用一个变量来进行接收很有必要,而不是频繁的去操作dom树,这对性能与代码的整洁及易维护性带来不好的影响

不推荐

$('.myDiv').find('.span1').text('1');
$('.myDiv').find('.span2').text('2');
$('.myDiv').find('.span3').text('3');
$('.myDiv').find('.span4').text('4');

推荐

var mydiv=$('.myDiv');
mydiv.find('.span1').text('1');
mydiv.find('.span2').text('2');
mydiv.find('.span3').text('3');
mydiv.find('.span4').text('4');

jquery .end()可使用的情况下应该优先使用.end()

推荐

$('.myDiv').find('.span1').text('1')
   .end().find('.span2').text('2');
   .end().find('.span3').text('3');
   .end().find('.span4').text('4');

十四、注释规范

在描写注释时,推荐格式化且统一的注释风格,在写注释时尽量描述写代码时的思路,而不是代码做了什么。

不推荐

//获取订单
function getOrderByID(id){
 var order;
 //...
 return order;
}

方法的注释应该统一用块级注释

推荐

/**
 * 根据订单id获取订单详细数据
 * @param {[number]} id [订单ID]
 * @return {[order]} [订单详细信息]
 */
function getOrderByID(id){
 var order;
 //...
 return order;
}

总结

JavaScript常用代码书写规范总结到这就基本结束了,这篇文章总结的还是很全面的,对大家使用或学些Javascript具有一定的参考借鉴价值,希望对大家能有所帮助,如果有疑问大家可以留言交流。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript书写规范
, js代码书写规范
js代码书写格式
javascript书写规范、javascript书写格式、粉笔字书写技巧、电极方程式的书写技巧、常用英文地址书写格式,以便于您获取更多的相关知识。

时间: 2024-09-10 02:23:21

JavaScript常用代码书写规范的超全面总结_javascript技巧的相关文章

javascript Discuz代码中的msn聊天小功能_javascript技巧

javascript中添加以下2个函数 function msnoperate(action, msn) {    var actionArray = new Array();    actionArray = {    'add' : 'http://go.discuz.com/?app=msn&linkid=5&msn=' + msn,    'chat' : 'http://go.discuz.com/?app=msn&linkid=6&msn=' + msn    

基于.NET项目的代码书写规范要求书

规范|项目 本文为下半年为一项目撰写的简要代码书写规范,不尽详尽,但仍有参考价值.但是代码书写规范更重要的是项目组内组员的意识性的提高,根据此项目到目前为止的状况,就此简单规范的实现情况并不乐观,代码中仍有五花八门各个流派的风格,此问题系软件项目组管理中的不完善所致,在此并不研究此问题. 第一章 主体命名规范一.外挂服务命名规范1) 服务项目命名 所有服务项目名使用ESrv(注意大小写)开头,第五位字母开始自订义,但是第五位字母必须大写.比如ESrvDemo1,其中Demo1为自定义名称. 二.

rustysun同学ASP代码书写规范_ASP基础

ASP源程序书写规范 1       规范简介 本规范主要规定ASP源程序在书写过程中所应遵循的规则及注意事项.编写该规范的目的是使项目开发人员的源代码书写习惯保持一致.这样做可以使每一个组员都可以理解其它组员的代码,以便于源代码的二次开发记忆系统的维护. 2       一般格式规范 2.1       缩进 缩进就是在当源程序的级改变时为增加可读性而露出的两个空格.缩进的规则为每一级缩进四个空格.不准许使用Tab.因为Tab会因为用户所作的设置不同而产生不同的效果(如果习惯使用空格的话,可以

C语言的语法风格与代码书写规范指南_C 语言

C代码: #include <stdio.h> int main(void) { printf("That is Right Style\n"); return 0; } 在一个标准的C语言程序中,最特殊的莫过于main函数了,而说到底它就是一个函数而已,仅仅因为它地位特殊拥有第一执行权力,换句话说,难道因为一个人是省长它就不是人类了?所以函数该有的它都应该有,那么函数还有什么呢? 函数大体上分为内联函数(C99)(内联函数并非C++专属,C语言亦有,具体见前方链接)和非内

rustysun同学ASP代码书写规范

ASP源程序书写规范 1       规范简介 本规范主要规定ASP源程序在书写过程中所应遵循的规则及注意事项.编写该规范的目的是使项目开发人员的源代码书写习惯保持一致.这样做可以使每一个组员都可以理解其它组员的代码,以便于源代码的二次开发记忆系统的维护. 2       一般格式规范 2.1       缩进 缩进就是在当源程序的级改变时为增加可读性而露出的两个空格.缩进的规则为每一级缩进四个空格.不准许使用Tab.因为Tab会因为用户所作的设置不同而产生不同的效果(如果习惯使用空格的话,可以

JavaScript实现倒计时代码段Item1(非常实用)_javascript技巧

现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示 讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="

纯javascript代码实现计算器功能(三种方法)_javascript技巧

今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

Javascript面象对象成员、共享成员变量实验_javascript技巧

1)Javascript对象成员实验: 复制代码 代码如下: var f = function d() { this.a = "a";/*这句运行后不存在f.a也不存在d.a存在一个window.a*/ var b = "b";/*局部变量*/ }; var o = { ff: function () { var a = "a"; /*局部变量*/ this.b = "b"; /*这句运行后存在o.b*/ } }; funct

你必须知道的Javascript知识点之&amp;quot;单线程事件驱动&amp;quot;的使用_javascript技巧

复制代码 代码如下:  var intervalBody = function(){     console.log('interval'); }  var startInterval = function(){     setInterval(intervalBody,1000); }  var timeoutBody = function(){     console.log('timeout'); }  var startTimeout = function(){     setTimeo