编写前端代码的规范

---

前言：
最近做了一些练手的项目，贪一时之快乱写样式导致后面看起来名目全非。故痛下决心要严格遵循规范进行编写

---

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等)

二、简写属性

1、简写如margin、padding之类的

2、可以去掉小数点后的0(如.8em)

3、类和id简写

可以参照这个链接,有一些命名规范

4、CSS选择器命名规范

• 长名称或词组可以使用中横线来为选择器命名。
• 为选择器添加状态前缀
• 一律小写
• 尽量用英文
• 不加中槓和下划线
• 尽量不缩写，除非一看就明白的单词

JavaScript规范：

关于代码

1、代码太长下一行换行给两个缩进
2、换行前运算符放在上面那一行后面
3、用空行（空一行）的方式给不相关的代码分割起来
4、命名采用骆驼峰法，如(anotherVariable)（看情况进行开头字母大写和开头字母小写）
5、创建对象最好直接使用对象直接量 如：

var book={
    title:"Mains",
    author:"Job" 
}

数组也是

var numbers=[1,2,3,4,5];

6、HTML和JavaScript代码要分离（这样容易定位到错误）
7、每一行的缩进层级由4个空格组成，避免使用制表符进行缩进。

关于注释

1、简单的代码不要加注释.
2、多行注释用法如下

  /*
   *  结尾花
   *  花语
   */

eval()会将传入的字符串当作代码执行

关于作用域

1、单全局变量。如

import _ from 'jQuery'

2、命名空间

var ZakaBooks = {};
ZakaBooks.A1 = {};
ZakaBooks.A2 = {};

事件处理

1、隔离应用逻辑

点击事件的代码应该和应用逻辑的代码隔离。

 var MyApp = {
    handleClick: function(event)  {
        this.showPopup(event);    
    },
    showPopup: function(event)  {
        .....
    }
}

2、不要分发事件对象

就上述例子来说 最好传参只传用到的参数，尽量不要将整个对象传给下一个。一方面让函数入口清晰可读。

避免空比较

比较的时候 避免使用空比较。

if (items !== null)

判断类型时应该使用typeof

if (typeof name === "string" ){
    ...
}
if (typeof count === "number"){
    ...
}
if (typeof MyApp === "undefined"){
    ...
}

检测引用值类型最好方法是使用instanceof运算符

value instanceof constructor

instanceof它不仅检测构造这个对象的构造器，还检测原型链。
默认情况下每个对象都继承自object 所以用 value instanceof constructor 判断对象是否属于某个特定类型的做法并非最佳。

用in可以判断属性是否在对象存在..

if ("count" in object) {
    //好的写法
}
if (object["count"]){
    //不好的写法：检测假值
}

配置数据从代码中分离出来

异常捕捉

Exception instanceof ErrorType //判断错误的类型

对象继承

var myPerson = Object.create(person) ; //创建了一个新对象MyPerson并继承了person

浏览器嗅探

特性检测

检测浏览器应该使用特性检测而非是浏览器版本检测

if (document.getElementById) {
     //在不支持getElementById的浏览器会被跳过
}

避免特性推断

不能从一个特性的存在推断出另一个特性是否存在。

避免浏览器推断