前端开发规范：命名规范、html规范、css规范、js规范

本文首发于我的个人网站：cherryblog.site/ （背景更换了不知道大家有没有发现呢，嘻嘻）

一个好的程序员肯定是要能书写可维护的代码，而不是一次性的代码，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。我是有一点强迫症的人，上周我们后端给我了一个CanUsename的接口（该接口的目的是判断输入的目的地是否是4级目的地），我真的是崩溃的。我只是觉得这个名字不够语义化，但是让我自己想一个名字我又想不出来，于是我就在想，如果有一套命名规范的话，那么以后起名字就不用发愁了，直接按照规范来就好了~于是端午在家就百度了一下~

不推荐：

推荐

命名方式 : 小驼峰式命名方法命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

推荐

不推荐

命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )命名规则 : 前缀为动词

推荐：

命名方法 : 全部大写命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。推荐：

推荐(将name换成this是不是更熟悉了呢)

推荐 :

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照 javadoc(百度百科)语法：

常用注释关键字

推荐 :

使用 HTML5 的文档声明类型 :

说到js和css的位置，大家应该都知道js放在下面，css放在上面。但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在内兼容老旧浏览器(IE9-)时：脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。而在现代浏览器中：脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。综上所述，所有浏览器中推荐:

只兼容现代浏览器推荐:

我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。使用语义化标签也是有理由SEO的。

语义化是指：根据元素其被创造出来时的初始意义来使用它。意思就是用正确的标签干正确的事，而不是只有div和span。

不推荐：

推荐

This is a good example for HTML semantics

I think I'm more on the side and should not receive the main credits

This article was created by David 1 month ago

Related sections: Events, Public holidays

标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容

尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。建议：

, , , , ） 不使用表象 class 名（i.e. red, left, center） HTML只关注内容 HTML只显示展示内容信息 不要引入一些特定的 HTML 结构来解决一些视觉设计问题 不要将img元素当做专门用来做视觉设计的元素 样式上的问题应该使用css解决

不推荐：

See the square next to me? css 代码: .text-box > .square { display: inline-block; width: 1rem; height: 1rem; background-color: red; }

推荐

html 代码: See the square next to me? css 代码: /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; }

图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。

不推荐

html 代码: See the square next to me?

推荐

html 代码: See the square next to me? css 代码: /* We use a :before pseudo element with a background image to solve the problem */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; }js规范 避免全局命名空间污染

防止全局命名空间被污染，我们通常的做法是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，创建独立隔绝的定义域。也使得内存在执行完后立即释放。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。不推荐:

var x = 10, y = 100; // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this // will be stored in the window object. This is very unclean and needs to be avoided. console.log(window.x + ' ' + window.y);

推荐

// We declare a IIFE and pass parameters into the function that we will use from the global space (function(log, w, undefined){ 'use strict'; var x = 10, y = 100; // Will output 'true true' log((w.x === undefined) + ' ' + (w.y === undefined)); }(window.console.log, window));

推荐的IIFE写法:

