前端编码规范(持续更新。。。)

201 阅读2分钟

文件编码

使用不带BOM的UTF-8编码
推荐使用 HTML5 的文档类型申明: .
使用
而非

使用语义化标签 如 header nav main section footer 等。

CSS 规范

共用文件 base.css
id 是唯一的一般用在大的模上
class 用于表示高度复用的组件
使用.js-* clas 来标识行为(与样式相对),并且不要将这些class包含到css文件中
避免使用标签名
省略“0”值后面的单位。不要在0值后面使用单位,除非有值 如 margin:0;
使用中划线命名 如 .ads-sample
使用小写字符和破折号,(如.btn和.btn-danger)
将媒体查询尽可能放在相关规则的附近 为大区块添加注释,小区块适量注释

javaScript 规范

每行代码结束必须有分号
变量命名 驼峰式命名 首字母小写 myVue
类命名 驼峰式命名 首字母大些 MyVue
函数 驼峰式命名 首字母小写
防止全局命名空间污染

(function(w){
    var x = 10,
        y = 100;
}(window))
// 括号写在里面 使得整个表达式看起来更像一个整体
(function(){}());  

避免 提升声明 导致 代码错误混乱,所有的变量以及方法定义在最上面。

语句块内的函数声明

函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

if (x) {
    var foo = function() {};
}

图片规范

命名 可使用分头尾两部分,用下划线隔开 btn_submit.png
运用css sprite技术集中小的背景图或图标 减小页面http请求

脚本加载

建议异步加载,否则加载时会阻塞DOM解析

// 兼容IE9- 写在body闭合之前   
<body>  
    <script src="main.js" async></script>  
</body>  
// 不需要兼容IE9- 写在head里面  
<head>  
    <script src="main.js" async></script>  
</head>