WEB 前端架构与规范概略

1. WEB前端架构与规范概略 何仕春 2013-5-12

2. WEB前端架构与规范概略 1-文件组织 2-编码规范 3-构建组件库 4-文件自动化

3. 1.1-命名 命名总则：1.英文语义； 2.频道（前缀）- 功能[或页面名称][-*] ; 3.中划线分隔（JS变量除外） 变量,属性命名： css: cls-整站公共类 btn-整站公用按钮 btn-channel-频道内共用的按钮 ui-整站公用ui模块 ui-channel频道内共用ui模块 以modelName-为的前缀的UI模块 js:以ns为前缀的对象功能模块 HTML:以J_,data-为前缀的JS钩子

4. 1.2.1-img文件细化 目录，前缀说明： comm:整站公用图片 sprite:合并背景图片 temp:用于测试的临时图片，可删除 channel:频道内共用图片 festive:频道内的一些节日，活动经常替换的图片

5. 1.2.2-css文件细化 目录，前缀说明： comm:整站公用css channel:频道内共用css,channel-comm.css

6. 1.2.3-js文件细化 目录，前缀说明： comm:整站公用js inf:统计代码 channel:频道内的页面js plugins:jQuery插件

7. 2.1-HTML编码规范 1.统一声明文档类型，META设置，编码类型（UTF-8），代码格式（LF(Unix)） 2.结构扁平化，标签语义化 3.只许引用俩个阻塞式加载的JS文件,并行引用其它JS文件 4.给元素上钩子统一用"J_" 5.classname不超过三个

8. 2.2.1-js编码规范

9. 2.2.2-js编码规范

10. 2.2.3-css编码规范

11. 3.1-什么是组件 我们之所以进行代码的规范，将结构（HTML），外观（CSS），交互（JS）分离出来，是为了更便于维护与将来的开发工作，每个页面由不同的UI模块组装而成，大大加速前端开发效率！当然还需要UI设计师的默契配合，规范PSD文档与合理的标注，我们最终的目的是打造一套可移植，快速开发，具有交互功能的UI库

12. 3.2.1-UI库 构建比较完整系统的组件库，第一步需要完成可重用的UI模板库 具体做法请参考：http://work.uivita.com/2013/my/index.html

13. 3.2.2-组件库说明文档 1.搭好UI库  2.开发JS交互应用 3.组件说明文档 以一个常见的TAB组件为例： HTML代码： <div id="xxx"> <ul> <li></li> <li></li> ...... </ul> <div></div> <div class="none"></div> <div class="none"></div> ....... </div> Js代码 $("#tab1").Tab({ curCls:"cur", effect:"fadeIn" });

14. 4 -文件自动化 选用近年比较流行的基于node.js的Grunt任务构建，以下是其常用插件： 详细说明：https://github.com/gruntjs/grunt-contrib grunt-contrib-coffee - 把 CoffeeScript 编译为 JavaScript grunt-contrib-compass - 把 Compass 编译为 CSS grunt-contrib-concat - 合并文件 grunt-contrib-connect - 启动一个 Web 服务 grunt-contrib-csslint - 检查 CSS 文件 grunt-contrib-handlebars - 预编译 Handlebar 模板 grunt-contrib-htmlmin - 压缩 HTML 代码 grunt-contrib-imagemin - 压缩 PNG 和 JPEG 图片 grunt-contrib-jshint - 用 JSHint 检查文件 grunt-contrib-less - 把 LESS 编译为 CSS grunt-contrib-nodeunit - 运行 Nodeunit 单元测试 grunt-contrib-watch - 当文件发生变化时运行与定义任务 grunt-contrib-requirejs - 使用 r.js 优化 RequireJS 项目 grunt-contrib-uglify - 用 UglifyJS 压缩文件 grunt-contrib-yuidoc - 编译 YUIDocs 文档

15. 4 .1-常用测试工具 QUnit： 基于jQuery的JavaScript单元测试工具 PhantomJS： JavaScript API的无界面WebKit，页面自动化操作测试

16. END 何仕春 2013-5-12