1 外部css和jsvascript引入规范
基本原则如下:
1) 只引用当前页面使用到的css和javascript文件,且放在页面<head>中
2) 先引入css文件再引入javascript文件
3) css文件的引入顺序
a) 第三方样式文件
b) 自定义样式文件
4) Javascript文件的引入顺序
a) 第三方javascript文件,注意依赖关系
b) 自定义javascript文件
2 样式定义规范
原则:
1) 不使用javascript进行动态样式定义
2) 不在DOM中使用style进行样式定义
3) 在开发过程中需要新增控件,需要单列css文件进行样式封装
4) 若需要调整现有样式,不能随意添加class,应在现有class中进行样式修改
后续考虑使用sass进行css重构
3 Web语义化运用
让web语义化成为一种习惯:
1) 不在label中使用<b>、<font>
2) 不在form中使用<br/>
3) 不使用<table>进行页面布局
4) 定义的class也应符合语义化原则,class的语义应是描述用途的与业务无关,比如:模态框标题class为modal-title
5) 定义ID应使用业务相关的术语,且以驼峰格式定义,比如:登录按钮的id为loginSubmit
6) 一长串文本中需要提醒用户注意的文本使用<strong>标签
例如,删除用户的提示信息:"您确定要删除名为<strong>"+name+"</strong>的用户吗?"
Web语义化学习:
http://www.jiawin.com/tag-semantics-habit
http://www.duidea.com/2012/0521/1277.html
4 JavaScript代码规范
4.1 原生代码规范
Js代码中字符串使用双引号,但如果字符串中是dom则使用单引号
所有变量定义必须带var,同一个作用域里有多个变量的情况用一个var 逗号间隔定义
非字符串转字符串用i+””
使用数组字面量定义数组 var a=[], 不使用Array
字符串拼接使用join函数
For循环条件中不用a.length进行判断,应预先赋值给一个变量
For in只适用于对象属性遍历,且需要使用obj.hasOwnProperty(key) 过滤掉原型属性
使用firstChild和nextSibling代替childNodes遍历dom元素
var node = element.firstChild; while (node) { ... node = node.nextSibling; }
判断undefined,已声明的使用===,未声明的使用typeof
目标:没有全局js函数
4.2 Jquery代码规范
对同一个对象执行不同函数,尽量使用联动方式;
在一个作用域中需要多次使用jquery对象,则将jquery对象单独作为一个变量
使用DocumentFragment优化多次append
避免使用闭包