1、WEB前端架构与规范概略,何仕春2013-5-12,WEB前端架构与规范概略,1-文件组织,2-编码规范,3-构建组件库,4-文件自动化,1.1-命名,命名总则：1.英文语义； 2.频道（前缀）- 功能或页面名称-* ; 3.中划线分隔（JS变量除外）,变量,属性命名： css: cls-整站公共类 btn-整站公用按钮 btn-channel-频道内共用的按钮 ui-整站公用ui模块 ui-channel频道内共用ui模块 以modelName-为的前缀的UI模块 js:以ns为前缀的对象功能模块 HTML:以J_,data-为前缀的JS钩子,1.2.1-img文件细化,目录，前缀说明： c
2、omm:整站公用图片 sprite:合并背景图片 temp:用于测试的临时图片，可删除 channel:频道内共用图片 festive:频道内的一些节日，活动经常替换的图片,1.2.2-css文件细化,目录，前缀说明： comm:整站公用css channel:频道内共用css,channel-comm.css,1.2.3-js文件细化,目录，前缀说明： comm:整站公用js inf:统计代码 channel:频道内的页面js plugins:jQuery插件,2.1-HTML编码规范,1.统一声明文档类型，META设置，编码类型（UTF-8），代码格式（LF(Unix)）2.结构扁平化，标
3、签语义化3.只许引用俩个阻塞式加载的JS文件,并行引用其它JS文件4.给元素上钩子统一用J_5.classname不超过三个,2.2.1-js编码规范,2.2.2-js编码规范,2.2.3-css编码规范,3.1-什么是组件,我们之所以进行代码的规范，将结构（HTML），外观（CSS），交互（JS）分离出来，是为了更便于维护与将来的开发工作，每个页面由不同的UI模块组装而成，大大加速前端开发效率！当然还需要UI设计师的默契配合，规范PSD文档与合理的标注，我们最终的目的是打造一套可移植，快速开发，具有交互功能的UI库,3.2.1-UI库,构建比较完整系统的组件库，第一步需要完成可重用的UI模板
4、库,具体做法请参考：http:/ 2.开发JS交互应用 3.组件说明文档,以一个常见的TAB组件为例：,HTML代码： . ,Js代码$(#tab1).Tab(curCls:cur,effect:fadeIn);,4 -文件自动化,选用近年比较流行的基于node.js的Grunt任务构建，以下是其常用插件：,grunt-contrib-coffee - 把 CoffeeScript 编译为 JavaScriptgrunt-contrib-compass - 把 Compass 编译为 CSSgrunt-contrib-concat - 合并文件grunt-contrib-connect - 启
5、动一个 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 编译为 CSSgrunt-contrib-nodeunit - 运行 Nodeunit 单元测试grunt-contrib-watch - 当文件发生变化时运行与定义任务grunt-contrib-requirejs - 使用 r.js 优化 RequireJS 项目grunt-contrib-uglify - 用 UglifyJS 压缩文件grunt-contrib-yuidoc - 编译 YUIDocs 文档,详细说明：https:/ .1-常用测试工具,QUnit：基于jQuery的JavaScript单元测试工具,PhantomJS：JavaScript API的无界面WebKit ，页面自动化操作测试,END,何仕春2013-5-12,
