文件命名
一般来说资源文件的名字习惯如下命名：
- 以
字母开头，避免数字开头 全部用小写，这样的话不容易在引用的时候因为大小写而出错- 用
-来分隔单词，而不是下划线 - 对于压缩过的文件，比如
css 或者 js 文件，使用 .min 代替 -min
CSS
- 设置编码类型为
utf-8,以防乱码 - 缩进占位一般为一个制表符（
Tab键，相当于四个空格）
空格
- 大括号之间空格 {
- 冒号之后空格
color: red - 对于一些特别的属性值里存在逗号分隔的情况，比如
rgba(248, 248, 248, .5)，需要在每个逗号后加上空格
换行和空行
每个 css 规则之间需要一个空行。单行注释的前面需要一个空行。- 一个规则里存在多个选择器的时候，
每个选择器的逗号后换行。 - 一个声明块里有多个声明的时候，每条声明后都需要换行；只有一条声明的时候，声明和选择器同行。
- 对于逗号分隔且非常长的属性值，可以考虑换行并且缩进一个制表符。
- media query 声明的第一行空行，这样就不会和第一条声明杂在一起，显得拥挤。
.modal {
width: 500px;
margin: 0 auto;
}
.modal a,
.modal span { color: #41b883; }
.shadow {
box-shadow:
1px 1px 1px #000,
2px 2px 1px 1px #ccc inset;
}
@media screen and (max-width: 640px) {
.modal .modal-con a {
font-size: 12px;
}
}
ID和Class的命名规范
全部字母用小写，避免使用驼峰命名法- 使用
短横线-作为连接单词直接的字符，避免使用下划线_ - 命名
尽可能语义化，让人一目了然 - 尽量避免使用ID选择器，因为 ID 是作为某个元素的唯一标识而设定的，而样式是可覆盖的
避免使用标签进行双重限定- 选择器的嵌套
层级最好不要超过3级，否则显得很冗长，效率上也未必更高。 属性选择器记得使用双引号，避免单引号和不用引号例如：input[type="text"] { line-height: 1.2; }
声明的顺序
- 如果包含了
content属性，则应该最优先书写，即写到声明块的最上面。 - 定位相关的属性，比如
position、top、left、z-index、display、float、visibility和overflow、flex等。 - 布局相关的属性，比如
display、float、visibility、overflow、flex和clear等。 - 盒模型相关的属性，比如
width、height、margin、padding、border以及box-sizing等。 - 文本排版印刷相关的属性，比如
font、line-height、vertical-align、text-align和white-space、text-decoration等。 - 视觉感官上相关的属性，比如
color、background、list-style、transform、transition和animation等。
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
display: block;
float: right;
width: 100px;
height: 100px;
border: 1px solid #e5e5e5;
border-radius: 3px;
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
color: #333;
background-color: #f5f5f5;
}
尽可能的使用简写属性
在 css 中存在一些属性是可以拆分成其他独立属性的，比如background、border、font、list-style、margin 和 padding 等。这些属性在 css 里被称为复合属性，又因为一个属性包含了多个独立属性，所以在书写的时候使得代码更加简洁，所以又喜欢称其为简写属性，这里的简写也可以理解为动词。
每条声明都以分号结尾
在 css 里，如果声明不以分号结尾是会出问题的，但是也有一个例外，那就是声明块的最后一个声明是可以不用分号结尾的。但是如果改变了声明的顺序或者新增了声明，那原来的那条没有带分号的声明就有可能不是最后一条声明了，肯定就出问题了，所以为了避免这种不必要的错误发生，我们要习惯给每个声明都加上分号。
双引号
在 css 的世界里很多地方是很有必要用引号的，为了避免混淆，建议需要引号的地方都使用双引号，而不用单引号。
对于 font-family 属性，如果属性值是带空格的英文比如 Helvetica Neue 或者是中文，那么建议加上双引号，比如content 属性。
对于 URI 资源的引用，有使用到url()引入资源的时候，不用带引号。比如引入背景图片、字体定义的时候引入字体包等。
尽量不要使用 !important
这是非常霸道的规则。有时候因为使用了 !important，使得脚本程序改变不了样式渲染的结果，非常可恶。所以建议不要使用这个属性，取而代之的是，如果真的需要提高某个选择器的优先级，可以通过增加样式的层级来达到这个目的。
值和单位
- 所有属性和值尽量都用小写。
- 属性值为0的时候，不要带单位。
- 当可能的时候尽量使用三位的十六进制计数法，比如表示颜色的时候。
- font-weight使用数值化表示方法，用400代替 normal、700代替 bold。
- line-height尽量不要带单位，除非必须用px来标定。
- 当属性值是介于0到1之间的小数时，可以直接把0省略。
.pannel { opacity: .8; }
注释
文件
单行/多行注释
JS
连环if优化
function getColor(code){
if(code === '200'){
return 'blue-blue'
}else if(code === '201'){
return 'green-green'
}else if(code === '202'){
return 'red-red'
}else{
return 'other-other'
}
}
- 使用switch优化（仅优化代码结构，也提高了代码可读性，但不是最优解）
function getColor2(code){
switch(code){
case '200':
return 'blue-blue'
break
case '201':
return 'green-green'
break
case '202':
return 'red-red'
break
default:
return 'other-other'
break
}
}
console.log(getColor2('200'))
很明显，使用映射优化的代码，代码量降低了，同时也没有影响代码的可读性，对于更加复杂的分支，通过映射的写法将会有更加明显的优势，而且这样做还有一个好处，如果分支非常复杂时，可以将映射抽离，作为 json 文件引入到代码中，进一步优化代码，更加易于维护
function getColor3(code){
var colorMap = {
'200': 'blue-blue',
'201': 'green-green',
'202': 'red-red',
}
return colorMap[code] || 'other-other'
}
console.log(getColor3('200'))
可选链操作符?.
if(req && req.data && req.data.params && req.data.params.type === '200'){}
if(req?.data?.params?.type === '200'){}
合并对象
- 未优化
逐一赋值的方式，当key越多，代码 ugly 的程度会急剧增加
let info = {
name: 'yimwu',
tel: '134xxxxx320'
}
let otherInfo = {
name: 'yimwu',
age: '18',
address: 'gd'
}
info.age = otherInfo.age
info.address = otherInfo.address
console.log(info)
let info = {
name: 'yimwu',
tel: '134xxxxx320'
}
let otherInfo = {
name: 'yimwu',
age: '18',
address: 'gd'
}
info = {...info, ...otherInfo}
console.log(info)
- 通过 ES6 方法 Object.assign() 优化
let info = {
name: 'yimwu',
tel: '134xxxxx320'
}
let otherInfo = {
name: 'yimwu',
age: '18',
address: 'gd'
}
Object.assign(info, otherInfo)
深拷贝
function deepClone(obj) {
if (typeof obj != 'object') return obj;
var temp = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] == 'object') {
temp[key] = deepClone(obj[key])
} else {
temp[key] = obj[key];
}
}
}
return temp;
}
let info = {
name: 'yimwu',
tel: '134xxxxx320',
address: {
home: 'jy',
company: 'gz'
}
}
let infoCopy = deepClone(info)
通过 JSON.parse 和 JSON.stringify 巧妙地将对象转化成字符串再进行解析，js 将重新赋值到新的内存块中，达到深拷贝的效果
let info = {
name: 'yimwu',
tel: '134xxxxx320',
address: {
home: 'jy',
company: 'gz'
}
}
let infoCopy = JSON.parse(JSON.stringify(info))
|