前台页面编码规范
Html 编码规范
- 语义化结构 (使用符合语义的标签书写 HTML 文档,选择恰当的元素表达所需的含义)
- 所有的标签元素和属性的名字都必须使用小写; 属性值必须加双引号; 所有的标记都必须有一个相应的结束标记 ;嵌套标签必须合理
- 同级标记 上下应对齐,父级标记与子标记之间的标签元素要有一定的缩进。多行相似的代码出现要对齐。
- 注意图片大小以及保存格式:结构图片保存成 gif格式的;组合多个不同的背景小图标到一张图上并且摆放整齐有序,然后保存透明 gif /png 的格式;图片大小最大不能超过80k;图片增加alt 属性.
- css样式 、html结构、 js脚本 三者进行完全分离。(css js 外部引用,js放在页面结构的末尾)
- 加注释(嵌套太多的层之间要加一定的注释)
- 结构尽量简单化, 页面内不能用<br/> 来布局 ,如果有特殊符号 要用字符代替,比如 "<" 必须用"<"来代替
Css 编码规范
- 命名规范 语义化命名。class的命名连字符用 "-" 不能用下划线"_",class命名最长不能超过12个字符。
- 属性书写要有顺序: 依位置 、盒模型、内容装饰属性的顺序来写, 例如:属性值是随便给的,
Position:absolute; display: none; overflow: hidden; float: left; clear: both; width:960px; height: 300px; margin: 0; padding: 0; border: 1px solid #ccc; background: #ccc; font-family: “verdaba” ; font-size: 12px; font-weight: bold; color: #555; text-decoration: underline; line-height: 22px; text-align: left; vartical-align: baseline; direction: ltr; z-index: 3;
- 书写规范:类名 与左大括“{”号有空格,每个属性值后面以分号隔开,分号后必须有空格。
- 头尾公共样式单独放一个文件 命名为:base.css, 首页:index.css 列表: list.css ,内容:info.css, 专题:special.css
Js 编码规范
- 命名规范 变量的命名:以字母、下划线_ 、数字开头的命名,但是一般最好是用小写字母开头 ;函数名:用骆驼式语义的命名法.例如:一个删除的函数 function removeElement(){} 。
- 代码的缩进,用Tab缩进来代替 4个空格键。函数体里的每行代码块 都要有个缩进。
- 变量与方法之间必须空一行。如果多个变量可以用一个var一次性声明,例如 var a = ‘abc’ , b = ‘dag’, c = ‘dfa’; 如果变量很多,适当的换行。
- 尽量少用全局变量。用传参的方式 把全局变量 转化为局部变量。
- 每行代码都要有一定含义。代码要有一定的顺序。写函数时要一定要对象化。函数封装的目的是重用性。
- 每条语句结束后必须有个分号;每个的逗号,分号 后必须有空格
- 代码的空格。(1)每个运算符两边必须用空格; (2)函数名()里的参数,如果有多个参数 用","分开并且在","后空一格,函数名与左括号"("之间不能有空格。例如:function createEle(newObj, parentObj); (3)如果是匿名函数的话 function 与"(" 之间必须有个空格,例如function ();这样不至于误认为函数名是function;(4) 函数名的右小括号")" 与左大括号 "{" 必须有个空格 且在这行的最末位置。 函数的 右大括号"}"必须与该函数的function对齐。例如:
window.onload = function() {
addBtn.onclick = function() {
createEle();
};
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
};
}
(5)for循环与左括号之间"(" 之间有空格;例如:
for (var i = 0; i < obj.length; i++) {
//代码块
}
Fo r
注释:每个方法都要有一定的注释,且写在函数上面,函数内部的变量的注释 可写在后面。
字面量:创建 数组,对象,等都可以用字面量来创建。
例如:创建数组 var newArray = ["ab", "vdf"];
创建对象 var newObj = {
prop1:value1,
prop2:value2,
..
};
(6)在for循环类似这样的代码时, for (var I = 0; I < array.lenth; i++) {} 可以把 对象的长度 保存到变量里,这样就不用每次循环都要计算一下长度 可以提高性能。
var arrAlength = array.length;
for (var I = 0; I < arrAlength; i++) {}
(7)字符串 首选用单引号 ‘’; 必要的时候用双引号””;