html定义变量的语句规则,前端规范

前言：

不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作。下面列出了前端开发规范

通用规范：

1、前端工具统一sublime text，配置信息统一，如下：

{

"caret_style": "phase",

"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",

"default_line_ending": "unix",

"ensure_newline_at_eof_on_save": true,

"findreplace_small": true,

"font_size": 12,

"ignored_packages":

[

"Vintage"

],

"line_padding_bottom": 4,

"line_padding_top": 4,

"show_panel_on_build": false,

"tab_size": 4,

"tabs_medium": true,

"trim_trailing_white_space_on_save": false

}

2、空格还是Tab？我们强制使用4个占位符的Tab缩进，如果遇到不是tab缩进的，可以借助sublime text来转换成tab缩进，步骤如下：

ctrl+shift+p 输入convert to Tabs，敲回车就可以

3、统一采用UTF8编码

4、项目发布必须压缩、图片优化，提高页面访问速度

5、文件命名统一使用小写字母，js文件多个字母用'-'连接，页面多个字母用'_'连接

6、js、css能够通用化、组件化

es5：

1、一行代码长度尽量保持80列左右

2、变量

声明变量必须加上var关键字，推荐一个var同时声明多个变量，或者一组有逻辑关系的变量，避免一个变量一个 var，声明Array和Object使用[]和{}，声明变量时将其初始化,更易读且性能更好。

变量不要使用关键字，对象key也不要使用关键字，在ie8下会报错

// bad

var obj = {

default: 1

};

3、命名

函数和变量命名使用驼峰式，命名尽量语义化，

// bad

var e = '',

l = 0;

// good

var element = '',

length = 0;

4、单例模式、模块化开发

5、命名空间

每个应该有自己的命名空间，并不会影响到其他模块

6、单双引号

强制使用单引号，性能好

7、语句结尾一定要加';'

8、JSON对象的最后一个字段、数组最后一个元素后面都不能加','，在IE8下会报错

9、尽量不要使用with/eval

10、对象延迟声明，对于页面初始化不需要的变量，延迟声明

11、所有语句都在声明变量之后

12、提前返回值，提升代码的性能

// bad

function fun(arg) {

var test;

if (arg) {

test = arg;

} else {

test = 'another'

}

return test;

}

// good

function fun(arg) {

if (arg) {

return arg;

} else {

return'another'

}

}

13、使用arg

var obj = {};

Object.keys({}).forEach(function(key) {

console.log(this); //obj

}, obj);

可以使用arg的Array.prototype.every、 Array.prototype.forEach、 Array.prototype.some、 Array.prototype.map、 Array.prototype.filter

14、this

15、条件优化

// bad

if(a !== "") {

}

// good

if(!a) {

}

16、规范定义JSON对象，补全双引号

// bad

var json = {

a: 1

};

// good

var json = {

"a":1

};

17、函数返回值应尽量明确

// bad

function fun() {

return ;

}

// good

function fun() {

return false;

}

18、减少js对dom操作次数

19、对于if/else等后面的语句即使只有一行代码也要在该行代码的首尾加上'{}'。对于switch语句要给出default:情况的处理逻辑

20、字符串拼接在少量(次数为个位数)的情况下可以使用'+', 大量的时候使用数组 join(), 或者尽可能采用模板引擎渲染

21、for循环遍历提前计算数组长度

22、变量类型转换

字符转数字：+'0' 1*'0' toString()

数字转字符：''+0 parseInt() parseFloat()

数字取整：Math.ceil() Math.floor() Math.round()

字符转布尔：!!'0'

23、变量比较使用===，除(==null)之外

24、私有属性、变量和方法名应该以下划线'_'开头

25、异常处理

try{} catch(e){}

26、false

"", 0, null, undefined, NaN, void 0

27、true

"''", '""', '0', 'null', 'undefined', {}, []

28、跨行语句以操作符结尾

var x = a ?

b :

c;

29、函数句柄命名是名词

30、注释

采用jsdoc方式注释，函数注释用/**/，函数内注释用//

禁止使用行末注释

css：

1、命名空间

wei- 组件的命名空间(取weiUI首)

pg- 页面的命名空间(取page)

2、class 命名遵循关注分离(不要考虑html结构，比如子元素选择器)、松耦合的原则，同时注重易于理解

3、模块化编写，语义化的模块名

4、命名规则

4.1、BEM命名法，.a > .a-b > .a-b-c

4.2、所有名称小写，符合w3c规范

4.3、类名和id，多个变量之间用中划线分割，{命名空间}-{模块名}-{状态描述}

4.4、所有变量只能使用名词

4.5、id、class命名语义化，不要使用 red、left 等表象的词命名，常见例子

容器： wed-container

列表： wed-list we-list-item

内容： wed-content

注意：class用来定义样式，如果javascript里用到放在最后顺序，id用来写交互，不需要特殊声明(J_ 废除)

5、为了实现代码复用，减少重复冗余，难免要把代码拆分在不同的 class 下面。我们要寻找一个平衡点，避免过细的拆分，减少不必要的 class

6、不建议过度嵌套选择符(semantic躺枪)，选择符嵌套在必要的情况下一般不超过三层；选择符叠加一般不多于两个

7、css3不用加前缀，统一用autoprefixer生成，规则：

[

'ie >= 7',

'ie_mob >= 10',

'ff >= 30',

'chrome >= 34',

'safari >= 7',

'opera >= 23',

'ios >= 7',

'android >= 2.3',

'bb >= 10'

]

8、色值全部使用6位数

html：

1、语义化标签，webapp尽量多使用html5

2、禁止使用非法标签属性

3、后台交互

data-api 接口

data-url 跳转链接

最多支持二级，比如

关注：data-api-follow

取消关注：data-api-unfollow

4、标签扁平化，禁止不必要的嵌套

5、标签属性，属性值使用中划线或者驼峰式，禁止使用下划线

6、html嵌套规则

6.1块级元素与块级元素平级、内嵌元素与内嵌元素平级

6.2块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素

6.3有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素

6.4块级元素不能放在标签p里面

6.5li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器