前端工程师-前端工程师高性能开发规范.docx

高性能网站前端开发规范V 1.00更新时间 2011-07-28版本号 V1.0文件名称制作人 曾祥瑚备注 平湖中商港科技有限公司高性能网站前端开发规范高性能网站前端开发规范 V1.0中国商务港华东总部 中国商务港华东总部平湖中商港科技有限公司 时间： 2011 年 07 月第 1 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28目目录. . 录 . 2一、为什么要遵循规范 . 3 二、目标 . 3 三、受众 . 3 四、通用规范 . 31、文件与目录命名规范 . 3 2、文件编码约定 . 3 3、id 和 class 命名规范 . 4 4、文件存储约定 . 4 5、文件压缩 . 4 6、使用外部 JS 和 CSS . 4 7、兼容性规范 . 5五、HTML 规范. 5HTML 语言规范 . 5 HTML 元素 . 7六、JAVASCRIPT 规范 . 8JavaScript 语言规范 . 8 JavaScript 编码风. 9七、CSS 规范 . 121、样式文件命名规范 . 12 2、选择器运用规范 . 12 3、CSS 样式命名规范. 12 4、CSS 书写顺序. 14 5、CSS Sprite . 15 6、不使用滤镜 . 15 7、尽量不使用 hack . 15 8、背景平铺规范 . 15 9、简写. 15第 2 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28一、为什么要遵循规范 为什么要遵循规范国外专家对 Alexa 排名较前的一些网站做过测试，发现浏览一个网站的总耗时一般 80%-90%花在了前端， Web 的性能 80%-90% 有前端决定， 并且网站对搜索引擎的友好程度， 也主要取决与前端。因此，我们必须深入研究前端页面的渲染规则及搜索引擎收录规则，并 以此为依据，设置相关的规范，以开发出符合 W3C 规范、搜索引擎友好、性能极高的网站。二、目标开发符合 W3C 规范、搜索引擎友好、高性能的网站。三、受众开发团队中的所有前端工程师。四、通用规范 1、文件与目录命名规范 、文件与目录命名规范1) 文件名一律小写，必须是英文单词或产品名称的拼音，考虑到 seo，多个单词用连 字符（-）连接，而不用下划线，google 不认同“_”为连字符。 只能出现英文字 母、数字和连字符，严禁出现中文。 2) 出现版本号时，需要用字母 v 作为前缀，小版本号用点号（.）隔开，比如 global-v1.js 或 common-v2.2.js。 3) 该命名规范适用于 html, css, js, swf, php, xml, png, gif, jpg, ico 等前端 维护的所有文件类型和相关目录。 4) js 和 css 压 缩 文 件 ， 统 一 以 .min 结 尾 ， 比 如 源 码 文 件 为 style.css 和 common-v2.2.js，压缩后则为 style.min.css 和 common-v2.2.min.js 。2、文件编码约定 、前端开发涉及的所有文本文件视后台程序 而定，推荐使用 utf-8。第 3 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-283、id 和 class 命名规范 、 命名规范1) id 和 class 的命名总规则为：内容优先，表现为辅。首先根据内容来命名，比如 main_nav. 如 果 根 据 内 容 找 不 到 合 适 的 命 名 ， 可 以 再 结 合 表 现 来 定 ， 比 如 skin_blue, present_tab, col_main. 2) id 和 class 名称一律小写， 多个单词用下划线连接， 比如 recommend_presents. 3) id 和 class 名称中只能出现小写的 26 个英文字母、数字和下划线（_） ，任何其 它字符都严禁出现。 4) id 和 class 尽量用英文单词命名 。确实找不到合适的单词时，可以考虑使用产 品的中文拼音，比如 wangwang, dating. 对于中国以及特色词汇，也可以使用拼 音，比如 xiaobao, daogou. 除了产品名称和特色词汇，其它任何情况下都严禁使 用拼音。 5) 在不影响语义的情况下，id 和 class 名称中可以适当采用英文单词缩写，比如 col, nav, hd, bd, ft 等，但切忌自造缩写。 6) id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写， 比如 present, col.4、文件存储约定 、1) 网页： 根据频道的文件夹进行存储,例:商家报价频道,项目内对应的目录为/price/, 如果创建的网页是商家报价频道的,该网页就必须存储在/price/目录下面. 2) CSS： 公共文件存储在/css/common/目录下;网页私有 CSS 文件需要存储到网页文件 相对应的/CSS/的路径下,例:商家报价频道首页/css/ price/index.css 3) Image：图片文件的存储与 CSS 文件的存储规则一样. 4) Js：Js 文件的存储跟 CSS 类似.5、文件压缩 、Js 文件和 css 文件的发布文件均用“JsCompressor”工具进行压缩存储。6、使用外部 JS 和 CSS 、1) 全 部 使 用 外 联 样 式 或 的方式。 2) 所有 CSS 外联样式均放在 head 中,JS 外联样式放在网页的底部。第 4 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-283) 禁止使用import mystyle.css的方式，使用这种方式的结果是先加载网页再加 载 css。7、兼容性规范 、页面应完全兼容 IE6+和 Firefox 浏览器，及常用的分辨率。五、HTML 规范 HTML 语言规范 语言规范1、基本规范 、1) 2) 3)使用符合语义的标签书写 HTML 文档，选择恰当的元素表达所需的含义； 元素的标签和属性名必须小写，属性值必须加双引号； 元素嵌套遵循 (X)HTML Strict 嵌套规则， 推荐使用 Firefox 插件 HTML Validator 进行检查；4)正确区分自闭合元素和非自闭合元素。非法闭合包括：.、 ，非法闭合会导致页面嵌套错误问题；5) 6) 7)尽量少用 frame； 链接、 、按钮必须加上 title 属性； 使用的地方不仅都得加上 title，同时加上一段图片上的文字，如中国 钢铁交易网,并将 h1 的 text-intent:-5000px。8)尽量不用 table tr td。2、文档模板 、 page 第 5 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28 页头 主体 页尾 3、DOCTYPE 、页面文档类型统一使用 HTML5 DOCTYPE。代码如下： 4、编码 、声明方法遵循 HTML5 的规范。 5、注释 、建议对超过 10 行的页面模块进行注释，以降低开发人员的嵌套成本和后期的维 护成本。例如： . 第 6 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28HTML 元素1、结构性元素 、1) p 表示段落。只能包含内联元素，不能包含块级元素; 2) div 本身无特殊含义，可用于布局。几乎可以包含任何元素; 3) br 表示换行符; 4) hr 表示水平分割线; 5) h1-h6 表示标题。其中 h1 用于表示当前页面最重要的内容的标题; 6) blockquote 表示引用，可以包含多个段落。请勿纯粹为了缩进而使用 blockquote，大部分浏览器默认将 blockquote 渲染为带有左右缩进;7) pre 表示一段格式化好的文本;2、头部元素 、1) title 每个页面必须有且仅有一个 title 元素; 2) base 可用场景：首页、频道等大部分链接都为新窗口打开的页面; 3) link link 用于引入 css 资源时，可省去 media(默认为 all) 和 type(默认为text/css) 属性;4) style type 默认为 text/css，可以省去; 5) script type 属性可以省去; 不赞成使用 lang 属性; 不要使用古老的这种 hack 脚本, 它用于阻止第一代浏览器（Netscape 1 和 Mosaic）将脚本显示成 文字;6) noscript 在用户代理不支持 JavaScript 的情况下提供说明;3、文本元素 、1) a 存在 href 属性时表示链接，无 href 属性但有 name 属性表示锚点; 2) em,strong em 表示句意强调，加与不加会引起语义变化，可用于表示不同的心情或语调; strong 表示重要性强调，可用于局部或全局，strong 强调的是重要性，不 会改变句意;3) abbr 表示缩写; 4) sub,sup 主要用于数学和化学公式，sup 还可用于脚注; 5) span 本身无特殊含义;第 7 页/共 16 页高性能网站前端开发规范6) ins,del 分别表示从文档中增加(插入)和删除V 1.00更新时间 2011-07-284、媒体元素 、1) img 请勿将 img 元素作为定位布局的工具，不要用他显示空白图片; 必要时给 img元素增加 alt 属性; 2) object 可以用来插入 Flash;5、列表元素 、1) dl 表示关联列表，dd 是对 dt 的解释; dt 和 dd 的对应关系比较随意：一个 dt 对应多个 dd、多个 dt 对应一个 dd、多个 dt 对应多个 dd，都合法; 可用于名词/单词解 释、日程列表、站点目录;2) ul 表示无序列表; 3) ol 表示有序列表, 可用于排行榜等; 4) li 表示列表项，必须是 ul/ol 的子元素;6、表单元素 、1) 推荐使用 button 代替 input，但必须声明 type; 2) 推荐使用 fieldset，legend 组织表单 3) 表单元素的 name 不能设定为 action, enctype, method, novalidate, target,submit 会导致表单提交混乱六、JavaScript 规范 JavaScript 语言规范1) 声明变量时，必须加上 var 关键字。 2) 尽量减少全局变量的使用。 3) 语句总是以分号结尾。 4) 不要在块内声明函数。 5) 标准特性优于非标准特性（如果类库有提供，优先使用类库中的函数） 。 6) 不要封装基本类型。 7) 只在解析序列化串时使用 eval() 。第 8 页/共 16 页高性能网站前端开发规范8) 不使用 with 。 9) 减少使用 continue 和 break 。 10) 仅在函数内使用 this 。V 1.00更新时间 2011-07-2811) 使用 Array/Object 直接量，避免使用 Array/Object 构造器。 12) 禁止修改内置对象的原型。JavaScript 框架规范1) 统一使用 jquery 框架。 2) 用到 web 编辑器时，统一使用 ckeditor、ckfinder。 3) 需要用到简单 web 编辑器时，使用淘宝前端工程师写的 kissy_editor。 4) 若网站规模较大，使用淘宝的 seajs.js 框架对 js 按需加载。 5) Jquery 等框架通过 Google CDN 的方式引入，以加快加载速度，并减轻服务器的压力。各个框架的调用地址在 /上获得。6) 当站点规模较大时，引进 dojo 框架并模块化按需加载。JavaScript 编码风格1、行与缩进 、 1.1、语句行 、1) 尽可能不要让每行超过 120 个字符; 2) 语句必须以分号作为结束符, 不要忽略分号;1.2、空格 、1) 数值操作符(如, +/-/*/% 等)两边留空; 2) 赋值操作符/等价判断符两边留一空格; 3) for 循环条件中, 分号后留一空格; 4) 变量声明语句, 数组值, 对象值及函数参数值中的逗号后留一空格; 5) 空行不要有空格; 6) 行尾不要有空格; 7) 逗号和冒号后一定要跟空格;第 9 页/共 16 页高性能网站前端开发规范8) 点号前后不要出现空格; 9) 空对象和数组不需要填入空格; 10) 函数名末尾和左括号之间不要出现空格;V 1.00更新时间 2011-07-281.3、空行 、1) 逻辑上独立的代码块使用空行分隔; 2) 文件末尾留 12 个空行; 3) 不要吝啬空行。尽量使用空行将逻辑相关的代码块分割开，以提高程序的可读性。1.4、缩进 、1) 以 4 个空格为一缩进层次; 2) 变量 声明: 多个变量声明时, 适当换行表示; 参照 var 关键字, 缩进一层次; 3) 函数参数: 函数参数写在同一行上; 传递匿名函数时, 函数体应从调用该函数的左边开始缩进; 4) 数组和对象初始化时: 如果初始值不是很长, 尽量保持写在单行上; 初始值占用多行时, 缩进一层次; 对象中, 比较长的变量/数值, 不要以冒号对齐; 5) 二元/三元操作符: 操作符始终跟随前行; 实在需要缩进时, 按照上述缩进风格; 6) 表达式中的缩进同变量声明时;2、括号 、原则: 不要滥用括号, 必要时一定要使用.1) if/else/while/for 条件表达式必须有小括号; 2) 语句块必须有大括号; 3) 一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case,new) 之后, 不要使用括号;第 10 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-283、变量 、1) 变量如有较广的作用域, 使用全局变量; 如果是在类中, 可以设计成为一个类的成员;2) 函数体中, 多个局部变量集中在一起声明, 避免分散; 3) 适当延迟变量的初始化;4、字符串 、1) JS 代码中, 单行字符串使用单引号; 2) JS 代码中, 多行字符串使用 + 拼接形式, 不要使用 拼接; 3) HTML 中 Element 属性, 使用双引号;5、命名规范 、原则： * 尽量避免潜在冲突; * 精简短小, 见名知意;1) 2) 3) 4) 5) 6) 7) 普通变量统一使用驼峰形式; 常量使用全部大写, 多个单词以下划线分隔; 枚举量, 同常量; 私有变量, 属性和方法, 名字以下划线开头; 保护变量, 属性和方法, 名字同普通变量名; 方法和函数的可选参数, 名字以 opt_ 开头, 使用 param 标记说明; 方法和函数的参数个数不固定时: 可添加参数 var_args 为参数个数; 取代使用 arguments; 使用 param 标记说明; 8) Getter/Setter 命名: 以 getFoo/setFoo(value) 形式; 布尔类型使用 isFoo()/hasFoo()/canDo()/shouldDO() 也可; 9) 命名空间: 为全局代码使用命名空间, 如 sloth.*; 外部代码和内部代码使用不同的命名空间; 10) 重命名那些名字很长的变量, 不要在全局范围内创建别名, 而仅在函数块作用域中 使用; 11) 文件名应全部使用小写字符, 且不包含除 - 和 _ 外的标点符号; 12) 临时的重复变量建议以 i, j, k, ., 命名;第 11 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28七、CSS 规范 1、样式文件命名规范 、样式文件命名规范主要的 style.css 通用的 commom.css 列表的 list.css 内容页的 content.css 布局，版面 layout.css 专栏 columns.css 主题 themes.css2、选择器运用规范 、选择器运CSS Selectors 共有以下 9 种，按性能从高到低如下： 1) 2) 3) 4) 5) 6) 7) 8) 9) ID 选择符 #box 类选择符 .box 类型选择符 div 相邻兄弟选择符 h4 + #pics 子选择符 #pics li 后代 选择符 .box a 通配选择符 * 属性选择符 href=”#pic” 伪类和伪元素 a:hover为编写高效的 CSS 选择符，我们在运用选择器的时候应注意：1) 避免使用通配规则； 2) 不要限定 ID 选择符，没有必要； 3) 让规则越具体越好，不写像 ul li a 这样的长选择符，最好是直接为 a 创建一个类并加在适当的元素上； 4) 避免使用后代选择符； 5) 使用子选择符，让 css 可读性更强； 6) 依靠继承，了解哪些属性是可以继承而来的，然后避免对这些属性重复指定规则；3、CSS 样式命名规范 、 样式命名规范1) 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。 头部：header 内容：content/container第 12 页/共 16 页高性能网站前端开发规范 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录：login 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partnerV 1.00更新时间 2011-07-28第 13 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-282） 对网站中的按钮，若按钮背景统一，只是字数有不一样，那么根据按钮上的字数来定义 按钮的样式，如 button2、button3 分别表示两个字，三个字的按钮。Pading、margin 类似， 如离顶部 10px 写成.pt10、.mt10。4、CSS 书写顺序 、这里推荐先写显示属性，再写自身属性，再写文字属性；并不代表非得按这个顺序写， 但这种写法可以使 css 结构更清晰易读， 修改起来比较方便。 而且在团队项目中能更好地提 高效率。 /显示属性 display list-style position float clear /自身属性 width height margin padding border background /文本属性 color font text-decoration第 14 页/共 16 页高性能网站前端开发规范 text-align vertical-align white-space other text contentV 1.00更新时间 2011-07-285、CSS Sprite 、将相关的背景图片合并到单个 PNG8 图片里面，并通过 background-position 属性来使 用这个图片，这里可以借助“CssBgImageMergeTool”来快速合并和定位。 CSS Sprites 可以大大减少 HTTP 请求的数量，节省带宽并加快页面加载。同时，可以 避免图片闪烁，例如，如果系统或网速比较慢的时候，当鼠标放到一个按钮时加 窗体顶端下页上页 窗体底端声明: 多个变量声明时, 适当换行表示; 参照 var 关键字, 缩进一层次; 3) 函数参数: 函数参数写在同一行上; 传递匿名函数时, 函数体应从调用该函数的左边开始缩进; 4) 数组和对象初始化时: 如果初始值不是很长, 尽量保持写在单行上; 初始值占用多行时, 缩进一层次; 对象中, 比较长的变量/数值, 不要以冒号对齐; 5) 二元/三元操作符: 操作符始终跟随前行; 实在需要缩进时, 按照上述缩进风格; 6) 表达式中的缩进同变量声明时;2、括号 、原则: 不要滥用括号, 必要时一定要使用.1) if/else/while/for 条件表达式必须有小括号; 2) 语句块必须有大括号; 3) 一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case,new) 之后, 不要使用括号;第 10 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-283、变量 、1) 变量如有较广的作用域, 使用全局变量; 如果是在类中, 可以设计成为一个类的成员;2) 函数体中, 多个局部变量集中在一起声明, 避免分散; 3) 适当延迟变量的初始化;4、字符串 、1) JS 代码中, 单行字符串使用单引号; 2) JS 代码中, 多行字符串使用 + 拼接形式, 不要使用 拼接; 3) HTML 中 Element 属性, 使用双引号;5、命名规范 、原则： * 尽量避免潜在冲突; * 精简短小, 见名知意;1) 2) 3) 4) 5) 6) 7) 普通变量统一使用驼峰形式; 常量使用全部大写, 多个单词以下划线分隔; 枚举量, 同常量; 私有变量, 属性和方法, 名字以下划线开头; 保护变量, 属性和方法, 名字同普通变量名; 方法和函数的可选参数, 名字以 opt_ 开头, 使用 param 标记说明; 方法和函数的参数个数不固定时: 可添加参数 var_args 为参数个数; 取代使用 arguments; 使用 param 标记说明; 8) Getter/Setter 命名: 以 getFoo/setFoo(value) 形式; 布尔类型使用 isFoo()/hasFoo()/canDo()/shouldDO() 也可; 9) 命名空间: 为全局代码使用命名空间, 如 sloth.*; 外部代码和内部代码使用不同的命名空间; 10) 重命名那些名字很长的变量, 不要在全局范围内创建别名, 而仅在函数块作用域中 使用; 11) 文件名应全部使用小写字符, 且不包含除 - 和 _ 外的标点符号; 12) 临时的重复变量建议以 i, j, k, ., 命名;第 11 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-28七、CSS 规范 1、样式文件命名规范 、样式文件命名规范主要的 style.css 通用的 commom.css 列表的 list.css 内容页的 content.css 布局，版面 layout.css 专栏 columns.css 主题 themes.css2、选择器运用规范 、选择器运CSS Selectors 共有以下 9 种，按性能从高到低如下： 1) 2) 3) 4) 5) 6) 7) 8) 9) ID 选择符 #box 类选择符 .box 类型选择符 div 相邻兄弟选择符 h4 + #pics 子选择符 #pics li 后代 选择符 .box a 通配选择符 * 属性选择符 href=”#pic” 伪类和伪元素 a:hover为编写高效的 CSS 选择符，我们在运用选择器的时候应注意：1) 避免使用通配规则； 2) 不要限定 ID 选择符，没有必要； 3) 让规则越具体越好，不写像 ul li a 这样的长选择符，最好是直接为 a 创建一个类并加在适当的元素上； 4) 避免使用后代选择符； 5) 使用子选择符，让 css 可读性更强； 6) 依靠继承，了解哪些属性是可以继承而来的，然后避免对这些属性重复指定规则；3、CSS 样式命名规范 、 样式命名规范1) 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。 头部：header 内容：content/container第 12 页/共 16 页高性能网站前端开发规范 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录：login 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partnerV 1.00更新时间 2011-07-28第 13 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2011-07-282） 对网站中的按钮，若按钮背景统一，只是字数有不一样，那么根据按钮上的字数来定义 按钮的样式，如 button2、button3 分别表示两个字，三个字的按钮。Pading、margin 类似， 如离顶部 10px 写成.pt10、.mt10。4、CSS 书写顺序 、这里推荐先写显示属性，再写自身属性，再写文字属性；并不代表非得按这个顺序写， 但这种写法可以使 css 结构更清晰易读， 修改起来比较方便。 而且在团队项目中能更好地提 高效率。 /显示属性 display list-style position float clear /自身属性 width height margin padding border background /文本属性 color font text-decoration第 14 页/共 16 页高性能网站前端开发规范 text-align vertical-align white-space other text contentV 1.00更