(function(){ 'use strict'; // Code goes here }());

如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：

(function($, w, d){ 'use strict'; $(function() { w.alert(d.querySelectorAll('div').length); }); }(jQuery, window, document));严格模式

ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。

严格模式会阻止使用在未来很可能被引入的预留关键字。

你应该在你的脚本中启用严格模式，最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式，这有可能会引发一些第三方类库的问题。

变量声明

总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，例如

var a = b = 0; //b会被隐式的创建为全局变量

所以，请总是使用 var 来声明变量，并且使用单var模式（将所有的变量在函数最前面只使用一个var定义）。例如：

(function (){ 'use strict' var a = 0, b = 0, c = 0, i, j, myObject(); }())

采用严格模式带来的好处是，当你手误输入错误的变量名时，它可以通过报错信息来帮助你定位错误出处。

js声明提前

javascript会自动将函数作用域内的变量和方法的定义提前（只是提前声明，赋值还是在原处）例如：

(function(log){ 'use strict'; var a = 10; for(var i = 0; i < a; i++) { var b = i * i; log(b); } if(a === 10) { var f = function() { log(a); }; f(); } function x() { log('Mr. X!'); } x(); }(window.console.log));

提升后的js

(function(log){ 'use strict'; // All variables used in the closure will be hoisted to the top of the function var a, i, b, f; // All functions in the closure will be hoisted to the top function x() { log('Mr. X!'); } a = 10; for(i = 0; i < a; i++) { b = i * i; log(b); } if(a === 10) { // Function assignments will only result in hoisted variables but the function body will not be hoisted // Only by using a real function declaration the whole function will be hoisted with its body f = function() { log(a); }; f(); } x(); }(window.console.log));使用严格等

总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。例如：

(function(log){ 'use strict'; log('0' == 0); // true log('' == false); // true log('1' == true); // true log(null == undefined); // true var x = { valueOf: function() { return 'X'; } }; log(x == 'X'); }(window.console.log));等同== 和严格等===的区别 ==， 两边值类型不同的时候，要先进行类型转换，再比较。 ===，不做类型转换，类型不同的一定不等。

==等同操作符

如果两个值具有相同类型，会进行===比较，返回===的比较值 如果两个值不具有相同类型，也有可能返回true 如果一个值是null另一个值是undefined，返回true 如果一个值是string另个是number，会把string转换成number再进行比较 如果一个值是true，会把它转成1再比较，false会转成0 console.log( false == null ) // false console.log( false == undefined ) // false console.log( false == 0 ) // true console.log( false == '' ) // true console.log( false == NaN ) // false console.log( null == undefined ) // true console.log( null == 0 ) // false console.log( null == '' ) // false console.log( null == NaN ) // false console.log( undefined == 0) // false console.log( undefined == '') // false console.log( undefined == NaN) // false console.log( 0 == '' ) // true console.log( 0 == NaN ) // false

总结一下==

false 除了和自身比较为 true 外，和 0，"" 比较也为 true null 只和 undefined 比较时为 true， 反过来 undefined 也仅和 null 比较为 true，没有第二个 0 除了和 false 比较为 true，还有空字符串 ''" 和空数组 [] 空字符串 '' 除了和 false 比较为 true，还有一个数字 0

==, >, language & frameworks => JavaScript => Code Quality Tolls => JSHint

webstorm中的jshint这些规范都是什么意思呢，这里列出一些常用的，剩下的大家可以参考官方文档

名称 含义 curly 循环或者条件语句必须使用花括号包住 eqeqeq 使用强制等=== newcap 对于首字母大写的函数（声明的类），强制使用new noarg 禁用arguments.caller和arguments.callee sub 对于属性使用aaa.bbb而不是aaa['bbb'] undef 查找所有未定义的变量 boss 查找类似与if(a = 0)这样的代码 node 指定运行环境为node strict 必须使用严格模式 asi 允许省略分号 bitwise 禁止使用位运算符，比如经常把&&写错& 规避此错误 jquery 定义全局暴露的jQuery库 evil 禁止使用eval maxdepth 嵌套的最大深度 maxparams 参数的最大个数 css规范 id和class的命名

ID和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称不推荐 :

.fw-800 { font-weight: 800; } .red { color: red; }

推荐 :

.heavy { font-weight: 800; } .important { color: red; }合理的使用ID

一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class不推荐：

#content .title { font-size: 2em; }

推荐：

.content .title { font-size: 2em; }css选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免css中出现HTML标签，并且在css选择器中出现标签名会存在潜在的问题。

使用子选择器

很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。不推荐:

.content .title { font-size: 2rem; }

推荐

.content > .title { font-size: 2rem; }尽量使用缩写属性

尽量使用缩写属性对于代码效率和可读性是很有用的，比如font属性。不推荐：

border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;

推荐：

border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;0后面不带单位

省略0后面的单位，不推荐：

padding-bottom: 0px; margin: 0em;

推荐：

padding-bottom: 0; margin: 0;属性格式 为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。 属性名的冒号后使用一个空格。出于一致性的原因，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。 每个选择器和属性声明总是使用新的一行。 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。 URI值（url()）不要使用引号。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：

display position, left, top, right etc. overflow, float, clear etc. margin, padding

表现性属性：

background, border etc. font, text

不推荐：

.box { font-family: 'Arial', sans-serif; border: 3px solid #ddd; left: 30%; position: absolute; text-transform: uppercase; background-color: #eee; right: 30%; isplay: block; font-size: 1.5rem; overflow: hidden; padding: 1em; margin: 1em; }

推荐：

.box { display: block; position: absolute; left: 30%; right: 30%; overflow: hidden; margin: 1em; padding: 1em; background-color: #eee; border: 3px solid #ddd; font-family: 'Arial', sans-serif; font-size: 1.5rem; text-transform: uppercase; }

相关文章：

前端编码规范 JavsScript开发规范、 开发规范（四）JS规范