前端操作规范综合.docx

1、前端操作规范综合文件操作规范-CSS 1 CSS文件存放及命名规则 2 规范描述 3 规范详细 o 3.1 CSS文件目录结构说明： o 3.2 命名规则： 4 备注 5 修改历史 CSS文件存放及命名规则规范编号:B201b定制时间/版本:2009年5月/1.0接口人:备注:备注规范描述目的 为了规范日常工作中CSS文件的命名和服务器存放而设定这个规则。 说明 规则包含:现服务器CSS目录结构、CSS文件命名规则、一些主要CSS文件功能说明。 规范详细CSS文件目录结构说明：现在CSS文件全部存放在图片服务器 assetsc 目录下，其文件结构。 Global : 公用cssSys: 组件c

2、ssTypography: 页面css命名规则存放的CSS文件必须存放两份,一份未压缩过的文件以”文件名. source.css”命名,一份为压缩后的文件.压缩工具在 / 。命名规范:目录结构 目录 存放原则 命名规范 备注global 全站通用的css 见备注 sys 经常会被重用的组件css，一般配合js库中的组件js使用 sys.组件英文名.css 例如：tab切换的样式表命名为：sys.tab.css typography 模块页面css 模块英文缩写.子模块英文名.css模块英文缩写有以下几种： 服务(sc) 产品(pd) 单任务 (as) 其他(ot) 例如: pd.coupon.

3、css NOTICE 如果是在开放wiki里面依旧要注意结合template的设置来一起操作.一旦允许了子页面,并且开启了所有空间都可以变成template的时候,恶意添加将会更加容易.主要CSS 目录 样式文件 所属类型 适应范围 global global_v1.css 公用 网站统一样式 component.css 公用组件样式 layout.css 布局样式 v2.0.css sys.calendar.css 日历样式 sys sys.datepicker.css 公用 sys.tabs.css Tab样式 sys.thickbox.source.css 备注 文件结构为“极品飞车“项

4、目后整理出的文件夹结构。 修改历史修改时间 修改人 修改说明2009年52月 伟强 创建(X)HTML开发规范取自 Alipay WD作者：张贞 1 HTML开发规范 o 1.1 本规范概述 o 1.2 执行本规范时建议的流程 o 1.3 在HTML 4.01 Strict标准上的强化规则 1.3.1 一般规则 1.3.2 样式分离规则 1.3.3 脚本分离规则 o 1.4 内容模型 o 1.5 Doctype o 1.6 TITLE元素 o 1.7 META元素 o 1.8 TABLE元素 o 1.9 TH元素 o 1.10 A元素 o 1.11 LINK元素 o 1.12 IMG元素 o

5、1.13 FORM元素 o 1.14 INPUT元素 o 1.15 LABEL元素 o 1.16 EMBED元素 o 1.17 IFRAME元素 o 1.18 (X)HTML注释 o 1.19 HTML书写规范 o 1.20 HTML常见错误举例 HTML开发规范本规范概述制定本规范的目的在于使我们的(X)HTML能够适应更多的客户端，符合标准的好处就在于此，而不在于机械化的执行。执行本规范时建议的流程建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先对(X)HTML模板进行规划，然后才开始编码，编码的同时进行Debug，Va

6、lidate和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。在HTML 4.01 Strict标准上的强化规则一般规则 所有非空元素必须有闭合tag，如 这是一个段落 元素名称和属性名称全部小写 属性值必须使用双引号包围 在某些脚本必要的地方才使用 name 属性，否则一律使用id属性 在属性值和元素内容出现的地方，如果有字符 , &, ，那么应当分别使用 ", &, <, > 样式分离规则 样式统一在 head 元素中使用 link 元素引用，不得在 head 元素以外的地方添加样式，不得在元素中使用 style 属性，不应当在元素中使用其他样式属性

7、，如 background 等，不应当使用具有样式特征的元素，如 br, hr 等，其中br元素代表语气停顿，通常用于诗句，但这并不表示任何需要换行的地方就应当使用br元素。 可以将样式统一写在 元素中的 元素中，但必须保证该样式是当前页面的唯一样式，如果该样式被其他页面同时使用，那么应当考虑抽离出来形成外部文件。 脚本分离规则 脚本仅能出现在 head 元素内和 body 元素闭合tag即 前。不得在任何元素中使用event相关属性，如 onclick 等。 内容模型 本规范的内容模型应当遵循HTML 4.01 Strict提供的内容模型，其中的主要规则总结如下。 能够包含块级元素和行级元素

