前台页面编码规范

Html 编码规范

  • 语义化结构 (使用符合语义的标签书写 HTML 文档,选择恰当的元素表达所需的含义)
  • 所有的标签元素和属性的名字都必须使用小写; 属性值必须加双引号; 所有的标记都必须有一个相应的结束标记 ;嵌套标签必须合理
  • 同级标记 上下应对齐,父级标记与子标记之间的标签元素要有一定的缩进。多行相似的代码出现要对齐。
  • 注意图片大小以及保存格式:结构图片保存成 gif格式的;组合多个不同的背景小图标到一张图上并且摆放整齐有序,然后保存透明 gif /png 的格式;图片大小最大不能超过80k;图片增加alt 属性.
  • css样式 、html结构、 js脚本 三者进行完全分离。(css js 外部引用,js放在页面结构的末尾)
  • 加注释(嵌套太多的层之间要加一定的注释)
  • 结构尽量简单化, 页面内不能用<br/> 来布局 ,如果有特殊符号 要用字符代替,比如 "<" 必须用"&lt"来代替

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)字符串 首选用单引号 ‘’; 必要的时候用双引号””;

posted @ 2013-08-10 00:09  javawebsoa  Views(598)  Comments(0Edit  收藏  举报