前端开发规范
前端开发规范
1.HTML规范
1.1.使用正确的HTML5文档类型
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit"> <!-- 360使用极速模式渲染 -->
<title>Document</title>
</head>
<body>
</body>
</html>
1.2 兼容的meta属性
<meta name="renderer" content="webkit"> <!-- 360使用极速模式渲染 -->
1.3 统一使用4空格的tab缩进
1.4.避免不规范的元素嵌套
错误示例:
<ul>
<div>导航栏标题</div>
<li>子项1</li>
<li>子项2</li>
<ul>
正确示例：
<div>导航栏标题</div>
<ul>
<li>子项1</li>
<li>子项2</li>
<ul>
ul标签只允许存在li作为其直接子标签。错误示例中的代码虽然可以正常渲染，但是由于不同浏览器容错机制不一致，错误的示例代码可能会导致额外的hack。
1.5.自定义属性采用data-*格式
错误示例：
<div ng-click="click()">
正确示例：
<div data-ng-click="click()">
data-*是HTML5的标准规范，如不采用data-*格式，IDE会显示警告信息，避免警告信息影响正常的debug，建议采用data-*格式自定义属性。
1.6.布尔类型的属性，建议不添加属性值
错误示例：
<input type="checkbox" checked="true">
<input type="checkbox" checked="flase">
<input type="checkbox" checked="checked">
正确示例：
<input type="checkbox" checked>
获取选择选中状态，使用dom节点对象的checked属性，或者jQuery的is方法，不要使用attr('checked')进行判断。
错误做法：
var $checkbox = $('input[checkbox]');
$checkbox.attr("checked"); // 不准确，甚至会取得非预期值
正确做法：
$checkbox.is(':checked');
$checkbox.check = true;
$checkbox.check;
2.CSS规范
2.1.确定全局唯一的元素，可以使用id，否则使用class
否则会导致后期维护成本过大。
2.2.选择器应尽量避免嵌套，最多不过3级别
不好的做法：
body #container .head .title {
// code here
}
推荐做法：
.h-title {
// code here
}
嵌套过多，会导致css权重过大,子class跟父class紧耦合，后期维护成本大。
3.JavaScript规范
3.1.字符串统一使用单引号包含
不好的示例：
var msg = "Hello JavaScript!";
正确示例：
var msg = 'Hello JavaScript!';
使用单引号的最主要原因是，避免额外的单引号\双引号转义。
var dom = “<div data-ng-click=\"click();\">双引号\"\"不建议</div>”;
vs
var dom = '<div data-ng-click="click();">双引号""不建议</div>';
两种写法对比，优劣一目了然。
3.2.避免使用JavaScript拼接HTML
使用JavaScript拼接HTML，会有以下问题：
- 极容易产生XSS漏洞；
- 关注点不分离，升级维护极其困难；
- 开发效率低下，代码不健壮，非常容易产生bug；
- Debug变的异常艰难；
不好的示例：
var names = ['tiger','apple', '<script>alert("xss");</script>'];
var dom = '<ul>';
names.forEach(function(name,index){
dom += '<li>' + name + '</li>';
})
dom += '</ul>';
$('body').html(dom);
上面的代码会导致一下问题：
- names[2]插入页面后，
<script>alert("xss");<script>会被当成脚本执行，容易被用户利用，入侵系统； - 代码升级维护困难，如果要修改样式，或者渲染的对象更加复杂（多层嵌套），维护这样的代码不仅效率低下，容易出错，简直就是噩梦；
- 产生bug的情况下，调试异常复杂；
正确示例：
AngularJS写法：
<ul>
<li data-ng-repeat="name in names">{{ name }}</li>
</ul>
如果使用jQuery情况下，可以使用前端模板引擎，例如doT.js、jQuery Template等。
3.3 JavaScript语法技巧
使用这些小技巧，可以让代码更加简洁、容易理解。
3.3.1 默认参数赋值
冗长写法：
function fun(param) {
if(param == null) {
param = {name:'tiger'};
}
}
简洁写法：
function fun(param) {
param = param || {name:'tiger'};
}
3.3.2 判空执行
冗长写法：
function fun() {
if(flag) {
callback();
}
}
简洁写法：
function fun() {
flag && callback();
}
3.3.3 自调用函数
冗长写法：
function fun(){
// code here
}
fun();
简洁写法：
(function(){
// code here
})();
3.3.4 数组迭代
冗长写法：for
简洁写法：filter、some、every、forEach、map
3.3.4.2 filter:对数组进行过滤，并返回新的数组
var s = [1,2,3,4,5];
var ns = s.filter(function(item,index) {
return item > 3;
})
console.log(ns); // [4,5]
3.3.4.3 some:判断数组中是否有符合条件的元素
var s = [1,2,3,4,5];
var b = s.some(function(item,index) {
return item > 3;
})
console.log(b); // true
3.3.4.4 every:判断数组中所有元素是否都符合条件
var s = [1,2,3,4,5];
var b = s.every(function(item,index) {
return item > 3;
})
console.log(b); // false
3.3.4.5 map:对数组中的元素进行处理，并返回新的数组
var s = [1,2,3,4,5];
var ns = s.map(function(item,index) {
return item * 2;
})
console.log(ns); // [2,4,6,8,10]
3.3.4.6 forEach:迭代数组元素
var s = [1,2,3,4,5];
var ns = s.map(function(item,index) {
console.log(item); // 依次打印1，2，3，4，5
})
3.4. 前端开发的JavaScript技巧
3.4.1 使用Angular时，ajax请求请使用ng自带的$http,避免使用jQuery的ajax
$http的ajax回调会自动更新DOM节点，而jQuery的回调没有这个特征，需要手动apply。
<div>{{ user.username }}</div>
正确的jQuery写法：
$.post('/login',{username:'tiger',passwd='123456'},function(rs){
$scope.user = rs.user;
$scope.$apply();
})
正确的AngularJS写法：
var params = {username:'tiger',passwd='123456'}
$http({method : 'POST',url : '/login', data: $.param(params)
}).then(function(rs) {
$scope.user = rs.data.user;
});
如果是GET请求，data则改成params，同时不需要$.param序列化，params的参数放url上，而data是放request body中。
var params = {username:'tiger',passwd='123456'}
$http({method : 'GET',url : '/login', params: params
}).then(function(rs) {
$scope.user = rs.data.user;
});
3.4.2 HTTP请求中，获取使用GET，提交、修改和删除使用POST
这样更加符合REST的语义，如果POST使用GET代替，在开发阶段就难以调试，而且无法使用GET的特性进行一系列调优，例如缓存等。
HTTP中，GET/POST/DEL等的区别：http://www.cnblogs.com/zhangpengshou/archive/2012/07/09/2583096.html
3.4.3 获取ajax的表单参数，jQuery可以将form表单序列化，Angualr可以绑定对象
推荐的jQuery写法：
<form id="loginFrom">
<input name="username" type="text" />
<input name="password" type="passwrod"/>
</form>
<script>
var params = $('#loginForm').serialize();
$.post('/login',params,function(rs){
// callback
});
</script>
推荐的AngularJS写法：
<form>
<input type="text" data-ng-model="loginForm.username" />
<input type="passwrod" data-ng-model="loginForm.password"/>
</form>
<script>
$http({
method : 'POST',
url : '/login',
data: $.param($scope.loginForm)
}).then(function(rs) {
// callback说
});
</script>
3.4.4 jQuey调用AngularJS的方法
思路：取得AngularJS作用域下的节点找到scope，通过scope调用方法：
var container = $('#container'); // #containe要在data-ng-app的子节点下
angular.element(container).scope().fun(); // 调用AngularJS下面的fun方法；
强烈推荐使用Angular开发，jQuery的功能基本95%以上都可以用Angular代替，代码量更少，更容易维护。
JavaScript的String添加了个encodeHTML方法，可以对HTML的特殊字符进行转义，实现如下：
String.prototype.encodeHTML = function () {
var div = document.createElement('div');
div.appendChild(document.createTextNode(this));
return div.innerHTML;
}
如果输出到页面的内容由HTML拼接完成，且内容存在用户输入的部分，则拼接过程中，对应字段需要经过HTML转义，用法如下：
function format(name){
return '<div>' + name.encodeHTML() + '</div>';
}
脚本实现在eompBase.js中，导入该脚本的页面，都可以按照上面的写法进行转义。
