前端开发规范----细则
一、前端开发规范目的
为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，同时为网站有一个更好的前端架构及网站的发展及未来打好一个基础。
二、基本准则
- 符合web标准，语义化html， 结构表现行为分离，兼容性优秀。
- 页面性能良好，代码要求简洁明了有序， 尽可能的减小服务器负载， 保证最快的解析速度。
- 页面的可维护性强，后期维护起来简单快捷
- 顺应前端发展趋势
三、前端规范总体内容
1. HTML前端规范
1.1 文档模式（doctype）遵循规范
前端网站遵循的文档模式为XHTML1.0 Transitional模式，参考最新改版的网站（taobao.com）及HTML发展趋势，页面所遵循的文档模式应改为<!DOCTYPE html>。
1.2 语义化标签（待测试）
随着HTML5语义化标签的出现，HTML原来以DIV布局的方式也慢慢的在改变；目前常用的语义化标签有article nav aside section header footer hgroup；其使用方式大致如下
注意：因语义化在低版本的浏览器中不识别，所以要做处理，目前处理的方法是用JS的Document.createElement的方式，把需要用到的标签添加到window对象中。
1.3 Css和Js引入顺序
为网站性能考虑，页面的CSS都在head中引入，JS在底部引入
1.4 ID、Class命名
ID采用驼峰式命名法，如：mainMenuNav、subContentList等
Class采用下划线命名法，如：name_list、main_menu_content等
常用的词汇如下：
页 眉：header
内 容：content
容 器：container
页 脚：footer
版 权：copyright
导 航：menu
主导航：mainMenu
子导航：subMenu
标 志：logo
标 语：banner
标 题：title
侧边栏：sidebar
图 标：Icon
注 释：note
搜 索：search
按 钮：btn
登 录：login
链 接：link
信息框：manage
1.5 meta 中name和http-equiv
这两块是页面中的重要特性的设置，但所有页面设置格式基本相同，所以可参考网站首页。
1.6 产品图片必须加上alt属性； 给重要的元素和截断的元素加上title；可以的话，尽量给所有图片都设定好高度和宽度；目的:有利于seo，搜索引擎的爬虫。
1.7 给区块代码及重要功能(比如循环)加上注释, 方便后台程序员嵌套模版；
<!--- start ---->
<div>sdddfdsss</div>
<!--- end ---->
1.8 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & ?(?) 等等；
常用特殊符号对照表：
￥ ¥
《 «
< <
> >
更多详见：http://www.cnblogs.com/cbcye/archive/2009/08/31/1557076.html
2. Css前端规范
2.1 Css中变量命名规范
Css中变量包括ID、CLASS、标签，其中ID和CLASS在HTML规范1.4有规定
2.2 Css中背景图片
Css中的背景图片可以合并的都合并成一张图片，这样可以减少页面的HTTP请求；涉及到应用到背景图片的Css都放置Css文件中的顶部，这样便于后期维护。
2.3 Css文件中，单独的样式定义，不要折行，这样便于浏览和查看，页易于维护
2.4 页面中较为公用的模块（如：点评、POI、在线问答），其Css要独立成单独的Css文件，这样便于不同类页面之间直接引用和后期统一维护
2.5 Css3的使用规范
Css3新增的属性有border-radius,box-shadow,transition,transform,animation,@font-face, gradient等，这些新的属性虽然兼容性还有些问题，但是可以在不破坏低版本浏览器页面样式的情况下，丰富高版本浏览器的交互；所以建议适量的使用。
2.6 Font-family属性值用英文，中/英文对照表如下
2.7 待新增
3. Js前端规范
3.1 缩进
4个tab
3.2 语句结尾
必须要有分号
3.3 命名
- 变量和方法名统一使用驼峰命名法（小）。
- JS文件统一使用驼峰命名法（大）。
- 变量中禁止使用动词开头，比如禁止使用get/set等，需要以名词开头。方法命名须要以动词开头，文件名称一律以名词开头；
好的变量命名 var userName = “”;
不好的变量命名 var UserName = “”;
好的方法命名 function getUserName(){…};
不好的方法命名 function getusername(){…};
- 常量一律使用大写表示单词和单词之间使用(_)下划线进行区分。
好的常量定义 var MAX_COUNT = 10;
- 构造函数的命名以大写字母开始（大写驼峰）
好的构造函数 function HotelList(){…}
- 直接量
字符串定义 var userName = “”;
数字定义 var count = 0;
布尔定义 var flag = false;
预定义对象 var obj = null;
对象直接量 var book = {};
数组直接量： var books = [];
- 注释
//单行注释
重要的逻辑语句之前需要添加单行注释
多行注释
/**
*注释
*/
每个方法之前需要添加多行注释
- 文档注释
//////////////////////////////////////////////
// 这个文件是 途牛 NGBOSS 系统项目的一部分
//
// Copyright (c) 2013 Tuniu
//////////////////////////////////////////////
/**
* 功能说明：…..
* @author: 作者姓名 (xxx@tuniu.com)
* @version: xxxx.js 2013-09-17 14:21:30
*/
3.4 待定
4. 图片前端规范
4.1 背景图
a) 可以合并的背景图合并到统一张图片中，即CSS Sprite
b) 合并后的图片在CSS引用时，放在CSS文件的最顶部
c) Font-face，可以使用的尽量使用
4.2 产品图
a) 首屏之外的产品图片都异步加载
b) 产品图片的尺寸确定的，定义样式时要把宽和高固定
4.3 订单
5. 前端性能规范
5.1 网站前端优化 – DOM
DOM优化方法
目前对DOM优化采用的方法是不渲染，即将对SEO不重要的内容用textarea或者script包裹，这样的话他们在渲染时就会被当做字符串而不会解析成节点。
5.2 网站前端优化 – JS
JS是除图片外，对前端性能影响最大的一个方面，也是最难优化的。总体来说，JS对性能有影响体现在两个阶段，一个是JS的下载阶段，一个是执行阶段。
JS同步时，下载和执行阶段解析器都会暂停，等待JS下载和执行；而jS异步时，JS下载不会暂停解析器，因此不会阻塞页面，但是执行时，仍然会暂停解析器。所以，对JS处理方式一般是异步并且放在页面底部。这样可以对页面的影响降到最小。
JS另一个难点就是页面中的JS代码的逻辑处理，可以用dynaTrace AJAX跟踪查看。
5.3 网站前端优化 – 重绘&回流
当呈现树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
当呈现树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
5.4 这块内容是和浏览器渲染方式息息相关的，有兴趣的童靴可以在网站多找些资料；这里只介绍些平时我们可能使用的一些会造成重绘&回流的方法，及改进意见
a) 不要一个个改变元素的样式属性，最好直接改变class_name，但class_name是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变
b) 让要操作的元素进行"离线处理"，处理完后一起更新，这里所谓的"离线处理"即让元素不存在呈现树中
c) 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，就先读取到变量中进行缓存，以后用的时候直接读取变量就可以了
d) 考虑你的操作会影响到呈现树中的多少节点以及影响的方式，影响越多，花费肯定就越多
5.5 待定
6. SEO前端规范
6.1 可抓取性
a) 所有SEO内容中的链接采用文字并且包含关键词，不得采用仅仅图片、flash、iframe以及AJAX等特殊方式加载，保证链接可被搜索引擎爬虫抓取。上线前采用Lynx浏览器或者采用在线版：http://lynx.itlearner.com/检查链接的可抓取情况。
b) 所有的SEO内容应当直接显示在源代码中，不要使用sessionID, DHTML, cookies, Javascript(textarea), Flash等技术所展现内容。采用Lynx浏览器或者采用在线版：http://lynx.itlearner.com/检查内容的展示情况。
c) 不要将文字隐藏在图片之后，或者文字颜色与背景色相同，会被判定为隐藏内容。唯一可行的方法是使用text-indent属性。
6.2 标准化
a) 遵循xhtml规则，所有标签必须闭合，比如<img /> <br />不能忘记添加。所有页面改版或上线前，必须使用工具验证生成后的代码，确保没有未闭合的标签。 https://chrome.google.com/webstore/detail/html-tag-checker/ohdllebchmmponnofchalfkegpjojcaf?hl=zh-CN
b) 使用语义化的标签进行页面的规划，例如：分段使用<p>而不是<br />，列表使用<ul>，表格使用<table><th>等标签，避免多余嵌套，页面正文内容必须处于最深的嵌套中。
c) 不要使用空的<a>标签，例如<a href="www.tuniu.com"></a>，禁止出现空的<img src="">，。
d) 合理使用H1~H6标签，使网页文本具有层次性，H1标签只允许出现1次，被H1标签包裹的文字必须能概括本页面的内容，页面上与之相关的一些标签依次使用H2加强，不使用H3~H6标签。不要通过css去修改h标签的大小加粗的样式。
6.3 简洁化
a) 不使用行内样式和<body>内的css样式，防止造成页面重渲染，降低效率。
b) 减少页面上的无关信息，无意义的代码、隐藏菜单和广告等，使用js进行调用，提高页面的信噪比。
c) 预先在<img>中定义好每个图片的大小，便于用户加载的时候可以预留足够的空间，防止图片加载不出来破坏页面结构。页面上的所有图片必须加上alt属性，对于除小图标之外的照片，只使用jpg和png格式。不要使用html控制图片大小进行缩放，如果产品图片尺寸与我们的需要不一致，在上传的时候就自动裁剪压缩好；如果需要缩略图，使用两个版本大小的图片，并且通过存放不同目录或者设置件名特征，禁止搜索引擎爬行缩略图。
d) 页面总体积小于110K，共享CSS样式和脚本样式，相同样式用户只需下载一次，压缩CSS文件中的空白。压缩JS代码，移除重复无用的JS代码，对JS文件体积减肥,实现代码简洁化。合并JS、CSS文件以减少HTTP请求。压缩HTML代码中无意义的TAB、空白元素。
e) 小图标不需要alt属性，alt属性的内容必须与图片内容相符合，如无法调用到相关的替代文字，则不写alt属性，不允许出现空的alt属性。
f) 当锚文本内容无法与页面主题相关时，请增加title属性帮助搜索引擎了解目标页面的内容，除此之外不需要任何title属性。
g) 页面发布前必须压缩删除代码中的空白，注释等无意义内容。如图，大段空白。
6.4 需要商议的部分
a) 制定前端代码元素命名标准，做到元素命名的语义化和统一。
b) 在输出的html代码中不要出现css和js代码，此类代码一律外置。
c) 页面html代码行数不超过1000行。把代码压缩换行。