WebBETWAY登录开发标准文档

WebBETWAY登录开发标准文档

标准意图
为进步团队协作功率, 便于后台人员增加功用及BETWAY登录后期优化保护, 输出高质量的文档, 特制订此文档. 本标准文档一经供认, BETWAY登录开发人员有必要按本文档标准进行前台页面开发. 本文档如有不对或许不适宜的地方请及时提出, 经讨论决定后方可更改.


基本准则
契合web标准, 语义化html, 结构体现行为别离, 兼容性优异. 页面功用方面, 代码要求简洁明晰有序, 尽或许的减小服务器负载, 确保最快的解析速度.



文件标准
1. html, css, js, images文件均归档至<系统开发标准>约好的目录中;
2. html文件命名: 英文命名, 后缀.htm. 一同将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以便利后端增加功用时查找对应页面;
3. css文件命名: 英文命名, 后缀.css. 共用base.css, 主页index.css, 其他页面依实践模块需求命名.;
4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实践模块需求命名.

html书写标准
1. 文档类型声明及编码: 一致为html5声明类型; 编码一致为 , 书写时运用IDE完结层次分明的缩进;
2. 非特别情况下款式文件有必要外链至...之间;非特别情况下JavaScript文件有必要外链至页面底部;
3. 引进款式文件或JavaScript文件时, 须省略默许类型声明, 写法如下:


<script src="..."></script>

4. 引进JS库文件, 文件名须包括库称号及版本号及是否为压缩版, 比方jquery-1.4.1.min.js; 引进插件, 文件名格局为库称号+插件称号, 比方jQuery.cookie.js;

5. 一切编码均遵从xhtml标准, 标签 & 特点 & 特点命名 有必要由小写字母及下划线数字组成, 且一切标签有必要闭合, 包括 br (
), hr(

---

)等; 特点值有必要用双引号包括;

6. 充分运用无兼容性问题的html本身标签, 比方span, em, strong, optgroup, label,等等; 需要为html元素增加自界说特点的时分, 首先要考虑下有没有默许的已有的适宜标签去设置, 假如没有, 能够运用须以"data-"为前缀来增加自界说特点，防止运用"data:"等其他命名办法;

7. 语义化html, 如 标题依据重要性用h*(同一页面只能有一个h1), 段落符号用p, 列表用ul, 内联元素中不行嵌套块级元素;

8. 尽或许削减div嵌套, 如 彻底能够用以下代码代替: ;

9. 书写链接地址时, 有必要防止重定向，例如：href="https://itaolun.com/", 即须在URL地址后边加上“/”；

10. 在页面中尽量防止运用style特点,即style="…";

11. 有必要为含有描绘性表单元素(input, textarea)增加label, 如

名字:

须写成:

名字:

12. 能以布景方式出现的图片, 尽量写入css款式中;

13. 重要图片有必要加上alt特点; 给重要的元素和切断的元素加上title;

14. 给区块代码及重要功用(比方循环)加上注释, 便利后台增加功用;

15. 特别符号运用: 尽或许运用代码代替: 比方 <(<) & >(>) & 空格( ) & »(») 等等;

16. 书写页面进程中, 请考虑向后扩展性;

17. class & id 拜见 css书写标准.


css书写标准
1. 编码一致为utf-8;

2. 协作开发及分工: i会依据各个模块, 一同依据页面类似程序, 事前写好大体结构文件, 分配给BETWAY登录人员完结内部结构&体现&行为;  共用css文件base.css由i书写, 协作开发进程中, 每个页面请有必要都要引进, 此文件包括reset及头部底部款式, 此文件不行随意修正;

3. class与id的运用: id是仅有的并是父级的, class是能够重复的并是子级的, 所以id仅运用在大的模块上, class可用在重复运用率高及子级中; id准则上都是由我分发结构文件时命名的, 为JavaScript预留钩子的在外;

4. 为JavaScript预留钩子的命名, 请以 js_ 开始, 比方: js_hide, js_show;

5. class与id命名: 大的结构命名比方header/footer/wrapper/left/right之类的在2中由i一致命名.其他款式称号由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 防止运用中文拼音, 尽量运用简易的单词组合; 总归, 命名要语义化, 简明化.

6. 躲避class与id命名(此条重要, 若有不明白请及时与i交流):
    a） 经过隶属写法躲避, 示例见d;
    b）取父级元素id/class命名部分命名, 示例见d;
    c）重复运用率高的命名, 请以自己代号加下划线开始, 比方i_clear;
    d）a,b两条, 适用于在2中已建好结构的页面, 如, 要在2中已建好结构的页面代码 中参加新的div元素,

