1. Web前端开发规范

2. 主要内容
 关于规范
 现状
 文件管理规范
 版本控制规范
 页面设计规范
 代码编写规范
 性能优化规范
 网站SEO规范
 开发调试工具
 未来计划
 互动交流

3. 关于规范
 何为规范：
 对于某一工程作业或者行为进行定性的信息规定。
 主要是因为无法精准定量而形成的标准，所以，被称为
规范。[百度百科: baike.baidu.com/view/113045.htm]
 为何规范：
 规范并不是一种限制，而是约定，强调团队的一致性
 加强团队之间的合作，提高协作效率
 形成一种团队文化，积累知识
 规范最终是为项目服务的．我们所做的一切都是为了优
化项目和流程，提高我们的工作效率

4. 现状
 静态资源文件目录结构混乱
 与上下游流程不顺畅，没有约定的规范
 代码没有标准可言，命名、代码组织等不统一
 代码签入签出无规律导致冲突死锁
 网站存在性能问题，没有统一的性能优化方案
 网站没有针对性的做SEO，比较随意
 开发工具不够强大导致效率低下
 前端团队缺少交流，知识零散，没有积累

5. 文件管理规范
 静态资源架构图

6. 文件管理规范
 静态资源架构图(static)

7. 文件管理规范
 静态资源架构图(www)

8. 版本控制规范
 代码提交前清理无关文件(比如Dreamweaver
产生_note，缩略图缓存数据文件thumb.db等
等)
 对于CSS以及JS约定好的代码注释必须加上之
后再提交到SVN，方便SVN自动更新文件编辑
信息以及版本号
 变更文件(特别是模版文件以及重要的页面)比
较大时最好做好备份工作，方便发布到正式线
出现问题时快速撤回
 代码修改或发布前获取下最新版本，有规律的
提交代码。签入代码前经过良好的测试。

9. 页面设计规范
 为规范公司网页版面，防止出现页面之间的尺
寸跳跃性太大，保证在主流显示器分辨率下内
容正常显示（不出现横向滚动条等），规定：
• 平台、官网页面分辨率：960px × *px
• 专题转或页面分辨率：小于1004px ×*px
 静态页面上使用的图片大小必须控制在
200K以内，内容图片在不影响视觉效果的
前提下压缩到最小体积。(接下来改版会出
各页面图片的详细规格，比如平台首页切换
图片的宽高以及大小等)

10. 页面设计规范
 设计师出设计稿时：
 最好附带上色卡并在各块区域标识出来，防止颜
色丢失
 有状态切换的区域做好对照图，防止遗漏
 标识出各模块之间留白的精确像素，防止抓狂
 交付页面给技术时：
 格式化代码，让代码富有有层次感，并做适当的
区域注释，方便技术快速定位并修改代码，防止
标签丢失造成版面错乱难以找到问题
 合理的拆分页面模块，充分利用SSI，让技术知
道哪些模块是可以重用

11. 页面设计规范

12. 代码编写规范
 命名规范
 用简短有意义的英文或者拼音（不能出现中文命名）来
命名文件夹和文件，不能起有歧义的命名并统一小写；
(后期可以整理一份常用的词汇表,减少为命名而浪费太多
时间)
 编码规范
 目前我们的所有文件编码以及代码编码都统一为
utf-8,所以出现很多诡异问题首先看看是不是编码
不一致导致的
 注释规范
 给代码加上适当的注释，便于协作以及后期维护(CSS以
及JS文件头注释，以及代码块注释等等，见SVN中代码
段模版)

13. 代码编写规范 - HTML注释示例

14. 代码编写规范 - CSS注释示例

15. 代码编写规范 - Javascript注释示例


16. 性能优化规范
 合理布局并书写语义化的HTML，保持简洁清晰的
代码是最最好的优化，也是性能优化的第一步
 合理利用class和id，书写高效的css选择器，合并
前批量去掉最后一个分号减少文件体积，尽量不
要使用expression等等，由于细节比较多可单独
出一份文档
 由于大多都是操作DOM，所以在查找节点时书写
