一、 引言
二、 HTML/CSS规范
-
主流程测试：Chrome 30+、IE9+；
-
完整测试： Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。
<!DOCTYPE html>
<meta charset="UTF-8"> <!-- ie6也支持，无须担心 -->
<!-- start: XXX模块 -->
…
<!-- end: XXX模块 -->
<!-- XXX模块 -->
…
<!-- /XXX模块 -->
<div data-bgColor="red"></div>
$('div').data('bgColor'); // 取不到，已自动被浏览器转成了data-bgcolor
// 禁止
<div id=mainframe> 或 <div id='mainframe'>
// 推荐
<div id="mainframe">
// 禁止
<p><b></p></b>
// 推荐
<p><b></b></p>
// 禁止inline级标签嵌套block级标签
<span><div></div></span>
<h1>标题<h1>
<lable for="user">用户名：</lable>
<input name="username" id="user">
<link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略，清爽 -->
@charset "utf-8";
/**
* @created : 2017/09/15
* @author : Mr.Wang
* @version : v1.0
* @desc : XX模块
*/
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
/* @info 商品信息区
----------------------------------------------------------------*/
.infoArea{}
/* 单行注释 */
.specArea{}
/* @price 商品价格区
----------------------------------------------------------------*/
.price{}
A.）影响文档流的属性（display, position, float, clear, visibility, table-layout等）
B.）自身盒模型的属性（width, height, margin, padding, border等）
C.）排版相关属性（font, line-height, text-align, text-indent, vertical-align等）
D.）装饰性属性（color, background, opacity, cursor等）
E.）生成内容的属性（content, list-style, quotes等）
// 不推荐
.canbox{
background-color: #ff6600;
background-image: url("/img/xxx.png");
}
// 推荐(合并、去除引号)
.canbox {
background: #f60 url(/img/xxx.png);
}
// 不推荐
.wrap{
margin: 0px 0px 5px 8px;
}
// 推荐
.wrap {
margin: 0 0 5px 8px;
}
word-break: break-all; word-wrap: break-word; overflow-x: hidden;
三、 JavaScript规范
<script src="model.js"></script>
<html>
<body>
<div>页面内容….</div>
<script src="model.js"></script>
</body>
</html>
(function() {
var i = 0;
function innerFun() {
var j = 0;
……
}
});
// 不推荐
var arr=[1,2],str='hello'+'Lucy';
var myfun=function(arg){
//todo…
}
// 推荐
var arr = [1,2],
str = 'hello' + 'Lucy';
var myfun = function(arg) {
//todo…
}
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
/**
* @created : 2017/09/15
* @author : Mr.Wang
* @version : v1.0
* @desc : 当前js模块功能描述
* @e.g. : 方法用例，如：$('.title').tip();
*/
/**
* 此方法是用于解析tpl模块
* 通过分析html中结构…
*/
var funName = function(arg1, arg2) {
this.arg1 = arg1;
// 单行注释说明(上面添加一空行, //与说明之间空一格)
this.arg2 = arg2;
};
// 不推荐
var is_my_object = {};
var is-my-object = {};
// 推荐
var isMyObject = {};
// 不推荐
var bad = new user({
name: 'nope'
});
// 推荐
var good = new User({
name: 'nope'
});
(function(){
'use strict';
function innerFun(){
var j = 0;
……
}
});
// 严格模式下会抛出异常
(function() {
some = 'foo';
}());
window.color = 'red';
function getColor() {
console.log(this.color);
}
// 在严格模式中会报错, 非严格模式中则提示red
getColor();
// 重复的变量名，在严格模式下会报错。
function doSomething(value1, value2, value1) {
//code
}
// 重复的对象属性名，在严格模式下会报错。
var object = {
foo: 'bar',
foo: 'baz'
};
var person = {};
Object.defineProperty(person, 'name' {
writable: false,
value: 'Nicholas'
});
// 在非严格模式时，沉默的失败，在严格模式则抛出异常
person.name = 'John';
// 不推荐
var hero = {
firstName: 'Kevin',
lastName: 'Flynn',
};
// 推荐
var hero = {
firstName: 'Kevin',
lastName: 'Flynn'
};
;(function(){
var i = 0;
function innerFun(){
var j = 0;
……
}
});
// 不推荐
var item1 = new Object(), item2 = new Array();
// 推荐
var item1 = {}, item2 = [];
// 不推荐
var name = "Bob Parr";
// 推荐
var name = 'Bob Parr';
// 不推荐
if (test)
return false;
// 推荐
if (test) return false;
// 或
if (test) {
return false;
}
// 不推荐
function() { return false; }
// 推荐
function() {
return false;
}
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
四、 jQuery性能优化
-
如果查找$('. class')，应使用$('#id > tag. class')来缩小DOM Tree的搜索范围。
-
#id前面不要用tag来修饰。写成$('div#id')会降低性能，因为JS会遍历所有 的div元素来查找id为'id'的哪一个节点:
-
#id1也不需要由#id2来修饰。写成$('#id2 #id1') 是画蛇添足，降低性能。
var $box = $('#wrap').find('.box');
$box.addClass('class');
$.ajax({
$box.html('text');
});
$('div').addClass('className').html('html code').click(function(){
alert(1);
});
$('div p').click(function(){
……
});
// 上面替换成如下
$('div').find('p').click(function(){
……
});
<div id="wrap" data-foo="123"></div>
// 取数据：
$('#wrap').data('foo');
// 存数据：
$('#wrap').data('foo', {a:1,b:2} );
-
所有文件夹命名，如需要两个单词表示的，使用"-"中划线连接（如：img-plug）。
-
所有文件（.html、.css、.js、图片）命名，如需要两个单词表示的，使用""下划线连接符（如：indexinfo.html）。
-
所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则：
icon_xxx.gif //图标文件名
btn_xxx.gif //按钮文件名
corner_xxx.gif //边角文件名
banner_xxx.gif //广告条文件名
bg_xxx.gif //背景图片文件名
flash_xxx.gif //flash文件名
temp_xxx.gif //临时测试用文件名
服务热线 19970861797
