1.项目文件及文件命名规范
1 | │ index.html |
(1):例如一个home模块页面 => （文件命名要具有可识别与模块含义的名称）
html: page/home.html
css: css/home.css
js: js/ views/home.js
2.html的class 、id等正确命名方式
(1)：为何要正确命名：方便自己及同事之间的开发，便于理解快速查找问题
例如： 这是一个电影列表 .movie-list，这个单词的组合一眼便看出该html代码的含义“电影 – 列表”（命名id一般使用驼峰命名法：movieList）
注意：命名无需太长否则容易误导
3.css 规范书写
(1)：合理的避免使用ID一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。使用ID唯一有效的是确定网页或整个站点中的位置。尽管如此，我们应该始终考虑使用class，而不是id，除非只使用一次。（id多用于js上的编写）
(2)：声明结束为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。1
2
3
4
5
6
7
8// 不推荐
.movie-list{
font:20px/1.2
}
// 推荐
.movie-list{
font:20px/1.2;
}
(3)：合理利用style 在div上减少使用style，我们一般要写在html页面上的话都会在head标签内插入style既美观又便于重复使用。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>home</title>
<style type="text/css">
//推荐
.main{
padding: 10px;
}
</style>
</head>
<body>
<div class="main" style="padding: 10px;"> //不推荐
<ul class="movie-list" id="movie-list">
<li>
<a href="">庆中秋迎国庆</a>
</li>
4.js 规范书写
1 | <script src="js/libs/jquery-1.12.0.min.js"></script> |
(2)：引号的使用，单引号’ ‘ 优先1
2
3
4
5//正常情况：
console.log('hello there');
//双引号转码：
$("<div class='box'></div>");
(3)：空格的使用问题：（关键字后 符号后 排版 函数 赋值符号= ）等
a 函数的括号：function hello (name) {} 看 (参数)的 “括号外左右”( ) 是有空格的，”括号内name左右” 是没有空格的
b 关键字后需要空格：if (condition) { … } if和()之间需要有空格
c 赋值符号 = 两边需要有空格 ：var x = 2 赋值符号 = 两边需要空格
d 字符串拼接符号 + 两边需要空格：var message = ‘hello, ‘ + name + ‘!’ 常量和变量之间的+号，左右两边需要空格
e 逗号，前面不要留空格，后面留空格：1
2var list = [1, 2, 3, 4];
function greet (name, options) { ... };
逗号前面不留后面留空格
(4)：注释规范在描写注释时，推荐格式化且统一的注释风格，在写注释时尽量描述写代码时的思路，而不是代码做了什么。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20不推荐
//获取订单
function getOrderByID(id){
var order;
// ...
return order;
}
方法的注释应该同意用块及注释
推荐
/**
* 根据订单id获取订单详细数据
* @param {[number]} id [订单ID]
* @return {[order]} [订单详细信息]
*/
function getOrderByID(id){
var order;
// ...
return order;
}
(5)：对象和数组的创建问题： var item = {}; 不用new Object（）方式， 数组：var arr = []
5.css、js抽取公用代码（封装js）
抽取原因：减少代码的冗余性，减少请求资源的加载时间，减少项目大小，增加代码重复使用率，使其提高工作效率。
(1):css 初始化 + 抽取公用（命名：base.css）1
2
3
4
5
6
7
8
9
10
11
12
13/* 初始化 */
* {margin: 0;padding: 0;border: 0;font-style: normal;}
a {text-decoration: none;outline:none;blur:expression(this.onFocus=this.blur()); color:#000;}
ul {padding: 0px;margin: 0px;}
li {list-style-position: outside;list-style-type: none; vertical-align:bottom; /*fix ie6 li height bug*/ zoom:1;}
img {border:0px;}
html{height:100%;}
body{width:100%;height:100%;position:relative;font-size: 12px;line-height:12px;font-weight: normal;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif,"微软雅黑","宋体";}
h1,h2,h3,h4,h5,h6{font-size:12px;display:block;font-weight:normal;}
legend{display:block; width:100%;}
button{cursor:pointer;}
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
th, td, caption {vertical-align: middle; font-weight: 500;}
(2):js 封装公用（命名：common.js）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25/*
* 配置共用信息
* 共用方法封装
* 对外部插件的封装
*/
(function(common){
util = window.util;
if((document.domain).indexOf('***') != -1){
util.ajax.apiUrl = 'http://***'; //正式服务器
}else{
util.ajax.apiUrl = 'http://***'; //测试服务器
}
window.common = {
init:function(){
//配置接口地址及其他信息
util.ajax.valiHandle = function(data){
if(data.code !== undefined && (data.code == '210' || data.code == '102')){
location.href = '***';
}else{
return true;
}
};
}
}
})(window.common = window.common || {})
