1 / 35

具有梦天堂特色的

Web 前端开发规范. 叫我 三桂 吧. t.qq.com/aNd1coder. 具有梦天堂特色的. 主要内容. 关于规范 现状 文件管理规范 版本控制 规范 页面设计规范 代码编写规范 性能优化规范 网站 SEO 规范 开发调试工具 未来计划 互动交流. 关于规范. 何为规范： 对于某一工程作业或者行为进行定性的信息规定。 主要是因为无法精准定量而形成的标准，所以，被称为规范。 [ 百度百科 : baike.baidu.com/view/113045.htm ] 为何规范： 规范并不是一种限制，而是约定，强调团队的一致性

floria
Download Presentation

具有梦天堂特色的

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web前端开发规范 叫我三桂吧 • t.qq.com/aNd1coder 具有梦天堂特色的

  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. 互动交流 亲，你是不是有什么话要说?

More Related