前端代码规范笔记
jade 类以及内嵌 js,缩进为2,除了 js 声明 如:
//html
.form-group
label.col-sm-2.control-label 主机
.col-sm-6
input.form-control(type="text", name="host")
//js
var routeArr = [],
buttonType = $route.find('button')[0].dataset.type,
selectCollection = 'custom';
$.each(selectCollection, function(){
var selectVal = this.value;
if(!this.value)selectVal = '*';
routeArr.push(selectVal)
});
通用前端规范
HTML 规范
- 排版缩进为 4
- 标签属性使用小写
- 在HTML5规范里并没有严格要求属性值两边加引号。但考虑到一些属性可以接受空白值,为了保持一致性,我们要求所有属性值必须加上引号。
- 段落分隔符要使用实际对应的
<p>
素,而不是用多个<br>
标签。 - 在合适的条件下,充分利用
<dl>
(定义列表)和<blockquote>
标签。 - 列表中的条目必须总是放置于
<ul>
、<ol>
或<dl>
中,永远不要用一组<div>
或<p>
来表示。 - 给每个表单里的字段加上
<label>
标签,其中的 for 属性必须和对应的输入字段对应,这样用户就可以点击标签。同理,给标签加上 cursor:pointer; 样式也是明智的做法。 - 多媒体标签向后兼容,记得加上alt属性
CSS 规范
- 正确使用缩写,例如 navigation 就可以缩写为 nav,而 author 就不要缩写
- id 与 class 前不必加上标签类型
- 属性尽量使用简写形式,如 font 或 background 等
- 0 后面不要加上单位
- 小数前不要加上 0
- url() 中不要加入引号,例如 @import url(//www.google.com/css/go.css);
- 16 进制尽量使用3位表示
- 可以为项目加入前缀,例如 .adw-help {} /* AdWords */
- 分词使用 -,如前例
- 属性采用字典序申明,包括前缀如 moz 安排在 webkit 之前
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
- 属性:与值之间用一个空格分开,例如 font-weight: bold;
- 为每个选择符及每个属性申明单独使用一行
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
JavaScript 规范
- 变量声明必须使用 var
- 记得使用分号结尾
- 随意使用嵌套函数
- 块级域中不用使用函数声明形式(不符合标准),应该这样处理:
if (x) {
var foo = function() {}
}
- 原生类型不要使用包装对象的构造函数来进行声明,但是可以用来进行类型转换如:
var x = Boolean(0);
if (x) {
alert('hi'); // This will never be alerted.
}
typeof Boolean(0) == 'boolean';
typeof new Boolean(0) == 'object';
- 不要使用 with
- for in 不要用在遍历 array 上,只能用在 object 上
- 多行的字符串字面量,应该使用 + 进行字符串拼接,而不是进行换行
- array 与 object 创建使用字面量而不是包装构造函数
- 不要改变内置对象的 prototype
- 私有成员使用前下划线:_person
- 永远要为项目添加一个命名空间,不要为外部引入的代码再引入自定义的成员,如果必要则应该使用外部代码暴露的 api
- 文件命名统一使用小写 .js,同时推荐 - 而不是 _
- 字符串相对于双引号,推荐使用单引号
- 留空。总的来说,使用留空应该遵循源远流长的英语阅读惯例。 例如,每个逗号和冒号(以及适用的分号)后面要空一格,但在括号内部的左侧和右侧都不要加空格。另外,大括号应该总是和他们前面的参数出现在同一行。
来看看下面的 JavaScript for 循环的例子:
正确
for (var i = 0, j = arr.length; i < j; i++) {
// Do something.
}
不正确
for ( var i = 0, j = arr.length; i < j; i++ )
{
// Do something.
}
不正确
for(var i=0,j=arr.length;i<j;i++){
// Do something.
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: 我的前端流程
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论