知识库 : 前端开发相关的编码规范

JavaScript相关问题

1.由于JavaScript是一种弱类型的语言,因此在使用JavaScript时,对于比较运算符使用时要尽量使用===或者!==,否则会出现一些可能意想不到的bug。在使用===进行比较时,如果比较两边的内容不相等,会直接返回false;而使用==进行比较时,如果两边的数据类型不一致,它会将其中一边的数据类型进行转型再比较,结果可能与===不一致。

2.在JavaScript中,||与&&的运算规则也与常规的语言不同。A||B的计算方法是,如果A表达式为真则返回A,否则返回B;A&&B的计算方法是,如果如果A表达式为真,则返回B,否则返回A。在不同类型的值转换为true或者false时,计算方法如下

 

数据类型

转换为Boolean的值

null

false

undefined

false

Object

true

function

true

0

false

1

true

0,1之外的数字

true

非空字符串

true

“”(空字符串)

false

因此在可能有一些简便的赋值写法,比如a = a || “defaultValue”,就是如果a的值如果是假值的话,a就会被赋值为默认的值。

3.在JavaScript中,有比较流行的编码规范,可以参考如下地址了解

https://github.com/sivan/javascript-style-guide/blob/master/es5/README.md

4.JQuery是JavaScript最常用到的框架,在使用JQuery时,需要注意的是,在进行元素的选择时,不要依赖DOM的结构。换句话说,就是尽量不要使用类似于parent()、next()、eq()等函数来进行组件的选择。如果出现类似代码后,DOM结构变化了,JavaScript必定要进行变更,加大了后期代码维护的工作量。要尽量使用find()、closest()这样的函数;在使用JQuery时,要尽量避免使用css()函数直接设置DOM组件的静态样式,应该在css中使用class标记样式使用addClass()或者removeClass()函数来改变DOM组件的样式。

5.要尽量使用JavaScript提供的内置api进行数据的操作,如数组的map()、forEach()等方法。

 

HTML相关问题

1.在单个页面中,不要出现重复的id,尤其是在表格的行中,不要使用id进行标识。一般的做法是,在一个相对独立的范围内声明一个id,在这个id的作用域中使用class进行标记,这样不仅DOM的结构清晰,而且也易于JavaScript对于DOM的操作。

2.在HTML页面中,尽量不要使用style去设置样式,而尽量使用class和css来设置控件的样式,同类的控件样式可以复用,降低样式变更的工作量。

 

CSS相关问题

1.在对HTML中相对模块化的内容应该使用id,而在id控制的范围之内使用class,这样既方便JavaScript进行DOM节点的选择,也方便对DOM的样式进行控制。

2.css的文件应该按照模块进行划分,css、HTML、js应该对应起来,方便后续的维护。

3.class和id的命名应该尽量避免出现div、li、ui等短语,应该尽量与标识的内容相关,最好让人看到就知道里面的内容是什么。

 

Eclipse中的JSHint插件

Eclipse中的JSHint插件可以扫描出JavaScript不合符规范的一些隐含问题,这些问题可能会影响JavaScript的正常执行,修改JSHint中提示出来的问题可以降低JavaScript脚本出现bug的几率。