《高粒度模块化的前端开发》由会员分享，可在线阅读，更多相关《高粒度模块化的前端开发（88页珍藏版）》请在金锄头文库上搜索。
1、高粒度模块化DE 前端开发蒋吉兵FRONT-END MODULAR DEVELOPMENT | CHINAFACE.COM 集冰2012/03/2412年3月26日星期一About Me蒋吉兵 Eddy or JJB Weibo: 集冰 Email: Website: 12年3月26日星期一前端的模块化解决方案环境配置CHINAFACE前端架构现状性能优化12年3月26日星期一常见的前端模块化12年3月26日星期一传统CSS模块组织/*- HTML -*/*- reset -*/ html,body./*- header -*/ #header. #body./*- mod -*/ .mod
2、 . .mod .hd . .mod .bd . /*- login -*/ login-form. selector.global.csspage.css12年3月26日星期一再进一步/*- HTML -*/*- reset -*/ html,body./*- header -*/ #header. #body./*- mod -*/ .mod . .mod .hd . .mod .bd . /*- login -*/ login-form. select.reset.cssheader.csspage.cssmod.css12年3月26日星期一传统js模块组织/*- HTML -*/.(f
3、unction()/to change world. )();12年3月26日星期一再进一步/*- HTML -*/.(function()/to change world. )();12年3月26日星期一再再进一步/*- HTML -*/.Mod.require(a.js,b.js).doSomething(function()/to do );/path1/a.js Mod.define(function()/*.*/).require(c.js,d.js);c.jsd.jsparse/execparse/exece.jsinline codea.jsb.jsparse/execparse
4、/exec.大量匿名模块不便管理 请求数猛增12年3月26日星期一ChinaFace前端模块化模块划分12年3月26日星期一文本模块化12年3月26日星期一模块化http:/ Module可组合、分解和更换的单元可组成系统的、具有某种确定独立功能的半 自律性的子系统是较大系统的独立部件功能、状态与接口反映外部特性，逻辑反映 内部特性http:/ from: http:/ managerWeb DeveloperVISUALstructureControllerVISUAL ControllerstructureVISUALstructureController他们的看法12年3月26日星期一前
5、端模块类型划分控制器外观结构展示 功能前端模块分为：展示模块和功能模块STRUCTUREVISUALCONTROLLER12年3月26日星期一前端模块抽离原则充分了解产品需求，熟读PRD； 深度挖掘产品需求，提炼模块； 从视觉规范中抽离高耦合、高相似的部分； 模块化业务需求中的重合部分； 暴露接口实现模块间通讯；12年3月26日星期一headerChinaF 展示模块划分Personal-cardtags imgPath: “/img/”;/*- base/color.less -*/ /ColorSystem For ChinaFace mLink: “#b40000”;/*- base/c
6、lasses.less -*/ .ClearFix()zoom:1;display: block; height: 0; overflow: hidden; Less is moreLess http:/www.lesscss.org12年3月26日星期一/* File: module/register.less*/ import “./base/variable“; import “./element/form-element“; .form-input.efInput(220px) 依赖与继承Less is moreLess http:/www.lesscss.org/*- element
7、/form-element -*/ .efInput(mWidth:218px,mHeight:auto,mSize:14px,mBorderColor:#d4d4d4)width:mWidth;. .;background: url(imgPathinput-bg.pngversion) no-repeat; 12年3月26日星期一Moca模块引擎配置Less is moreLessPHP http:/ config.php -*/ $less_path = /opt/www/*/*/ /cache路径 $cache_path = /opt/www/*/*/cache/moca; /本地调试
8、开关 $enable_cache = false; $enable_compress = true;/*- smarty homepage.php -*/ public function process()$this - tpl_engine - assign(css_insert_point, homepage); /*- smarty meta.tpl -*/ “ rel=“stylesheet“/Smarty12年3月26日星期一Moca加载流程 Less is moreImages from:http:/ Less is moreImages from:http:/ Less is m
9、oreImages from:http:/ Less is moreImages from:http:/ Less is moreImages from:http:/ Less is moreImages from:http:/ Less is moreImages from:http:/ UI Library基于YUI3、增强YUI3量身定制的Loader完备的框架、快速开发利器一个变种的YUIYUI3 http:/ 关键词12年3月26日星期一展示模块模块划分功能模块Eva UI LibraryYUI3.4.1YUI BaseGetLoaderEventDomNodeOOPPluginWi
10、dgetIOAnimAttributeJSONP.组件基础核心commonsideanalysis.应用模块组件种子ebaseEva1.0.4xpostswitchableuploaderflyoutmsgboxlocalStorage.publisherrich-editorslideshowcommenttimershaft.EvabuttonloaderTEMPLATEVISUALCONTROLLER12年3月26日星期一switchable.jsEva资源组织Images from:http:/ UI Libraryjs/1.0.4/build/msgbox-css.cssmsgbox.jsplug-buttonswitchable.xdr-postmsgboxname-autocompleteevayuiusagevendor eva-min.js12年3月26日星期一node-base-min.jsnode-base.jsnode-ba
