@fengfeng 2014-10-11T08:51:02.000000Z 字数 1806 阅读 1123

前端开发建议

前端规范 开发建议 dev 开发约定

html

doctype采用html5的doctype

<!DOCTYPE html>

页面编码，尽量使用utf8编码，head中显示注明编码

<meta charset="utf-8" />

IE条件注释约定,在所有的css之前写一个空的条件注释来规避条件注释引起的性能阻塞问题

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<link type="text/css" rel="stylesheet href="1.css">
  <!‐‐[if IE 6 ]>
    <link type="text/css" rel="stylesheet" href="ie.css">
  <![endif]‐‐>
</head>
...

通过class来进行ie css hack时，条件注释加到html上

<!DOCTYPE html>
<!--[if IE6]><html class="ie6"><![endif] -->
<!--[if !IE]><!--><html><!--<![endif]-->
<head>
...
</head>
<body>
...

JS Hook：
Hook 仅出现在 id 和 class 中, 命名规则：J_UpperCamelCase
data-属性
使用 HTML 元素的自定义属性：data-xxxx （ HTML5 中新增的属性）

js

外链js

上线前合并多个 JS 文件,压缩
将 JS 文件移至页面的底部

inlinejs的使用要根据实际情况，减少inlinejs 的使用

编码

避免使用全局变量
变量声明一定用var

模块化定义或自执行模块定义

//自执行模块定义
;(function(){
    var var1,var2;
    //do something
})();
//cmd 模块定义
define([dep1,dep2],function(var_dep1,var_dep2,...){
    var var1,var2;
    //do something
    //return {...};
    //return function(){};
    // no return
});
//避免在模块定义中使用window.xxx = xxx;

任何字面量值、全局变量或者属性名被使用超过 2 次（包括2次），都应该用局部变量存储代替
使用数组和对象的字面量
```
    var arr = [];
    var o = {};
```
使用局部变量（读写最快的标识符）
减少DOM的操作（DOM最耗时）
使用匈牙利命名法
请使用’On’
链式操作
JSON
11.1.

JSON 的“名”规定为任何字符串
JSON 字符串必须使用双引号包围
JSON 数字整数的首位不允许为 0

11.2.
推荐使用JSON.parse/JSON.stringify,IE<=7用json2 进行shim支持
12. 给多个元素绑定同一个handle时，尽量使用事件代理；
13. 变化的东西配置化。对于经常变换的class，url，img，能配置化的尽量配置化。
14. 繁重的操作中分离元素,使用子查询缓存的父元素

// 糟糕
var
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;
$element = $containerLi.first();
//... 许多复杂的操作
// better
var
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;
$element = $containerLi.first().detach();
//... 许多复杂的操作
$container.append($element);

必要时组合jQuery和javascript原生代码 15. 代码精简

$myVar = $myVar || $('#selector');
// 糟糕
if(collection.length > 0){..}
// 建议
if(collection.length){..}

维持代码的可读性

css

宽度尽可能由布局结构控制
大部分情况下不是需要定高度的
定义宽度的时候要同时关注是否定义了内边距
ie6大部分的BUG可由haslayout解决
所有的margin统一一种方式，如所有的上边距由兄结点定义下边距的方式实现，可有效避免遇到边界重叠的问题。
内边距尽可能的由父级定义

其他

静态资源更新后一定要修改版本号 file?version=版本号

前端开发建议

html

js

外链js

inlinejs的使用要根据实际情况，减少inlinejs 的使用

编码

css

其他

内容目录