文档介绍：一枚FE手艺人
Web前端开发规范
主要内容
关于规范
现状
文件管理规范
版本控制规范
页面设计规范
代码编写规范
性能优化规范
网站SEO规范
开发调试工具
未来计划
互动交流
关于规范
何为规范:
对于某一工程作业或者行为进行定性的信息规定。
主要是因为无法精准定量而形成的标准,所以,被称为规范。[百度百科: baike./view/]
为何规范:
规范并不是一种限制,而是约定,强调团队的一致性
加强团队之间的合作,提高协作效率
形成一种团队文化
,提高我们的工作效率
现状
静态资源文件目录结构混乱
与上下游流程不顺畅,没有约定的规范
代码没有标准可言,命名、代码组织等不统一
代码签入签出无规律导致冲突死锁
网站存在性能问题,没有统一的性能优化方案
网站没有针对性的做SEO,比较随意
开发工具不够强大导致效率低下
前端团队缺少交流,知识零散,没有积累
文件管理规范
静态资源架构图
文件管理规范
静态资源架构图(static)
文件管理规范
静态资源架构图(www)
版本控制规范
代码提交前清理无关文件(比如Dreamweaver产生_note,)
对于CSS以及JS约定好的代码注释必须加上之后再提交到SVN,方便SVN自动更新文件编辑信息以及版本号
变更文件(特别是模版文件以及重要的页面)比较大时最好做好备份工作,方便发布到正式线出现问题时快速撤回
代码修改或发布前获取下最新版本,有规律的提交代码。签入代码前经过良好的测试。
页面设计规范
为规范公司网页版面,防止出现页面之间的尺寸跳跃性太大,保证在主流显示器分辨率下内容正常显示(不出现横向滚动条等),规定:
平台、官网页面分辨率:960px × *px
专题转或页面分辨率:小于1004px ×*px
静态页面上使用的图片大小必须控制在200K以内,内容图片在不影响视觉效果的前提下压缩到最小体积。(接下来改版会出各页面图片的详细规格,比如平台首页切换图片的宽高以及大小等)
页面设计规范
设计师出设计稿时:
最好附带上色卡并在各块区域标识出来,防止颜色丢失
有状态切换的区域做好对照图,防止遗漏
标识出各模块之间留白的精确像素,防止抓狂
交付页面给技术时:
格式化代码,让代码富有有层次感,并做适当的区域注释,方便技术快速定位并修改代码,防止标签丢失造成版面错乱难以找到问题
合理的拆分页面模块,充分利用SSI,让技术知道哪些模块是可以重用