Lonely patients

唯一生生不息的是野草和年青人的梦想!

前端代码规范

请先允许我闪亮的登个场,接下来该说正事了

这个是一份规范,关于前端代码书写的

一 范围

本文档对WEB前端编码进行规范,目的是为兼容多种浏览器,并保证WEB端编码和表现的一致性,提高代码的可维护性。

 

二 总则

1、 语言编码统一使用UTF-8

说明:HtmlHTTP Content-type

CSS分:编码方式使用@charset ‘UTF-8’

JavaScript 部分:新建一个JS文件时,使用编辑器将文档编码方式保存为UTF-8

2、 合理添加注释,避免使用中文注释

3、 文件及文件夹命名统一使用’-’中划线命名法

4、 HTML/CSS/JavaScript 文件归档至相应约定的目录中

 

三 HTML 部分

1、 在文档顶部注日月文档类型定义

2、 <html>根元素,且添加命名空间

3、 语言编码统一使用UTF-8

4、 所有标签的元素和属性的名字都使用小写

5、 所有的标记都必须有一个相应的结束标记

6、 所有的标记都必须合理嵌套

A:不能包含其它的元素

Pre:能包含其他Img object big small sub sup

Button:不能包含其它input select textarea label button form fieldset iframe isindex

Label:不能包含其它的label元素

Form:能包含其他的form元素

7、 所有属性用引号括起来,引号的类型要保持一致

8、 所有特殊符号用转义编码表示

说明:如常用 >义编码(&t;) <转义编码(<)

9、禁示属性的缩写

  说明:误写法<input type=”checkbox” checked />

       正确写法<input type=”checkbox” checked=“checked” />

10、 不能用断行或空格将属性分开

11、 注释内容不要使用“”,用等号或者空格替代。  

说明:“”作为注释只能出现在HTML注释的开头和结束,否者会影响注释的内容。

12、 idclass命名时第一个字符不能是数字,并且命名要清晰,如果采用英文命名就全用英文根据针对的事物用英文命名。

    例如:

      这个div块是一个电话卡产品内容,建议可以用tel-card。或者phone-product等等去命名。  

说明:W3C XHTML1.0标准中规定,在idclass中,第一个字符是不能是数字的,必须是字母。

13、 <img>标签中,必须包括alt元素

14、 页元元素的ID要唯一,name以不唯一

  

CSS

 

1样式表的语法格式与书写格式必须符合规范

2编码统一为utf-8 @charset “utf-8”

3除选择符名称外,统一使用小写

4用中划线规则命名选择符(.product-list

5,一般建议一个页面中引入不超过3个css文件(普通网页),一个公共的基础样式文件,一个是该页面内容的样式文件。

6,使用px%相对尺

7,样式表按照页面类型,分为几个文件来组织

  1简短期的确CSS reset2通用户CSS样式库3网站CSS样式库4网站所有CSS Sprite 合并项5网络站通用小图标样式集6网站通用导航样式

7网站通用按钮样式8网站通用选项卡样式9网站通用文本框等控件样式10网站通用分页样式及其他通用样式11网站公共主结构样式12单页面的一些细节与样式

8,CSS属性书写顺序,议遵循 Positioning(定位) -> Box model(盒模型) -> typographic (排版)->visual(视觉) ->other

  

/* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;

9,在样式表文件的起始位置给通配符添加样式

10,尽量利继承属性,避免重复样式定义

11,一使用推荐的字体定义写法

 Body{font-family:’segoe UI’,’simsun’,sans-serif;}

12理添加注释,使代码清晰易读

13量少用偏僻不常用和影响性能的属性

14使用table标签时,请不要用widhtheightcellspacingcellpaddingtable属 性直接定义表现,应尽可能的利用table自身私有的属性分离结构与表现,如:theadtrthtdtbodytfootcolgroupscope

 

五JavaScript

1 js码应独立保存在后缀为.js文件中

行长度

  说明:避免每行超过80个字符,当一条语句一行写不下时,请考虑折行,在运算符号,最好是逗号后换行,在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。 

4.每一行应该只包括一个语句。每行语句都必须以分号作为结束标志

5 ifelseelse ifforwhiledo等语句,不论执行语句有多少都要加{}

6 switch语句,每个case分支须用break结尾,最后分支须是default分支。

量声明

  说明:所有的变量必须在使用前进行声明且都使用”var”关键词声明,没有默认值的变量,统一赋值undefinedvar语句应该为方法体内的第一个语句,每个变量声明都应该自己占用一行并添加注释。

法声明

  说明:所有的方法应该在使用之前声明,内部方法应该位于var语句后面;   方法名和参数列表的左圆括号之间不应该有空格,在右圆括号和左大括号之间有一个空格。

9

  说明:每定义一个function须写 

        作者:

时间:

函数功能:

形参作用:

10名约定

对于理解应用程序的逻辑流,命名方案是最有影响力的一种帮助。名称应该说明”什么”而不是”如何”。通过避免使用公开基础实现(它们会发生改变)的名称,可以保留简化复杂性的抽象层。例如,可以使用 GetNextStudent(),而不是 GetNextArrayElement()。

最后,撒花,闪人

 

点赞