20条学习javascript的编程规范的建议


Posted in Javascript onNovember 28, 2014

1、使用js文件管理代码

所有代码尽量放在js文件中,然后再html文件中使用script引入,引入时注意放在body标签后面,并且不使用type或者language。

2、书写缩进

使用4个空白格缩进,注意不要使用tab键进行缩进。

3、断句

注意行长,每行不超过80个字符,超过时要进行适当断句,断句应该再操作符后面进行,最理想的是在逗号(,)后面进行断句,断句后下一行使用8格缩进。

4、注解

一般使用单行注释,块注释一般用于文档。

5、变量声明

所有变量使用之前先声明,未声明的变量会自动作为全局变量。全文应少使用全局变量。
最好把所有变量声明用一个var实现,并且每个声明单独放一行,并添加注释说明,如果可以所有声明变量按照字符顺序列出,如下:

var currentEntry,      //当前选择表项目

    level;          //缩进级别

在函数体内顶部定义所有变量,则var出现在函数体首行。

6、函数声明

所有函数使用前应该先声明,并且在变量之后进行-------有助于查看作用域。
函数名和括号直接不应该有空格;右括号(和函数参数之间不应该有空格;左括号)和函数体括号{之间有一个空格;函数体缩进4个空格;函数体结束括号}和函数声明关键字function首字符对齐。如下代码:

function outer(c,d) {

    var e = c * d;
    function inner(a,b) {

        return (e * a ) + b;

    }
    return inner(0,1);

}

函数和对象可以被放在任何允许放表达式的地方。
匿名函数关键字function和左括号(之间有一个空格。
尽量少使用全局函数。
对于立即执行函数,整个调用表达式应放在一对个括号()里面,以明确变量的值是函数执行结果而不是函数本身。如下代码:
var result = (function () {

    var key = "";

    return {

        get: function () {

            return key;

        },

        set: function (key) {

            key = key;

        }

    };

}());

7、命名

以字母、数字、下划线命名,避免使用国际字符、美元符号$、反斜杠\。
不要使用下划线作为名称的首位字符。
大多数变量和函数使用小写字母开头命名。
构造函数必须使用大写字母开头,在js中省略new不会报错(编译或者运行错误),但最好不要省略。
全局变量应用全部大写命名(js中没有宏和常量的概念)。

8、语句

简单语句

每行最多一条语句,并且使用分号;结尾,注意以函数字面量和对象字面量赋值的语句也要使用分号;。
js允许任何一个变量作为一条语句,但是在插入分号的时候可能会引起某些错误,因此一般使用表达式的语句是赋值或者函数调用语句(这句英文原文我大概理解了,但是不知道怎么翻译出来比较好)

复合语句(包含在一对{}之间的语句)

内部语句缩进4个空格。

左括号{应该在开始语句行的末尾。
右括号应该在最后单独一行,并且与左括号所在行的首字符对齐。
当语句在控制语句(例如for、if等)中时,应该使用花括号{}将语句包围起来,即使只有一条语句,这样可以保证在添加语句时不产生bug。

9、标签(这一部分的理解感觉不是很对)

要使用label的语句是有选择性的,只有下面几种:while、for、do、switch。

10、返回语句

返回的值应该用圆括号括起来,且返回表达式应该和return关键字在同一行(避免换行插入分号)。

11、if语句

遵循如下格式:

if (condition) {

    statements

}
if (condition) {

    statements

} else {

    statements

}
if (condition) {

    statements

} else if (condition) {

    statements

} else {

    statements

}

12、for语句

遵循如下格式:

for (initiliazation; condition; update) {

    statements

}
for (variable in object) {

    if (filter) {

        statements

    }

}

第一种循环格式用于数组和可以判断迭代次数的变量。
第二中用于对象遍历
注:此处提到了在对象原型中添加的属性是可以枚举的,因此要使用hasOwnProperty方法进行筛选,但是我用for in代码测试的时候,没有显示,这里不知道问题出在了哪里。

13、while语句

遵循如下格式:

while (condition) {

    statements

}

14、do-while语句

遵循如下格式:

do {

    statements  

} while (condition);

语句结尾要添加分号。

15、switch语句

遵循如下格式:

switch (expression) {

case expression:

    statements

default:

    statements

}

每一个case都要和switch对齐,避免过分缩进,只有case标签不是语句,应该不应该缩进。
每个case语句(除了default)必须要以break或return或throw结尾。

16、try语句

遵循如下格式:

try {

    statements

} catch (variable) {

    statements

}

try {

    statements

} catch (variable) {

    statements

} finally {

    statements

}

17、continue语句

避免使用continue语句。

18、with语句

不应该使用with语句。

19、空格使用

通过设置空行来分割逻辑相关的代码段,以增强代码可读性。
在以下情况下设置空格:
关键字之后跟随左括号(要使用空格,例如:
while (true) {
不能在函数参数和左括号(之间使用空格。
除了点号(.)、左圆括号(()、方括号([)以外的二元运算符都要使用一个空格来和操作数分割开。
除了typeof以外的一元操作符和他的操作数之间不应有空格。
for语句控制块()中每个分号;之后有一个空格。
每个逗号后面要有一个空格。

20、额外建议

[]和{}
当成员名称是连续整数时使用数组,当成员名称是任意字符串和名称时使用对象。
使用{}代替new object(),使用[]代替new Array()。
逗号,操作符
避免使用逗号,操作符(这一规定不适用于对象字面量、数组字面量定义和var声明语句以及参数列表)
块级作用域
除了符合语句不使用语句块,js没有块级作用域,只有函数作用域。
赋值表达式
while和if语句中条件判断部分避免使用赋值语句。
===和!==
判定相等使用全等符号(===和!==),避免使用强制类型相等转换符号(==和!=)。
若一个数字加(或者-)一个带有符号(+或者-)的数字,或者带有(++或--)的数字,则需要将带有符号或者(++或--)的数字括起来。
eval是恶魔(eval的滥用l)
eval有相同情况,不应使用Function构造函数,不向setTimeout或setInterval函数传递字符串。

以上20条建议都是本人在项目中总结出来的,对于新手学习javascript应该是小有帮助的,都是个人经验,难免有不全面的地方,如果发现了,还请告之,这里抛砖引玉,大家共同进步。

Javascript 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
jquery实现弹出层效果实例
May 19 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
20个实用的JavaScript技巧分享
Nov 28 #Javascript
js获取浏览器基本信息大全
Nov 27 #Javascript
jQuery实现多按钮单击变色
Nov 27 #Javascript
jQuery的ready方法详解
Nov 27 #Javascript
javascript 面向对象封装与继承
Nov 27 #Javascript
javascript制作坦克大战全纪录(2)
Nov 27 #Javascript
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python使用opencv进行人脸识别
2017/04/07 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
厨师个人自我鉴定范文
2014/04/19 职场文书
数学教育专业求职信
2014/07/22 职场文书
村官个人总结范文
2015/03/03 职场文书
教师节主题班会教案
2015/08/17 职场文书
求职信如何撰写?
2019/05/22 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers