提升开发效率之html，js，css 代码规范的潜规则

代码并非写完了就写完了，由于代码是写给将来的本身和他人看的。那如何保证别人懂你代码的意思呢？要是有一套合适的规范之后维护代码效率岂不是很高呢

常见的命名规则

1.大驼峰命名法,首字母都大写

FirstOne
复制代码

2.小驼峰命名法,第一个单词首字母小写，其余跟大驼峰同样

firstOne
复制代码

3.蛇形命名法，单词之间用下划线拼接

first_one
复制代码

4.减号命名法,单词之间用减号分割

first-one
复制代码

这些命名法最大的好处就是能够轻易区分单词跟单词

代码规范中的那些潜规则

html 代码中的潜规则

1.html 是不区分大小写的

浏览器解析标签是不区分大小写的。

<DIV></DIV>
// 编译出来是这样的
<div></div>
复制代码

虽然里面的 class ，id 或者其余的自定义属性支持大写。可是基本上没有用大写的，所以建议 html 中的代码统一采用蛇行命名法和减号姓名法（好像是由于早期的 xhtml 不支持大写）

2.语义化标签

说实在的语义很好掌握，可是了解这些语义标签的默认属性而且重置是很不容易的。（要想知道如何重置属性欢迎观看个人文章 《开发效率创新高，只因收下了这波 CSS 操做》）

我的感受语义化标签主要有俩个优点

1. 支持 seo 搜索
2. 阅读起来很舒服，不会被别人喷 div 仔。

语义化标签就那么多，掌握了就是掌握了。实打实的好处，建议你们仍是要掌握一下的。

JS 代码中的潜规则

JS 是区分大小写的因此常见的命名法都是大小驼峰命名法。可是花样要多得多：

1.构造函数采用大驼峰命名法(或者 es6 的 class 类)

// 构造函数简单说就是须要 new 出来的
function FistOne() {}
new FirstOne()
// class 就是符合下面这种语法糖的
class FirstOne () {}
复制代码

2.常量采用全大写的蛇形命名法

常量就是不能更改的变量，为了醒目因此都遵循着全大写的蛇形命名法则

const FIRST_ONE = 3
复制代码

3.其余变量采用小驼峰命名法

4.类型名字简写

JS 是一门弱类型语言，写起来特别方便。可是下面这种状况我想你确定遇到过

// 状况 1, 名为 true 的字符串
let a = true
let b = 'true'
// 状况 2, 所有是数字的字符串
let c = '123'
let d = 123
复制代码

c 和 d 这种还好说，由于 js 存在隐式转换。你去比较仍是相等的，可是 a 和 b 是不相等的。我在跟后端联调的时候就碰到过这种状况，他跟我说返回的是 boolean 类型的值结果返回了个字符串。我就直接把他做为判断条件了

let a = 'false' // 假设这是后端给我返回的 boolean 值
if (a) {
    // XXXXX 一些列操做
}
复制代码

结果可想而知，值明明是 false 确一直执行。当时我都快怀疑人生了，因此看到这篇文章你是幸运的。这里有一个细节：谷歌控制台在打印值的时候是有颜色变化的，字符串是纯黑色，其余类型的值是深蓝色

这部分说了这么多足以可见类型的重要性，那么有哪些好的命名方式呢?

类型	简写	举例	说明
array	a	aApple	一组苹果
number	n	nApple	苹果的数量
string	s	sApple	额，反正是个字符串
object	o	oApple	一个苹果对象
function	fn	fnApple	关于苹果的函数
boolean	b	bApple	有没有苹果

固然了这部分仁者见仁智者见智，若是你有更好的命名方式欢迎评论交流

5.函数专有的那些动词

动词	含义	类型值
has	有没有某个东西	boolean
is	是否是	boolean
get	获取某个东东	非布尔值
set	设置某个东东	无返回值

这一部分带扩充，欢迎万能的同窗们评论扩充

6.合理的注释

只要你写注释了，后面维护代码的人第一眼确定是先看注释。要是你说你第一反应是看源码好吧，我也拿你没辙。。。

场景一：函数注释

关键词	含义
@param{TYPE}	传入的参数，应该说明支持什么类型
@return{TYPE}	返回的类型，应该说明支持什么类型。无返回值是 void
@author	做者信息
@date	创做时间
@example	举个例子

/**
 * @param date { Date | timestamp } 须要格式化的时间
 * @param format { string } 支持的关键字 yyyy MM dd hh mm ss
 * @return { string }
 * @author MrXu
 * @date 2019年10月13日
 * @example
 * 1570929141012 -> 2019年10月15
 * dateFormat(1570929141012, 'yyyy年MM月dd')
 */
function dateFormat (date, format) {
    // XXXXXXX
}
复制代码

上面这种写一串也是蛮累的，因此弄个代码片断快速生成就颇有必要了（有兴趣的同窗能够看我以前的文章 《如何让 vscode 变成你的开发神器？》）

CSS 代码中的潜规则

1.不能出现大写

前面已经说过了 html 标签是不能区分大小写的，虽然属性值支持大写。可是并不建议用大写。

减号命名方式有一个问题就是没法双击选中，不过我恰巧从别人的文章评论中找到了一个方法可以设置双击选中减号命名方式的问题：

// vscode 或者 sublime 设置加上这个正则匹配就能够选中
wordSeparators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
复制代码

2.样式也是可以分类的

显示属性	自身属性	文本属性和其余修饰
display	width	font
visibility	height	text-align
position	margin	text-decoration
float	padding	vertical-align
clear	border	white-space
list-style	overflow	color
top	min-width	background

建议先写显示属性 -> 自身属性(盒模型属性) -> 文本属性和其余修饰

3. BEM布局

• block：模块，名字单词间用 - 链接
• element：元素，模块的子元素，以 __ 与 block 链接
• modifier：修饰，模块的变体，定义特殊模块，以 -- 与 block 链接

// 举个例子
.person {}
.person__header {}
.person__main {}
.person__footer {}
.person--cap {}
.person--clothing {}
.person--shoe {}

// 如今 css 预编译器也很火，因此贴个 css 预编译器的。编译出来效果跟上面同样
.person {
    &__header {}
    &__main {}
    &__footer {}
    &--cap {}
    &--clothing {}
    &--shoe {}
}
复制代码

我的感受 css 命名是这里面最复杂的。由于样式代码特别多，并且有一条潜规则是 html、css、js 代码分离。可是 html 和 css 代码分离还真的挺困难的，我在刚开始写代码的时候 html 和 css 代码是分离的。后来 UI 让调节样式，就只是简单的一些字体、间距我要定位到对应的位置就特别麻烦，就会忍不住直接在行内写入样式去进行样式重置。由于只有一俩个属性，因此一个合格的名字是特别重要的。

遗憾的是由于篇幅缘由这篇文章就不详细讲解 BEM 了，由于这是一个大话题，可是我须要让你保证你要知道这个东西。不过我找了俩篇质量很高的文章，感兴趣的能够看这俩篇文章：

[译] 这些 CSS 命名规范将省下你大把调试时间

CSS 命名规范总结

总结

html，js，css 常见的应该都已经覆盖到了。有一些很细致的就不展开讨论了，好比 js 中的隐藏变量，css 尽可能使用简写属性等等。

最后的最后给你们安利一波福利，只看不交流是不容易记忆的。所以我建立了效率提升交流群，欢迎你们入群交流讨论。

相关文章：

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

[译] 这些 CSS 命名规范将省下你大把调试时间