按a命名规律: ,
款式写法:  #mainnav  .firstnav{.......}

按b命名规律: ,
款式写法:  .main_firstnav{.......}

7. css特点书写次序, 主张遵从:  布局定位特点-->本身特点-->文本特点-->其他特点. 此条可依据本身习气书写, 但尽量确保同类特点写在一同. 特点罗列: 布局定位特点首要包括: display & list-style & position（相应的 top,right,bottom,left） ＆ float & clear ＆ visibility ＆ overflow； 本身特点首要包括: width & height & margin & padding & border & background; 文本特点首要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 我所列出的这些特点仅仅最常用到的, 并不代表悉数;

8. 书写代码前, 考虑并进步款式重复运用率;

9. 充分运用html本身特点及款式承继原理削减代码量, 比方:

• 这儿是标题列表2010-09- 15

界说
ul.list li{position:relative}  ul.list li span{position:absolute; right:0}
即可完结日期居右显现

10. 款式表中中文字体名, 请有必要转码成unicode码, 以防止编码过错时乱码;

11. 布景图片请尽或许运用sprite技术, 减小http恳求, 考虑到多人协作开发, sprite按模块制造;

12. 运用table标签时(尽量防止运用table标签), 请不要用width/ height/cellspacing/cellpadding等table特点直接界说体现, 应尽或许的运用table本身私有特点别离结构与体现 , 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css操控办法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, base.css文件中我会初始化表格款式)

13. 根绝运用 兼容 ie8;

14. 用png图片做图片时, 要求图片格局为png-8格局,若png-8实在影响图片质量或其间有半透明作用, 请为ie6独自界说布景:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);

15. 防止兼容性特点的运用, 比方text-shadow || css3的相关特点;

16. 削减运用影响功用的特点, 比方position:absolute || float ;

17. 有必要为大区块款式增加注释, 小区块适量注释;

18. 代码缩进与格局: 主张单行书写, 可依据本身习气, 后期优化i会一致处理;


JavaScript书写标准

1. 文件编码一致为utf-8, 书写进程过, 每行代码完毕有必要有分号; 准则上一切功用均依据XXX项目需求原生开发, 以防止网上down下来的代码形成的代码污染(沉冗代码 || 与现有代码抵触 || ...);

2. 库引进: 准则上仅引进jQuery库, 若需引进第三方库, 须与团队其别人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为'_', 其他与原生JavaScript 规矩相同, 如: _iTaoLun;

另, 要求变量会集声明, 防止全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽或许运用英文单词或其缩写;

7. 尽量防止运用存在兼容性及耗费资源的办法或特点, 比方eval_r() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码运用, 以防止编码过错时乱码显现;

9. 代码结构明晰, 加适量注释. 进步函数重用率;

10. 重视与html别离, 减小reflow, 重视功用.


图片标准

1. 一切页面元素类图片均放入img文件夹, 测验用图片放于img/demoimg文件夹;

2. 图片格局仅限于gif || png || jpg;

3. 命名悉数用小写英文字母 || 数字 || _ 的组合，其间不得包括汉字 || 空格 || 特别字符；尽量用易懂的词汇, 便于团队其他成员了解; 另, 命名分头尾两部分, 用下划线离隔, 比方ad_left01.gif || btn_submit.gif;

4. 在确保视觉作用的情况下挑选最小的图片格局与图片质量, 以削减加载时刻;

5. 尽量防止运用半透明的png图片(若运用, 请参阅css标准相关阐明);

6. 运用css sprite技术会集小的布景图或图标, 减小页面http恳求, 但留意, 请有必要在对应的sprite psd源图中划参阅线, 并保存至img目录下.


注释标准

1. html注释: 注释格局 , '--'只能在注释的始末方位,不行置入注释文字区域;

2. css注释: 注释格局 ;

3. JavaScript注释, 单行注释运用'//这儿是单行注释' ,多行注释运用 ;


开发及测验东西约好

主张运用Aptana || Dw || Vim , 亦可依据自己喜爱挑选, 但须遵从如下准则:

1. 不行运用IDE的视图方式'画'代码;

2. 不行运用IDE生成相关功用代码, 比方Dw内置的一些功用js;

3. 编码有必要格局化, 比方缩进;

测验东西: 前期开发仅测验FireFox & IE6 & IE7 & IE8 , 后期优化时参加Opera & Chrome & Safari;
主张测验次序: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari, 主张装置firebug及IE Tab Plus插件.

WebBETWAY登录开发标准手册下载