资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,前端模块化开发,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 规范,尝试解决的方案组件库,组件库的页面开发模式,余额宝查询,/ 业务功能代码,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已经做了自动异步加载,感谢聆听,
展开阅读全文