高效的选择器是关键(jQuery)；缓存频繁使用的对
象、数组及相关的属性；使脚本尽可能少地运行
或者不运行(按需加载,比如选项卡数据在页面加载
时只加载第一个选项卡的内容数据；suggest搜索
框只在用户输入内容时才去加载和执行相应的脚
本)，由于细节比较多可单独出一份文档（由旺旺
单独整理）

17. 性能优化规范
 合理的使用图片格式，并进行压缩优化，保持
图片最佳视觉以及大小
 Css，Js压缩以及合并，力求降低http请求数
(合并请求方案已与运维沟通)
 合理的使用CSS Sprite，力求降低http请求数
 对于大数据，多屏页面进行数据延迟加载处理，
以及图片预加载等，效果可观
 参考《网站性能优化的34条黄金法则》以及
YSlow，PageSpeed等建议和参考

18. 性能优化规范 - 延迟加载


19. 性能优化规范
没人愿意等待：网页打开速度的心理学(针对网页首屏)

20. 性能优化规范
优化代价太高
勿超前优化
有针对性的做优化…

21. 网站SEO规范
 设计页面时确保有Title,Description,Keywords
等完整的meta标签(目前项目组有专人整理文
案)
 合理使用语义化标签，比如h1~h6、div、
span、ul、ol、li、dl、dt、dd、em等
 给内容图片添加有意义的alt属性
 给连接添加相对应的title属性
 一切前端能做的所有SEO优化…

22. 开发调试工具
 前端常用编辑器/IDE(开发篇)
 IDE自带/浏览器插件(调试篇)
 其他辅助工具

23. 前端常用编辑器/IDE(开发篇)
 以我的使用习惯来看,一款符合前端开发
的编辑器或IDE必须具备以下几点功能：
 超强的文本编辑能力(必须的)
 各种代码着色(开发中涉及到的各种文件)
 代码智能提示(各种标签、属性、函数等)
 代码片段管理(常用代码备份：复用)
 能执行外部任务(构建自动化任务)
 能管理项目(视项目情况)
 各种插件以及可扩展(折腾帝必备)
 各种其他…

24. 以Notepad++为例
 http://notepad-plus-plus.org/

25. 类似的还有…

26. IDE自带/浏览器插件(调试篇)

27. IDE自带/浏览器插件(调试篇)
 Firebug：为前端攻城师量身定制的利器

28. IDE自带/浏览器插件(调试)
 Chrome开发人员工具
Safari用的跟Chrome一样的Web Inspector,默认是隐藏的(偏好设置>高级
>勾选最后一项)

29. IDE自带/浏览器插件(调试)
 Opera Dragonly

30. IDE自带/浏览器插件(调试)
 IE Developer Toolbar

31. 以及更多…
 Fiddler
 Httpwatch
 点亮网页
 DynaTrace AJAX
 YSlow
 PageSpeed
 F5 ：实施网页样式调试器，套版最佳伴侣
 数不胜数的小工具…

32. 其他辅助工具
 本地Nginx之SSI：模块化动静态页面,方便前
期快速开发和后期维护
 Zen Coding插件：前端必备，神一样的
HTML+CSS编写速度，可集成在各种编辑器
或IDE中。Notepad++演示
 麦库记事本：个人知识管理软件，工作日志
 你还有啥小工具拿来分享分享呗?

33. 未来计划
 前端组件化：由于公司目前各网站之间风格差
别很大，导致模块化之路比较难走，但是后期
可以通过协商得出一整套UI方案，进而实行前
端的UI组件化，提高开发效率以及一致性。
 前端自动化：当公司项目越来越多时，开发，
调试，打包发布等重复的任务会占去大量的时
间，如果有这样一个自动化工具帮助我们构建
这一系列任务，那么就可以从这些繁复的工作
中解脱出来，把时间利用在更有价值的事情上。

34. 未来计划
 知识管理平台：以blog或者wiki的形式总结、
分享和讨论，知识储备。

35. 互动交流
亲，你是不是有什么话要说?