8、的元素有 fieldset, div, li, object 只能包含行级元素的元素有 h1 - h6, pre, p, address, 其他行级元素如 a 等 只能包含块级元素的元素有 noscript, blockquote, form 其余元素只能包含一些特定的元素，包括 table, ul, ol, dl, select Doctype 使用W3C的HTML 4.01 Strict标准，文档以下内容规定了符合该Doctype需要满足的要求 TITLE元素 head 元素中必须包含 title 元素 META元素 必须包含 ，应当使用UTF-8编码 必须作为 head 元素的第一个子元

9、素出现 TABLE元素 必须指定 summary 属性 必须显示包含 tbody 元素 TH元素 应当指定 scope 属性 A元素 不应当使用 name 属性，而用 id 替代 当 input 元素的顺序由于样式需要调整时，应当指定 tabindex 属性 关键的链接处应当指定 accesskey 属性 LINK元素 当 link 元素用于引用CSS文档时，必须指明 media 属性 IMG元素 必须指定 alt 属性 frame、iframe、img、embed标签必须带上src属性，且为https引用 FORM元素 form中严禁再嵌套form元素 INPUT元素 一个form有且只有一

10、个type=submit的input按钮 禁止submit上绑定onclick等事件使用submit方法提交表单 当 input 元素的顺序由于样式需要调整时，应当指定 tabindex 属性 关键的控件处应当指定 accesskey 属性 可参考的accesskey标准 LABEL元素 与控件对应的文本必须使用 label 元素标记，且使用 for 属性指向该控件 id EMBED元素 不得使用该元素嵌入对象，如果需要在页面中嵌入flash，应当使用javascript 如果使用该元素，要遵循“frame、iframe、img、embed标签必须带上src属性，且为https引用”的规则 I

11、FRAME元素 尽量不要使用iframe元素 frame、iframe、img、embed标签必须带上src属性，且为https引用 (X)HTML注释需要注释的内容有 文档的作者 在跨越很多很多行的包裹元素的闭合标签位置添加 HTML书写规范 DOCTYPE声明和html元素之前不用空格，其余元素均根据父元素的位置缩进一个tab的距离，tab距离可以是4个空格或8个空格。 HTML常见错误举例 没有重复ID项，没有名为submit等保留字的ID的元素或者name的元素 CSS开发规范取自 Alipay WD作者：顾平、张贞 1 CSS开发规范 o 1.1 本规范概述 o 1.2 执行本规范时

12、建议的流程 o 1.3 CSS文件结构设计 o 1.4 CSS文件注释 o 1.5 CSS文件编码 o 1.6 CSS中使用hack o 1.7 CSS书写规范 o 1.8 CSS挂钩器的命名习惯 1.8.1 页面结构 1.8.2 常用全局内容 1.8.3 常用页面内容 CSS开发规范本规范概述制定本规范的目的在于使我们的CSS代码更加易于维护和重用，从而提升效率执行本规范时建议的流程建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式，然后才开始编码，编码的同时进行Debug，Vali

13、date和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。CSS文件结构设计CSS文件结构alice.css（所有项目共用样式）项目css（文件名为项目名称，如 wow） frame（可以简写为f，全站共用样式文件） wow.css global（可以简写为g，全站下各子站共用样式文件） home.css account.css page（可以简写为p，页面唯一样式文件） home-index.css account-index.css skin（可以简写为s，换肤样式文件） skinname.css frame下CSS文件应当使用项目名 global下CSS文件使用子站名称 pag

14、e下CSS文件使用子站名-页面名.css的形式 该文件结构统一在页面中使用 link 元素引入，不得使用 import 语句引入外部 CSS CSS文件注释 注释应当使用/*- -*/的形式 可重用的组件使用注释标记出来: /*- Module . -*/*- End Module . -*/CSS文件编码 文件编码必须使用utf-8，请注意编辑器中的设置 CSS中使用hack/todoCSS书写规范 结构应当符合以下格式，即使声明块中只有一条声明语句也应当如此 body font-size: 0.8em; color: red; 声明块之间应空行 声明块内声明语句必须缩进一个tab距离，ta

15、b可以是4个或者8个空格 在写组件样式时，有父子元素关系的样式可以采用进一步缩进体现，如 ul.nav li float: left; /*- 下面的链接是上面的子元素，可以在这里缩进一个tab，显示上下元素的关系 -*/ ul.nav li a color: red; padding: 0 20px; CSS挂钩器的命名习惯 以下为CSS挂钩器的关键字，一般CSS挂钩器可以直接使用关键字，也可以使用 关键字 - 语义描述 的形式。如当页面中出现多个侧栏时可以根据语义将不同侧栏命名为 aside-ad 和 aside-nav 分别表示广告侧栏和导航侧栏。有时在语义描述也一致的情况下，可以使用序

16、列号来区分。如 aside-ad-1 和 aside-ad-2。 统一使用class，不要使用id 页面结构 页头：header 侧栏：aside 导航：nav 子导航：subnav 菜单：menu 子菜单：submenu 页面主体：main 页脚：footer 容器：wrap常用全局内容 当前导航区域：current 列表第一项：first 列表最后项：last 标签页：tab 按钮：btn 当前的：current 面包屑：breadcrumb 提示：tip 标志：logo 广告：banner 版权：copyright 搜索：search 注意内容：note 栏目标题：title常用页面内容

17、 新闻：news 登陆：login 热点：hot 下载：download 文章：article 服务：service 指南：guide 注册：regsiter 投票：vote 合作伙伴：partner 加入：joinus 状态：status编码规范取自 Alipay WD 1 前端JavaScript编码规范 v1.0 o 1.1 序 o 1.2 命名规则 o 1.3 缩进 o 1.4 代码块 o 1.5 空格 o 1.6 注释前端JavaScript编码规范 v1.0 序 制订此规范的初衷是让所有的代码都变成他人容易阅读,并利于维护的。 命名规则 常量及全局变量采用全部大写的形式. 变量的命

18、名使用骆驼命名法，例如： strParsor. maxLength 类的命名使用骆驼命名法,其中首字母大写. AccountInfo, EventHandler 方法的命令必须为动词或者是动词短语： obj.getSomeValue() 私有类的成员变量命名前面加下划线（_）。例如： var MyClass = function() var _buffer; this.doSomething = function() ; this._somePrivateVariable = statement; 前缀为 is 的变量应该为布尔值，同理 has; 术语 initialize 或者 init 作

19、为变量名应为初始化方法; 迭代临时变量建议使用 i, j, k （依次类推）等名称; 异常处理类建议在变量名称后加上 Exception 或者 Error; 缩进 采用 TAB 键缩进, 统一为4个字符, function demo(param) var a1 = 1 此规则亦适用于函数的参数： var o = someObject.get( Expression1, Expression2, Expression3);注意: - 变量必须在声明初始化以后才能使用，即便是 NULL 类型; - 变量名请勿使用系统保留关键字; - 变量应该尽量保持最小的生存周期,及时销毁防止内存泄露; - 浮点

20、变量必须指明小数点后一位（即使是 0）; - 浮点变量必须指明实部，即使为零（使用 0. 开头）。 代码块 普通代码段： while (!isDone)doSomething();isDone = moreToDo();IF 语句： if (someCondition)statements; else if (someOtherCondition)statements; else statements;FOR 语句： for (initialization; condition; update)statements;WHILE 语句： while (!isDone) doSomething()

21、;isDone = moreToDo();DO . WHILE 语句： do statements; while (condition);SWITCH 语句： switch (condition) case ABC:statements;break;default:statements;break;TRY . CATCH 语句 ： try statements; catch(e) statements; finally statements;单行的 IF，WHILE 或者 FOR 语句需加入括号 ： if (condition) statement; while (condition) sta

22、tement; for (intialization; condition; update) statement;单行的 IF ELSE 允许不加括号: if(condition)Statement;elseStatement; 空格 操作符使用空格隔开（包括三元操作符）,如: var x = a b;var y = result = true ? 1 : 0; 逗号（,)与for循环中的封号(;)后添加空格。例如: var test = Array(), test2;for(i = 0; i 100; i+) Statements; 冒号（:)后添加空格 逻辑块之间以空行隔开 注释 保持良好的注释习惯。 类/函数/方法前需添加注释,并注明参数类型,返回值回类型。例如, /* * 金额大小写转换函数 * param Int number 数字金额 * param Num number 数字 * return String 大写金额 */ .