JavaScript之编码规范 推荐


Posted in Javascript onMay 23, 2012

一、命名
1、应给变量和函数取一个含义确切的名称,不要随意命名。
2、非构造函数采用驼峰命名法,尽量采用动宾结构,以与变量名相区别,如getName或IsFull。构造函数(即自定义类型)名称首字母大写,以与非构造函数相区别,如Person。
3、变量采用驼峰命名法。由于JavaScript是一种弱类型语言,因此建议在变量名称前加前缀:整形(i),浮点数(f),布尔型(b),字符串(s),数组(a)。但不强制这么做,可根据个人爱好选择,选择好后就不要混用加前缀和不加前缀这两种方式了。

二、布局
1、空格。
a)var与变量名之间留一个空格,变量名与等号之间留一个空格,等号与初始值之间留一个空格,初始值与分号之间不留空格。如:var i = 10;
b)使用字面量方式声明引用类型变量时,各个属性与冒号之间不留空格,冒号与初始值之间留一个空格。如:

var Person = { 
age: 16, 
name: "Sam" 
};

c)function与函数名之间留一个空格,函数名与()之间不留空格,()与{之间留一个空格。
d)函数的各个参数之间留一个空格。
e)if、while、for与左括号之间留一个空格,以强调关键字;switch、with与左括号之间不留空格。
f) 二元操作符与左右两个操作数之间留一个空格。当某行代码较长时,也可不留空格。
2、换行。
a)每行语句占用一行,不要多个语句一行。
b)if、while、for等块级作用域后的大括号{不要另起一行,就放在关键字同一行。
3、缩进。
a)缩进使用4个空格,不要使用tab。
b)作用域不一样时就应当进行缩进,以显示出其层次关系。

三、注释
1、合理添加注释。注释不能完全没有,也不是越多越好。给重要的方法、变量和算法(或其他需要注意的问题)添加注释即可。
2、修改源代码时,需要同步修改注释,保持两者的一致。
3、不要在代码中使用html方式的注释。

四、规范
1、申明变量时必须加var关键字。虽然JavaScript允许不加var关键字,此时成为全局变量,但这是导致问题的一个来源。
2、申明变量时必须同时进行初始化,之后最好不要再改变变量的数据类型了。
3、语句末尾可以加分号的,必须加分号。
4、if、while、for等仅有一条语句时,也需要放在大括号内。
5、不要随意使用全局变量,如果不得不使用,最好只用一个全局变量。
6、JavaScript与html、css之间应保持松散耦合。html是数据层,css是表现层,JavaScript是行为层,三者应避免紧密的耦合,否则会导致后期难以维护。html中不要有具体的JavaScript代码,全部采用包含外部文件的方式;JavaScript中也尽量不要使用innerHTML等插入大量html元素,应考虑将元素放在html中,只不过初始隐藏即可;JavaScript中不要直接修改css中的具体属性,而应通过className来间接修改。
7、不要修改不是由你所有的对象,不给其实例或原型添加属性或方法,也不要重复定义其已有的方法。否则,当该对象的新版本添加了同名的属性或方法时,会导致潜在的难以察觉的问题。解决方案有两种:一是继承,二是包含。
8、使用命名空间来防止多个库之间的冲突,可参考YUI库的组织方式。
9、对于代码中出现的字面量,应将其放在某个变量的属性中,属性名首字母或所有字母大写(模拟其他语言中的define或enum)。如:

var Color = { 
RED: 1, 
BLUE: 2, 
GREEN: 3 
};

10、对函数中传入的参数进行检查。若为基本类型,使用typeof;若为引用类型,使用instanceOf;若要检查某个对象是否包含某个方法,则对该方法使用typeof操作符,并与字符串"undefined"比较。

五、性能
1、避免全局查找。使用全局变量和函数的开销要比使用局部变量和函数大,因为全局变量和函数涉及到作用域链的查找。因此,当函数中多次使用全局变量时,就会进行多次作用域链的查找,为了避免这个问题,可以将多次使用的全局变量赋值给一个局部变量,以后都使用该局部变量。
2、避免使用witch语句。with语句会创建自己的作用域,从而导致额外的开销。
3、避免属性查找。属性查找是一个O(n)操作,对象上的任何属性查找都比访问变量和数组花费更多时间(访问变量和数组是O(1)操作)。因此,如果多次用到同一个属性,则应将其保存在局部变量中。如:

var sUrl = window.location.href; 
var sData = sUrl.substring(sUrl.indexOf("?"));
Javascript 相关文章推荐
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
javascript生成随机数的方法
May 16 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
JS实现520 表白简单代码
May 21 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
javascript的数据类型、字面量、变量介绍
May 23 #Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 #Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 #Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 #Javascript
利用javascript解决图片缩放及其优化的代码
May 23 #Javascript
JavaScript 图像动画的小demo
May 23 #Javascript
JavaScript学习笔记记录我的旅程
May 23 #Javascript
You might like
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
详解React 元素渲染
2020/07/07 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
python中函数传参详解
2016/07/03 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Django model序列化为json的方法示例
2018/10/16 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
Servlet方面面试题
2016/09/28 面试题
秋季运动会表扬稿
2014/01/16 职场文书
第一节英语课开场白
2015/06/01 职场文书
校园安全学习心得体会
2016/01/18 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python