高粒度模块化的前端开发

FRONT-ENDMODULARDEVELOPMENT|CHINAFACE.COM@2012/03/2412年3月26日星期⼀一AboutMe12年3月26日星期⼀一CHINAFACE12年3月26日星期⼀一12年3月26日星期⼀一CSS/*--HTML--*/linkhref=domain/assets/css/global.cssrel=stylesheet/linkhref=domain/assets/css/page.cssrel=stylesheet//*--reset--*/html,body....{...}/*--header--*/#header{...}#body{...}/*--mod--*/.mod{...}.mod.hd{...}.mod.bd{...}/*--login--*/＃login-form{...}selector{...}global.csspage.css12年3月26日星期⼀一/*--HTML--*/linkhref=combobase?files=domain/assets/css/reset.css|domain/assets/css/header.css|domain/assets/css/mod.css|domain/assets/css/page.cssrel=stylesheet//*--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--*/scriptsrc=domain/assets/js/jquery-1.x.js/scriptscriptsrc=domain/assets/js/common.js/scriptscriptsrc=domain/assets/js/jquery.ui.x.js/scriptscriptsrc=domain/assets/js/xx.js/script/headbody...script(function(){//to  change  world.})();/script/body/html12年3月26日星期⼀一/*--HTML--*/scriptsrc=combobase?files=domain/assets/js/jquery-1.x.js|domain/assets/js/common.js|domain/assets/js/jquery.ui.x.js|domain/assets/js/xx.js/script/headbody...script(function(){//to  change  world.})();/script/body/html12年3月26日星期⼀一/*--HTML--*/scriptsrc=domain/Seed.js/script/headbody...scriptMod.require(‘a.js,b.js’).doSomething(function(){//todo});/script/body/html//path1/a.jsMod.define(function(){/*...*/}).require(‘c.js’,‘d.js’);c.jsd.jsparse/execparse/exece.jsinline codea.jsb.jsparse/execparse/exec...大量匿名模块不便管理请求数猛增12年3月26日星期⼀一ChinaFace12年3月26日星期⼀一文本12年3月26日星期⼀一年3月26日星期⼀一年3月26日星期⼀一年3月26日星期⼀一Module年3月26日星期⼀一CONTROLLERVISUALSTRUCTURE12年3月26日星期⼀一DesignerImagesfrom:年3月26日星期⼀一STRUCTUREVISUALCONTROLLER12年3月26日星期⼀一12年3月26日星期⼀一headerPersonal-cardtags&lbsTimershaftTimelineWrapTimeline&Feedrecom12年3月26日星期⼀一修改背景12年3月26日星期⼀一ChinaFace12年3月26日星期⼀一Lessphp+12年3月26日星期⼀一TEMPLATEVISUALCONTROLLERLessismore核心reset/variables/classes文档full-screen/fixed-screen结构ms-grid/grid布局layout容器box/mod/...元素icon/form/ajax/button模块block-base应用pageuse12年3月26日星期⼀一MocaLessismoreImagesfrom:年3月26日星期⼀一variables.lessclasses.lesscolor.lessreset.lessMocaLessismoreImagesfrom:年3月26日星期⼀一MocaLessismoreImagesfrom:年3月26日星期⼀一form-element.less......button-small.lessbutton-base.lessicon-base.lessicon-timeline.lessMocaLessismoreImagesfrom:年3月26日星期⼀一Moca/*--base/variables.less--*/@version:“?v=0.1.1”;@imgPath:“/img/”;/*--base/color.less--*///ColorSystemForChinaFace@mLink:“#b40000”;/*--base/classes.less--*/.ClearFix(){zoom:1;&:before,&:after{content:\0020;display:block;height:0;overflow:hidden;}&:after{clear:both;}}LessismoreLess日星期⼀一/***File:module/register.less*/@import../base/variable;@import../element/form-element;.form-input{.efInput(220px)}LessismoreLess*--element/form-element--*/.efInput(@mWidth:218px,@mHeight:auto,@mSize:14px,@mBorderColor:#d4d4d4){width:@mWidth;......;background:url('@{imgPath}input-bg.png@{version}')no-repeat;&:focus{border-color:#a1a1a1;}}12年3月26日星期⼀一MocaLessismoreLessPHP*--config.php--*/$less_path='/opt/**/**/r.chinaface.com/moca/usage';//cache路径$cache_path='/opt/**/**/cache/moca';//本地调试开关$enable_cache=false;$enable_compress=true;/*--smartyhomepage.php--*/publicfunctionprocess(){$this-tpl_engine-assign('css_insert_point','homepage');}/*--smartymeta.tpl--*/linkhref=?$cdn??$css_insert_point??$ver?rel=stylesheet/Smartylinkhref=http//r.chinaface.com/less/?f=homepage&v=1.2.7rel=stylesheet/12年3月26日星期⼀一MocaLessismoreImagesfrom:年3月26日星期⼀一MocaLessismoreImagesfrom:年3月26日星期⼀一MocaLessismoreImagesfrom:年3月26日星期⼀一MocaLessismoreImagesfrom: