Web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 35

具有梦天堂特色的 PowerPoint PPT Presentation


  • 86 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


2908369

Web前端开发规范

叫我三桂吧

  • t.qq.com/aNd1coder

具有梦天堂特色的


2908369

主要内容

  • 关于规范

  • 现状

  • 文件管理规范

  • 版本控制规范

  • 页面设计规范

  • 代码编写规范

  • 性能优化规范

  • 网站SEO规范

  • 开发调试工具

  • 未来计划

  • 互动交流


2908369

关于规范

  • 何为规范:

  • 对于某一工程作业或者行为进行定性的信息规定。

  • 主要是因为无法精准定量而形成的标准,所以,被称为规范。[百度百科: baike.baidu.com/view/113045.htm]

  • 为何规范:

  • 规范并不是一种限制,而是约定,强调团队的一致性

  • 加强团队之间的合作,提高协作效率

  • 形成一种团队文化

  • 最终是为项目服务的.我们所做的一切都是为了优化项目和流程,提高我们的工作效率


2908369

现状

  • 静态资源文件目录结构混乱

  • 与上下游流程不顺畅,没有约定的规范

  • 代码没有标准可言,命名、代码组织等不统一

  • 代码签入签出无规律导致冲突死锁

  • 网站存在性能问题,没有统一的性能优化方案

  • 网站没有针对性的做SEO,比较随意

  • 开发工具不够强大导致效率低下

  • 前端团队缺少交流,知识零散,没有积累


2908369

文件管理规范

  • 静态资源架构图


2908369

文件管理规范

  • 静态资源架构图(static)


2908369

文件管理规范

  • 静态资源架构图(www)


2908369

版本控制规范

  • 代码提交前清理无关文件(比如Dreamweaver产生_note,缩略图缓存数据文件thumb.db等等)

  • 对于CSS以及JS约定好的代码注释必须加上之后再提交到SVN,方便SVN自动更新文件编辑信息以及版本号

  • 变更文件(特别是模版文件以及重要的页面)比较大时最好做好备份工作,方便发布到正式线出现问题时快速撤回

  • 代码修改或发布前获取下最新版本,有规律的提交代码。签入代码前经过良好的测试。


2908369

页面设计规范

  • 为规范公司网页版面,防止出现页面之间的尺寸跳跃性太大,保证在主流显示器分辨率下内容正常显示(不出现横向滚动条等),规定:

    • 平台、官网页面分辨率:960px × *px

    • 专题转或页面分辨率:小于1004px ×*px

  • 静态页面上使用的图片大小必须控制在200K以内,内容图片在不影响视觉效果的前提下压缩到最小体积。(接下来改版会出各页面图片的详细规格,比如平台首页切换图片的宽高以及大小等)


2908369

页面设计规范

  • 设计师出设计稿时:

    • 最好附带上色卡并在各块区域标识出来,防止颜色丢失

    • 有状态切换的区域做好对照图,防止遗漏

    • 标识出各模块之间留白的精确像素,防止抓狂

  • 交付页面给技术时:

    • 格式化代码,让代码富有有层次感,并做适当的区域注释,方便技术快速定位并修改代码,防止标签丢失造成版面错乱难以找到问题

    • 合理的拆分页面模块,充分利用SSI,让技术知道哪些模块是可以重用


2908369

页面设计规范


2908369

代码编写规范

  • 命名规范

  • 用简短有意义的英文或者拼音(不能出现中文命名)来命名文件夹和文件,不能起有歧义的命名并统一小写;(后期可以整理一份常用的词汇表,减少为命名而浪费太多时间)

  • 编码规范

  • 目前我们的所有文件编码以及代码编码都统一为utf-8,所以出现很多诡异问题首先看看是不是编码不一致导致的

  • 注释规范

  • 给代码加上适当的注释,便于协作以及后期维护(CSS以及JS文件头注释,以及代码块注释等等,见SVN中代码段模版)


2908369

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


2908369

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


Javascript

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


2908369

