前端代码规范（结合本身团队实际须要总结）

时间 2019-12-11

标签前端代码规范结合本身团队实际须要总结繁體版

原文原文链接

1、通常规范javascript

一、命名规范css

（1）以英文命名，避免出现拼音命名。html

（2）文件命名全小写，如须要分割以-链接。如：my-filter.js前端

（3）css 选择器命名分割以-链接。如：.main-box-headerjava

二、代码缩进git

（1）以TAP为一次缩进。github

三、代码注释web

（1）关键步骤必须写注释。chrome

（2）不要写你的代码都干了些什么，而要写你的代码为何要这么写，背后的考量是什么。固然也能够加入所思考问题或是解决方案的连接地址。数组

四、代码检查使用JSLint或JSHint对javascript 代码进行检查。

2、HTML规范

一、文档类型：使用HTML5文档类型声明。<!DOCTYPE html>

二、结构(HTML)、表现(CSS)、行为(JS)代码分离.

HTML文件中只包含标签，将表现放入样式表中，将全部动做行为放入脚本文件中。在HTML的<head>中引入样式文件，在</body>以前引入脚本文件。

三、<meat>声明

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

让网页宽度适应屏幕宽度，多用于移动端。

<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1" />

<meta name="renderer" content="webkit|ie-comp|ie-stand">

让360浏览器默认进入极速模式

四、<img> 标签必须添加alt属性。

在图像没法显示时的替代文本。在网速慢、图片src属性错误、浏览器禁用图片或是屏幕阅读器中alt属性很重要，且利于SEO。

五、ID和锚点

页面中重要的部分，如：页头、导航、主体、页脚等加上ID。

单选、复选中为<input >加ID并在<lable>标签中将for指向此ID。

例如：

<input  type="checkbox" id="allowTrace" value="manual">

<label for="allowTrace">

    容许trace

</label>

3、CSS规范

一、Css选择器层级

错误示范：

.content_box form ul li {height:30px;margin:10px;}

错误缘由：样式指向不精准，使得受影响的标签范围太大，当多个页面同时引用同同样式表时，容易出现不可预见的问题。

#final #content .con_border .system_time .default_checkbox {}

错误缘由：选择器太多，权重过高，不利于后期维护。

.access_control > ul > li > ul > li > input{
    margin-right:10px;
}

错误缘由：选择器太多，影响运行效率，不利于样式复用。尽可能避免使用后代选择器。

建议：层级尽可能不超过三级，防止出现权重过高，不利于后期的覆盖与维护。

二、!important

尽可能避免使用!important，由于这是css里面的终极大招，用多了伤元气。

三、合理的避免使用ID选择器。

通常状况下ID不该被应用于样式表中。由于ID样式不能被复用且每一个页面中只能使用一次ID。还有一个缘由是ID选择器权重很高。

四、尽可能避免使用元素选择器

错误示范：

form ul li em{

}

推荐写法：

.content .title{

}

五、css 书写顺序

(1)位置属性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin)

(3)文字系列(font, line-height, letter-spacing, color- text-align等)
(4)背景(background, border等)
(5)其余(animation, transition等)

6、缩写属性

例如：margin

margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:4px;

简写：

margin:1px 2px 3px 4px;

例如：背景

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

缩写：

background:#f00 url(background.gif) no-repeat fixed 0 0;

七、颜色值使用小写的十六进制数字

不推荐：

color:#FF22AA;

推荐：

color:#f2a;

4、JAVASCRIPT规范

一、变量命名：驼峰命名法

例如：userName,passWorld;

二、==与===

老是使用 === 精确的比较操做符，避免在判断的过程当中，由 JavaScript 的强制类型转换所形成的困扰。

若是你使用 === 操做符，那比较的双方必须是同一类型为前提的条件下才会有效。在只使用 == 的状况下，JavaScript 所带来的强制类型转换使得判断结果跟踪变得复杂。

三、变量声明

使用 var 来声明变量。原则上不建议使用全局变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。若是没有声明，变量处于什么定义域就变得不清（能够是在 Document 或Window 中，也能够很容易地进入本地定义域）。因此，请老是使用 var 来声明变量。

四、全局污染

除了使用var声明变量外，还可使用匿名函数包裹代码防止全局命名空间被污染。

(function(){

     // Code goes here

}());

(function(log, w, undefined){

    var x = 10,
    y = 100;
    log((w.x === undefined) + ' ' + (w.y === undefined));

}(window.console.log, window));

五、eval 函数（魔鬼）

eval() 不但混淆语境还很危险，总会有比这更好、更清晰、更安全的另外一种方案来写你的代码，所以尽可能不要使用 evil 函数。

六、字符串拼接

按必定长度截断字符串，并使用 + 运算符进行链接。分隔字符串尽可能按语义进行，如不要在一个完整的名词中间断开。特别的，对于 HTML 片断的拼接，经过缩进，保持和 HTML 相同的结构。

var html = ''

    + '<article>'

    +     '<h1>Title here</h1>'

    +     '<p>This is a paragraph</p>'

    +     '<footer>Complete</footer>'

    + '</article>';

var html = [

    '<article>',

        '<h1>Title here</h1>',

        '<p>This is a paragraph</p>',

        '<footer>Complete</footer>',

    '</article>'

];

html = html.join('');

七、对有序集合进行遍历时，缓存length

虽然现代浏览器都对数组长度进行了缓存，但对于一些宿主对象和老旧浏览器的数组对象，在每次 length 访问时会动态计算元素个数，此时缓存 length 能有效提升程序性能。

for (var i = 0, len = elements.length; i < len; i++) {
 
    var element = elements[i]; 
    // ...... 
}

注：本文引用《前端代码基础编写规范》v1.1

　　参考百度前端JavaScript编码规范https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md