Seajs模块化开发思路a.ppt
前端模块化开发,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 规范,尝试解决的方案组件库,组件库的页面开发模式,余额宝查询/业务功能代码 iModule.init(obj:#assetQuery);,page.html,业务逻辑代码,基础UI库,常用组件库,规范代码,第三方模板库,组件化开发的新问题,依赖文件需要预先按顺序加载,引入的所有组件,相互依赖的业务代码,组件化开发的新问题,组件书写格式和基本交互规则不一致,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)/获取模块 a 的接口var a=require(a);/调用模块 a 的方法a.doSomething();/对外提供 doSomething 方法exports.doSomething=function(););,CMD,异步模块定义-AMD,define(a,b,function(a)/模块依赖在定义的时候就写好a.doSomething();b.doSomething();/对外提供 doSomething 方法exports.doSomething=function(););,AMD,两者的区别,AMD CMD,典型的实现工具是 RequireJS提供的API多而复杂，不容易上手,实现工具是 SeaJS专注于WEB浏览器端提供的API简单纯粹，容易上手目前活跃于各大互联网公司,Seajs 简单实践,定义一个 util 工具模块，并且向外提供调用接口,define(function(require,exports,module)var util=;var colorRange=0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F;util.randomColor=function()return#+colorRangeMath.floor(Math.random()*16)+colorRangeMath.floor(Math.random()*16)+colorRangeMath.floor(Math.random()*16)+colorRangeMath.floor(Math.random()*16)+colorRangeMath.floor(Math.random()*16)+colorRangeMath.floor(Math.random()*16);module.exports=util;);,util.js,#1EBE2E,提供给外部调用,定义一个app 应用模块，引入util模块的接口,define(function(require,exports,module)/引入util模块的接口 var util=require(util);var helloSeaJS=document.getElementById(hello-seajs);/调用接口的方法 helloSeaJS.style.color=util.randomColor(););,app.js,依赖模块,#1EBE2E,引入代码，在页面上执行模块,Hello Seajs/执行模块seajs.use(module/app.js);Hello SeaJS,app.html,干净，完美,网页效果演示,浏览器请求,根据模块依赖声明，seajs已经做了自动异步加载,
