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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
php+oracle 分页类
2006/10/09 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
node.js使用redis储存session的方法
2018/09/26 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
打架检讨书500字
2014/01/29 职场文书
家庭教育的心得体会
2014/09/01 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Pandas数据类型之category的用法
2021/06/28 Python
Python OpenCV之常用滤波器使用详解
2022/04/07 Python