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具有一定的参考借鉴价值,希望对大家能有所帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • Dojo Javascript 编程规范 规范自己的JavaScript书写

    前言 良好的JavaScript书写习惯的优点不言而喻,今天彬Go向大家推荐Dojo Javascript 编程规范,相当不错的 Javascript 编程风格规范,建议大家可以借鉴一下此规范编写 Javascript.感谢i.feelinglucky的翻译. 序 Any violation to this guide is allowed if it enhances readability. 所有的代码都要变成可供他人容易阅读的. 快读参考 核心 API 请使用下面的风格: 结构 规则 注释

  • javascript代码规范小结

    1. Javascript代码应符合Douban-JSLint检验标准 1-1. 语句必须都有分号结尾,除了for, function, if, switch, try, while 1-2. 只有长语句可以考虑断行,如: TEMPL_SONGLIST.replace('{TABLE}', da['results']) .replace('{PREV_NUM}', prev) .replace('{NEXT_NUM}', next) .replace('{CURRENT_NUM}', curre

  • javascript异步编程代码书写规范Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编程时候代码书写的方式产生的. 随着javascript的发展,异步的场景越来越多.前端有AJAX,setTimeout等,后端Node异步更多.按照传统的做法,那么就是各种回调嵌回调.代码可以把人绕晕. 这个时候,CommonJS社区提出了一个叫做Promise/A+的规范,这个规范定义了如何书写异步代

  • JavaScript开发规范要求(规范化代码)

    本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及. 1.保证代码压缩后不出错 对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利

  • html页面head区域的编码书写规范

    今天我们简单的介绍一下head区域主要放置了内容.这里就不强调css和javascript了,这两者是大家所熟知的. head区一般必须加入的标识有: 公司版权注释 <!--- the site is designed by MrJin 03/2001 ---> 网页显示字符集 简体中文: <meta http-equiv="content-type" content="text/html; charset=gb2312"> 繁体中文: &l

  • C#书写规范

    C#书写规范  一.命名  对于理解应用程序的逻辑流,命名方案是最有影响力的一种帮助.名称应该说明"什么"而不是"如何".通过避免使用公开基础实现(它们会发生改变)的名称,可以保留简化复杂性的抽象层.例如,可以使用 GetNextStudent(),而不是 GetNextArrayElement().  命名原则是:  选择正确名称时的困难可能表明需要进一步分析或定义项的目的.使名称足够长以便有一定的意义,并且足够短以避免冗长.唯一名称在编程上仅用于将各项区分开.表

  • 现如今最流行的JavaScript代码规范

    什么是最佳的JavaScript代码编程规范?这可能是一个众口难调的问题.那么,不妨换个问题,什么代码规范最流行? sideeffect.kr通过分析GitHub上托管的开源代码,得出了一些有趣的结果.一起来看看吧. 行末逗号对行首逗号行末引号: 复制代码 代码如下: var foo = 1,     bar = 2,     baz = 3; var obj = {     foo: 1,     bar: 2,     baz: 3 }; 行首引号: 复制代码 代码如下: var foo =

  • JavaScript的代码编写格式规范指南

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注. 本文浅谈 JavaScript 编程中关

  • JavaScript代码因逗号不规范导致IE不兼容的问题

    在用ExtJS做前端开发的时候,发现系统可以在谷歌浏览器.火狐下正常显示,但是用IE浏览器打开就会报错,报错信息如:Expected identified, string or number.后来,检查的代码的时候发现,是由于js代码中逗号用的不规范导致的IE不兼容. 由于我是用eclipse来写代码的,下面我也就介绍怎么用eclipse来解决这个问题: 例如有下面这么一段不规范的代码: Ext.onReady(function() { var panel = Ext.create('Ext.c

  • 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)); 二.立即执行函数 在立即执行函数里面,如果有用到全局变量应该通过

  • rustysun同学ASP代码书写规范

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

  • javascript常用代码段搜集

    1.json转字符串 复制代码 代码如下: function json2str(o) {     var arr = [];     var fmt = function (s) {         if (typeof s == 'object' && s != null) return json2str(s);         return /^(string|number)$/.test(typeof s) ? "'" + s + "'" :

  • javascript 常用代码技巧大收集

    1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">点击时文字消

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

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

  • JAVA代码书写规范汇总详解

    一般原则 尽量使用完整的英文描述符 采用适用于相关领域的术语 采用大小写混合增强可读性 尽量少用缩写,但如果用了,要明智地使用,且在整个工程中统一 避免使用长的名字 避免使用类似的名字,或者仅仅是大小写不同的名字 避免使用下划线(除静态常量等) 命名的字母大小写问题 包名: 字母全小写 例如: cn.coderstory.Activity.Main 类,接口 :首字母大写,其他全小写 例如: class Container 方法,变量 :第二个单词开始首字母大写 例如: seedMessage

  • 12种JavaScript常用的MVC框架比较分析

    本文详细讲述了12种JavaScript常用的MVC框架.分享给大家供大家参考,具体如下: Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出. 此次比较针对的特性标准有四种,分别是: ① UI绑定(UI Bindings) ② 复合视图(Composed Views) ③ Web表现层(Web Presentation Layer) ④

随机推荐