Seajs模块化开发思路(齐继超)精选.ppt

前端模块化开发 CMCCRMSRD-HZNewBusiness Dept . 2014.04.04 齐继超 —Seajs 模块化实践 传统的开发模式 根据页面功能来划分不同的业务区域 开发人员分别编写CSS，HTML，JS实现业务功能 最后将所有的业务组织起来，完善整个系统 业务划分 传统开发模式常见的问题 命名冲突 代码冗余 不易维护 无法协作 编码容易，维护不易，且行且珍惜 代码和我冲突了 这段代码可以复用吗 天啊，代码有一千多行 尝试解决的方案——组件化 定制编码规范 基础 UI 组件 丰富 JS 组件 精选第三方组件 CSS规范 编码规范 JS规范 UI 库 Reset Layout Form Table Msg JS 组件 Tabs Scrollup Modal Collspse Tooltip HTML规范 工程师规范 artDialog 精选第三方 Handlebars omGrid 关注命名规则 快速搭建页面 常用组件复用 稳定高效 尝试解决的方案——组件化 组件使用方便 接口清晰易扩展 代码稳定质量高 我也要写组件 尝试解决的方案——组件库 JavaScript 规范 var org = {}; var org.Utils = {};var org.Utils.tabs=function(arr){ // 实现代码 } JavaScript .ui-tabs { border:1px solid #ccc } .ui-tabs-light { border:1px solid #d9d9d9 } .ui-tabs-title { border-bottom:1px solid #ccc; } .ui-tabs-title h3 { border-bottom:1px solid #eee; } CSS CSS 规范 尝试解决的方案——组件库 组件库的页面开发模式 !doctype html head title余额宝查询/title link rel=stylesheet href=lib/imui.all.css / script src=lib/tabs.js/script script src=lib/handlebars.js/script script type=text/javascript src=function1.js /script div id =assetQuery/div /head script // 业务功能代码 iModule.init({obj:#assetQuery}); /script /html page.html 业务逻辑代码 基础UI库 常用组件库 规范代码 第三方模板库 组件化开发的新问题 依赖文件需要预先按顺序加载 head script src=lib/core.js/script script src=lib/layer.js/script script src=lib/drag.js/script script src=lib/dialog.js/script script type=text/javascript src=function1.js /script script type=text/javascript src=function2.js /script script type=text/javascript src=function3.js /script script type=text/javascript src=function4.js /script /head 引入的所有组件 相互依赖的业务代码 组件化开发的新问题 组件书写格式和基本交互规则不一致 var org = {}; var org.Utils = {};var org.Utils.tabs=function(arr){ // 实现代码 } JavaScript (function($){ $.fn.Tabs = function(options){ // 实现代码 }; })(jQuery); jQuery 尝试解决的方案 —— 模块化 将一段JavaScript代码，进行统一的格式书写 通过基本的交互规则，模块之间能彼此引用，协同工作。 通过模块加载器进行异步加载依赖模块 通用模块定义 - CMD define(function(require, exports, module) {