性能优化规范

  • 合理布局并书写语义化的HTML,保持简洁清晰的代码是最最好的优化,也是性能优化的第一步

  • 合理利用class和id,书写高效的css选择器,合并前批量去掉最后一个分号减少文件体积,尽量不要使用expression等等,由于细节比较多可单独出一份文档

  • 由于大多都是操作DOM,所以在查找节点时书写高效的选择器是关键(jQuery);缓存频繁使用的对象、数组及相关的属性;使脚本尽可能少地运行或者不运行(按需加载,比如选项卡数据在页面加载时只加载第一个选项卡的内容数据;suggest搜索框只在用户输入内容时才去加载和执行相应的脚本),由于细节比较多可单独出一份文档(由旺旺单独整理)


2908369

性能优化规范

  • 合理的使用图片格式,并进行压缩优化,保持图片最佳视觉以及大小

  • Css,Js压缩以及合并,力求降低http请求数(合并请求方案已与运维沟通)

  • 合理的使用CSS Sprite,力求降低http请求数

  • 对于大数据,多屏页面进行数据延迟加载处理,以及图片预加载等,效果可观

  • 参考《网站性能优化的34条黄金法则》以及YSlow,PageSpeed等建议和参考


2908369

性能优化规范 - 延迟加载


2908369

性能优化规范

没人愿意等待:网页打开速度的心理学(针对网页首屏)


2908369

性能优化规范

优化代价太高

勿超前优化

有针对性的做优化…


2908369

网站SEO规范

  • 设计页面时确保有Title,Description,Keywords等完整的meta标签(目前项目组有专人整理文案)

  • 合理使用语义化标签,比如h1~h6、div、span、ul、ol、li、dl、dt、dd、em等

  • 给内容图片添加有意义的alt属性

  • 给连接添加相对应的title属性

  • 一切前端能做的所有SEO优化…


2908369

开发调试工具

  • 前端常用编辑器/IDE(开发篇)

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

  • 其他辅助工具


2908369

前端常用编辑器/IDE(开发篇)

  • 以我的使用习惯来看,一款符合前端开发的编辑器或IDE必须具备以下几点功能:

  • 超强的文本编辑能力(必须的)

  • 各种代码着色(开发中牵涉到的各种文件)

  • 代码智能提示(各种标签、属性、函数等)

  • 代码片段管理(常用代码备份:复用)

  • 能执行外部任务(构建自动化任务)

  • 能管理项目(视项目情况)

  • 各种插件以及可扩展(折腾帝必备)

  • 各种其他…


Notepad

以Notepad++为例

  • http://notepad-plus-plus.org/


2908369

类似的还有…

…喜欢折腾的同志

上辈子都是折翼的天使…


2908369

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


2908369

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

  • Firebug:为前端攻城师量身制作制定的利器


2908369

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

  • Chrome开发人员工具

    Safari用的跟Chrome一样的Web Inspector,默认是隐藏的(偏好设置>高级>勾选最后一项)


2908369

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

  • Opera Dragonly


2908369

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

  • IE Developer Toolbar


2908369

以及更多…

  • Fiddler

  • Httpwatch

  • 点亮网页

  • DynaTrace AJAX

  • YSlow

  • PageSpeed

  • F5 :实施网页样式调试器,套版最佳伴侣

  • 数不胜数的小工具…


2908369

其他辅助工具

  • 本地Nginx之SSI:模块化动静态页面,方便前期快速开发和后期维护

  • Zen Coding插件:前端必备,神一样的HTML+CSS编写速度,可集成在各种编辑器或IDE中。Notepad++演示

  • 麦库记事本:个人知识管理软件,工作日志

  • 你还有啥小工具拿来分享分享呗?


2908369

未来计划

  • 前端组件化:由于公司目前各网站之间风格差别很大,导致模块化之路比较难走,但是后期可以通过协商得出一整套UI方案,进而实行前端的UI组件化,提高开发效率以及一致性。

  • 前端自动化:当公司项目越来越多时,开发,调试,打包发布等重复的任务会占去大量的时间,如果有这样一个自动化工具帮助我们构建这一系列任务,那么就可以从这些繁复的工作中解脱出来,把时间利用在更有价值的事情上。


2908369

未来计划

  • 知识管理平台:以blog或者wiki的形式总结、分享和讨论,知识储备。


2908369

互动交流

亲,你是不是有什么话要说?


  • Login