WEB前端架构与规范概略.pptVIP

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