前端代码规范（结合自己团队实际需要总结）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端代码规范（结合自己团队实际需要总结）相关的知识，希望对你有一定的参考价值。
一、一般规范
1、命名规范
（1）以英文命名，避免出现拼音命名。
（2）文件命名全小写，如需要分割以-连接。如：my-filter.js
（3）css 选择器命名分割以-连接。如：.main-box-header
2、代码缩进
（1）以TAP为一次缩进。
3、代码注释
（1）关键步骤必须写注释。
（2）不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。
4、代码检查 使用JSLint或JSHint对javascript 代码进行检查。
二、html规范
1、文档类型：使用HTML5文档类型声明。<!DOCTYPE html>
2、结构(HTML)、表现(CSS)、行为(JS)代码分离.
HTML文件中只包含标签，将表现放入样式表中，将所有动作行为放入脚本文件中。在HTML的<head>中引入样式文件，在</body>之前引入脚本文件。
3、<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浏览器默认进入极速模式
4、<img> 标签必须添加alt属性。
在图像无法显示时的替代文本。在网速慢、图片src属性错误、浏览器禁用图片或是屏幕阅读器中alt属性很重要，且利于SEO。
5、ID和锚点
页面中重要的部分，如：页头、导航、主体、页脚等加上ID。
单选、复选中为<input >加ID并在<lable>标签中将for指向此ID。
例如：
<input type="checkbox" id="allowTrace" value="manual"> <label for="allowTrace"> 允许trace </label>
三、CSS规范
1、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; }
错误原因：选择器太多，影响运行效率，不利于样式复用。尽量避免使用后代选择器。
建议：层级尽量不超过三级，防止出现权重太高，不利于后期的覆盖与维护。
2、!important
尽量避免使用!important，因为这是css里面的终极大招，用多了伤元气。
3、合理的避免使用ID选择器。
一般情况下ID不应被应用于样式表中。因为ID样式不能被复用且每个页面中只能使用一次ID。还有一个原因是ID选择器权重很高。
4、尽量避免使用元素选择器
错误示范：
form ul li em{
}
推荐写法：
.content .title{
}
5、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;
7、颜色值使用小写的十六进制数字
不推荐：
color:#FF22AA;
推荐：
color:#f2a;
四、JAVASCRIPT规范
1、变量命名：驼峰命名法
例如：userName,passWorld;
2、==与===
总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。
如果你使用 === 操作符，那比较的双方必须是同一类型为前提的条件下才会有效。 在只使用 == 的情况下，JavaScript 所带来的强制类型转换使得判断结果跟踪变得复杂。
3、变量声明
使用 var 来声明变量。原则上不建议使用全局变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或Window 中，也可以很容易地进入本地定义域）。所以，请总是使用 var 来声明变量。
4、全局污染
除了使用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));
5、eval 函数（魔鬼）
eval() 不但混淆语境还很危险，总会有比这更好、更清晰、更安全的另一种方案来写你的代码，因此尽量不要使用 evil 函数。
6、字符串拼接
按一定长度截断字符串，并使用 + 运算符进行连接。分隔字符串尽量按语义进行，如不要在一个完整的名词中间断开。特别的，对于 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(‘‘);
7、对有序集合进行遍历时，缓存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
以上是关于前端代码规范（结合自己团队实际需要总结）的主要内容，如果未能解决你的问题，请参考以下文章