前言：
最近做了一些练手的项目，贪一时之快乱写样式导致后面看起来名目全非。故痛下决心要严格遵循规范进行编写
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的浏览器会被跳过
}
避免特性推断
不能从一个特性的存在推断出另一个特性是否存在。
网友评论