JavaScript常用代码书写规范
javascript 代码规范
代码规范我们应该遵循古老的原则:“能做并不意味着应该做”。
全局命名空间污染
总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块。
不推荐
var x = , y = ; console.log(window.x + ' ' + window.y);
推荐
;(function(window){ 'use strict'; var x = , y = ; console.log(window.x + ' ' + window.y); }(window));
立即执行函数
在立即执行函数里面,如果有用到全局变量应该通过变量传递的方式,让立即执行函数的函数体在调用时,能以局部变量的形式调用,在一定程度上提升程序性能。
并且应该在立即执行函数的形参里加上undefined,在最后一个位置,这是因为ES3里undefined是可以读写的,如果在全局位置更改undefined的值,你的代码可能得不到逾期的结果。
另外推荐在立即执行函数开始跟结尾都添加上分号,避免在合并时因为别人的代码不规范而影响到我们自己的代码
不推荐
(function(){ 'use strict'; var x = , y = , 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 = , y = , 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=; y=; }
不完全推荐
function myFun(){ var x=; var y=; }
推荐
function myFun(){ var x=, y=; }
使用带类型判断的比较判断
总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。
如果你使用 === 操作符,那比较的双方必须是同一类型为前提的条件下才会有效。
不推荐
(function(w){ 'use strict'; w.console.log('' == ); // true w.console.log('' == false); // true w.console.log('' == 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('' === ); // false w.console.log('' === false); // false w.console.log('' === 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 = ; } else { x = y; } }
推荐
x = x || y || ;
分号
总是使用分号,因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题[1] 。以下几个示例展示了缺少分号的危害:
// 1. MyClass.prototype.myMethod = function() { return ; } //这里没有分号 (function() { })(); //2. var x = { 'i': , 'j': } // 这里没有分号 //我知道这样的代码你可能永远不会写,但是还是举一个例子 [ffVersion, ieVersion][isIE](); // 3. var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // 这里没有分号 - == 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 = ; o2.b = ; o2.c = ; o2['strange key'] = ;
推荐
var o = {}; var o2 = { a: , b: , c: , 'strange key': };
三元条件判断(if 的快捷方法)
用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。
不推荐
if(x === ) { return 'valid'; } else { return 'invalid'; }
推荐
return x === ? 'valid' : 'invalid';
for循环
使用for循环过程中,数组的长度,使用一个变量来接收,这样有利于代码执行效率得到提高,而不是每走一次循环,都得重新计算数组长度
不推荐
for(var i=;i<arr.length,i++){ }
推荐
for(var i=,len=arr.length;i<len,i++){ }
重复的dom操作
重复的dom操作,使用一个变量来进行接收很有必要,而不是频繁的去操作dom树,这对性能与代码的整洁及易维护性带来不好的影响
不推荐
$('.myDiv').find('.span1').text(''); $('.myDiv').find('.span2').text(''); $('.myDiv').find('.span3').text(''); $('.myDiv').find('.span4').text('');
推荐
var mydiv=$('.myDiv'); mydiv.find('.span1').text(''); mydiv.find('.span2').text(''); mydiv.find('.span3').text(''); mydiv.find('.span4').text('');
在jquery .end()可使用的情况下应该优先使用.end()
推荐
$('.myDiv').find('.span1').text('') .end().find('.span2').text('') .end().find('.span3').text('') .end().find('.span4').text('');
注释规范
在描写注释时,推荐格式化且统一的注释风格,在写注释时尽量描述写代码时的思路,而不是代码做了什么。
不推荐
//获取订单 function getOrderByID(id){ var order; //... return order; }
方法的注释应该统一用块级注释
推荐
/** * 根据订单id获取订单详细数据 * @param {[number]} id [订单ID] * @return {[order]} [订单详细信息] */ function getOrderByID(id){ var order; //... return order; }
原文:http://mp.weixin.qq.com/s/zslMnG8e9Bh68ELG2SC3Ug
JavaScript常用代码书写规范的更多相关文章
- 【转】JavaScript常用代码书写规范
javascript 代码规范 代码规范我们应该遵循古老的原则:“能做并不意味着应该做”. 全局命名空间污染 总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块. 不推荐 1 2 3 var ...
- WEB标准:标准定义、好处、名词解释、常用术语、命名习惯、浏览器兼容、代码书写规范
1. WEB标准是什么? “WEB标准”是一系列标准的总称.一般的误区经常把WEB标准说成DIV+CSS.准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页 ...
- javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
- (转)Java代码书写规范
0. 安装阿里代码规范的eclipse插件 https://www.cnblogs.com/caer/p/7753522.html 1.基本原则 强制性原则: 1.字符串的拼加操作,必须使用S ...
- C#中的代码书写规范以及命名规范
C#代码书写规则: 1. 尽量使用接口,然后使用类实现接口,以提高程序的灵活性. 2.一行不要超过80个字符 3.尽量不要手动更改计算机生成的代码 4.关键的语句写注释 5.建议局部变量在最接近使用它 ...
- Unity项目代码书写规范
以Google的代码规范为主,稍加改动 https://google.github.io/styleguide/csharp-style.html 书写规范 基础写法 Pascal和驼峰混用,参数用驼 ...
- C++代码书写规范——给新手程序员的一些建议
代码就是程序员的面子,无论是在工作中在电脑上写程序代码还是在面试时在纸上写演示代码我们都希望写出整洁,优雅的代码.特别在工作中当我们碰到需要维护别人的代码,或者是多人参与一个项目大家一起写代码的时候, ...
- JavaScript常用代码段
总结一下在各种地方看到的还有自己使用的一些实用代码 1)区分IE和非IE浏览器 if(!+[1,]){ alert("这是IE浏览器"); } else{ alert(" ...
- Python代码书写规范
Python 编码规范 一 代码编排1 缩进.4个空格的缩进(编辑器都可以完成此功能),不要使用Tap,更不能混合使用Tap和空格.2 每行最大长度79,换行可以使用反斜杠,最好使用圆括号.换行点要在 ...
随机推荐
- TypeScript 实现任务队列
业务中经常会有一些批量操作的任务,比如使用 JavaScript 预加载一组图片,批量上传一些资源.如果这些任务一次性启动,势必会消耗很多资源和带宽.理想的做法应该对这些任务进行限制,比如一次只跑几个 ...
- redis基本类型以及优点特性
1.什么是redis? redis是一个基于内存的高性能key-value数据库 2.redis基本数据类型及应用场景 支持多种数据类型: string(字符串) String数据结构是简单的k ...
- 《前端之路》之 JavaScript 高级技巧、高阶函数(一)
目录 一.高级函数 1-1 安全的类型检测 1-2 作用域安全的构造函数 1-3 惰性载入函数 1-4 函数绑定 1-5 函数柯里化 1-6 反函数柯里化 一.高级函数 1-1 安全的类型检测 想到类 ...
- PHP扩展高性能日志系统SeasLog简单上手
Windows部分:-------------------------------------------------------- https://pecl.php.net/package/Seas ...
- MVC设计模式思想及简单实现
一.什么是MVC MVC即Model-View-Controller(模型-视图-控制器)是一种软件设计模式,最早出现在Smalltalk语言中,后被Sun公司推荐为Java EE平台的设计模式. M ...
- QT读取xml配置文件
//获取字符串字段 QString ConfigHelper::GetStringConfigValue(QString str) { if(str == "InitDeviceNo&quo ...
- centos下python3.6安装uwsgi失败。
报错信息(省略大部分): plugins/python/uwsgi_python.h::: fatal error: Python.h: No such file or directory #incl ...
- Java 10 var关键字详解和示例教程
在本文中,我将通过示例介绍新的Java SE 10特性——“var”类型.你将学习如何在代码中正确使用它,以及在什么情况下不能使用它. 介绍 Java 10引入了一个闪亮的新功能:局部变量类型推断.对 ...
- 【机器学习】--GBDT算法从初始到应用
一.前述 提升是一种机器学习技术,可以用于回归和分类的问题,它每一步产生弱预测模型(如决策树),并加权累加到总模型中:如果每一步的弱预测模型的生成都是依据损失函数的梯度方式的,那么就称为梯度提升(Gr ...
- 批量执行工具PSSH详解
批量执行工具PSSH详解 pssh是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,使用必须在各个服务器上配置好密钥认证访问. 安装pssh包 yum 安 ...