高粒度模块化的前端开发

31,726 views
32,518 views

Published on

介绍模块化前端开发的实践过程,包括模块的划分、组织、继承、调用。介绍Moca和EVA框架在前端模块化开发过程中的作用以及优化手段;另外还介绍了ChinaFace.com前端团队架构

Published in: Technology
4 Comments
87 Likes
Statistics
Notes
  • it's cool!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 因为使用特殊字体的关系,key和ppt文件显示不正常,提供 pdf文件下载 http://vdisk.weibo.com/s/3uX0w
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 大师,为啥不提供下载呢?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
31,726
On SlideShare
0
From Embeds
0
Number of Embeds
14,894
Actions
Shares
0
Downloads
0
Comments
4
Likes
87
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 高粒度模块化的前端开发

    1. 1. 高粒度模块化 DE 前端开发 蒋吉兵2012/03/24 FRONT-END MODULAR DEVELOPMENT | CHINAFACE.COM @集冰
    2. 2. About Me蒋吉兵 Eddy or JJBWeibo: @集冰Email: idd.chiang@gmail.comWebsite: www.microidc.com
    3. 3. 现状前端的模块化解决方案环境配置性能优化CHINAFACE前端架构
    4. 4. 常见的前端模块化
    5. 5. 传统CSS模块组织/*-- reset --*/html,body....{...} global.css/*-- header --*/#header{...}#body{...}/*-- mod --*/.mod{ ... }.mod .hd{ ... }.mod .bd{ ... }/*-- login --*/#login-form{...} page.cssselector{...}/*-- HTML --*/<link href="domain/assets/css/global.css" rel="stylesheet"/><link href="domain/assets/css/page.css" rel="stylesheet"/>
    6. 6. 再进一步/*-- reset --*/html,body....{...} reset.css/*-- header --*/#header{...} header.css#body{...}/*-- mod --*/ mod.css.mod{ ... }.mod .hd{ ... }.mod .bd{ ... }/*-- login --*/#login-form{...} page.cssselect{...}/*-- HTML --*/<link href="combobase?files=domain/assets/css/reset.css|domain/assets/css/header.css|domain/assets/css/mod.css|domain/assets/css/page.css"rel="stylesheet"/>
    7. 7. 传统js模块组织/*-- HTML --*/<script src="domain/assets/js/jquery-1.x.js" ></script><script src="domain/assets/js/common.js" ></script><script src="domain/assets/js/jquery.ui.x.js" ></script><script src="domain/assets/js/xx.js" ></script></head><body>...<script>(function(){ //to change world.})();</script></body></html>
    8. 8. 再进一步/*-- HTML --*/<script src="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></head><body>...<script>(function(){ //to change world.})();</script></body></html>
    9. 9. 再再进一步 //path1/a.js Mod.define(function(){/*...*/}).require(‘c.js’,‘d.js’); /*-- HTML --*/ <script src="domain/Seed.js" ></script> </head> <body> ... <script> Mod.require(‘a.js,b.js’).doSomething(function(){ //to do }); </script> </body> </html> 大量匿名模块不便管理 parse/exec parse/exec 请求数猛增 ...inline code a.js c.js parse/exec parse/exec b.js d.js e.js
    10. 10. ChinaFace前端模块化 模块划分
    11. 11. 文本 模块化
    12. 12. 模块化http://www.flickr.com/photos/ejpphoto/2314610838/
    13. 13. 模块化http://www.flickr.com/photos/decojim/969950876/sizes/o/in/photostream/
    14. 14. 模块化http://www.flickr.com/photos/olaborda/2078050462/sizes/l/in/photostream/
    15. 15. 模块 Module可组合、分解和更换的单元可组成系统的、具有某种确定独立功能的半自律性的子系统是较大系统的独立部件功能、状态与接口反映外部特性,逻辑反映内部特性 http://baike.baidu.com/view/182267.htm
    16. 16. 前端设计三大要素 VISUAL 外观 STRUCTURE CONTROLLER 结构 控制器
    17. 17. 他们的看法 VISUAL Designer structure Controller product manager VISUAL Controller structure Web Developer VISUAL structure Controller Images from: http://www.zcool.com.cn/gfx/ZMjAxNjg0.html
    18. 18. 前端模块类型划分 VISUAL 展示 外观 功能 STRUCTURE CONTROLLER 结构 控制器 前端模块分为:展示模块和功能模块
    19. 19. 前端模块抽离原则・充分了解产品需求,熟读PRD;・深度挖掘产品需求,提炼模块;・从视觉规范中抽离高耦合、高相似的部分;・模块化业务需求中的重合部分;・暴露接口实现模块间通讯;
    20. 20. ChinaFace.com 展示模块划分 header Personal-card TimelineWrap Timetags&lbs rshaf t recom Timeline & Feed
    21. 21. ChinaFace.com 功能模块划分 修改背景
    22. 22. ChinaFace前端模块化 解决方案
    23. 23. 展示模块解决方案 + Lessphp
    24. 24. TEMPLATE CONTROLLER 应用 应用 page use VISUAL 模块 模块 block-base 元素 icon/form/ajax/button 元件 容器 box/mod/... 模块划分 布局 layout 展示模块 Less is more 结构 ms-grid/grid 功能模块 框架 文档 full-screen/fixed-screen 核心 reset/variables/classes
    25. 25. Moca资源组织 Less is more usage module element moca container layout structure document base Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    26. 26. Moca资源组织 Less is more usage module element moca container reset.less layout color.less structure document classes.less base variables.less Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    27. 27. Moca资源组织 Less is more usage module element moca container layout structure document base Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    28. 28. Moca资源组织 Less is more button-base.less usage button-small.less module ... ... element form-element.less moca container icon-base.less layout structure icon-timeline.less document base Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    29. 29. Moca语法定义 /*-- base/variables.less --*/ @version: “?v=0.1.1”; @imgPath: “/img/”; /*-- base/color.less --*/ //ColorSystem For ChinaFace @mLink: “#b40000”; /*-- base/classes.less --*/ .ClearFix(){ zoom:1; &:before,&:after{ content: "0020"; display: block; height: 0; overflow: hidden; } &:after{ clear: both; } }Less http://www.lesscss.org Less is more
    30. 30. 依赖与继承 /** * File: module/register.less */ @import "../base/variable"; @import "../element/form-element"; .form-input{ .efInput(220px) } /*-- 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; } }Less http://www.lesscss.org Less is more
    31. 31. Moca模块引擎配置 /*-- config.php --*/ $less_path = /opt/www/**/**/r.chinaface.com/moca/usage; //cache路径 Lessphp $cache_path = /opt/www/**/**/cache/moca; //本地调试 $enable_cache = false; $enable_compress = true; /*-- smarty homepage.php --*/ public function process(){ Smarty $this -> tpl_engine -> assign(css_insert_point, homepage); } /*-- smarty meta.tpl --*/ <link href="<?$cdn?><?$css_insert_point?><?$ver?>" rel="stylesheet"/> <link href="http//r.chinaface.com/less/?f=homepage&v=1.2.7" rel="stylesheet"/>LessPHP http://leafo.net/lessphp Less is more
    32. 32. Moca加载流程 Less is moreexample.less Browser Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    33. 33. Moca加载流程 Less is moreexample.less a e g Browser Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    34. 34. Moca加载流程 Less is moreexample.less a e g Browser a.less b c e.less c g g.less b c d Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    35. 35. Moca加载流程 Less is moreexample.less a e g Browser a.less b c e.less c g g.less b c d Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    36. 36. Moca加载流程 Less is moreexample.less a e g Lessphp Browser a.less b c e.less c g g.less b c d Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    37. 37. Moca加载流程 Less is moreexample.less a e g Lessphp Browser a.less b — c e.less — c — g g.less — b c d Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    38. 38. Moca加载流程 Less is moreexample.less a e g Lessphp Browser a.less b — c css e.less — c — g g.less — b c d Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    39. 39. Moca小结较大限度减少无用样式引入减少不必要的http请求开发效率得到明显提高命名空间与写作方法需自我约束基类与全局变量需严格控制规范文档很必要、CodeReview必不可少选择器遵循性能优先原则
    40. 40. 功能模块解决方案 Eva YUI3 + Minify
    41. 41. Eva 关键词一个变种的YUI基于YUI3、增强YUI3量身定制的Loader完备的框架、快速开发利器文档丰富、开源项目受益者YUI3 http://yuilibrary.com/ Eva UI Library
    42. 42. TEMPLATE ... CONTROLLER 应用 common side analysis ... VISUAL comment timershaft 模块 publisher rich-editor slideshow flyout msgbox ... 组件 xpost switchable uploader ebase button localStorage 模块划分 Eva1.0.4 展示模块 Eva UI Library 组件 IO Anim JSONP ... 基础 Attribute Plugin Widget 功能模块 核心 Event Dom Node OOP YUI3.4.1 种子 Eva YUI Base Get Loader loader
    43. 43. Eva资源组织 Eva UI Library plug-button switchable switchable.js eva /1.0.4/build/ ...js/ yui xdr-post msgbox-css.css msgbox usage msgbox.js name-autocomplete vendor eva-min.js Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    44. 44. Eva资源组织 Eva UI Library oop node-base-debug.js node-base node-base-min.js eva ... node-base.jsjs/ yui /3.4.1/ transition event-mouseenter usage autocomplete vendor Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    45. 45. Eva资源组织 Eva UI Library register.js ... eva common.jsjs/ yui analysis.js timeline.js usage module recommend.js ... ... vendor Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
    46. 46. 添加组件 YUI3 /*-- define build/msgbox/msgbox.js--*/ YUI.add(‘msgbox’,function(Y){ //todo what you want Y.namespace(‘Msgbox’); Y.Msgbox = function(){ this.init.apply(this, arguments); } //Msgbox Logic Y.Mix(Y.Msgbox,{/*something*/},0,null,4); },‘1.0.4’,{requires:[‘node’,‘plug-button’,‘xdr- post’,‘msgbox-css’]});基于YUI3的组件和插件 Eva UI Library
    47. 47. 配置组件模块依赖,为合并做准备 YUI3 /*-- eva module configure --*/ modules: { //JS module ‘msgbox’:{ requires: [‘node’,...,‘msgbox-css’] }, //CSS module ‘msgbox-css’:{ path: ‘msgbox/msgbox-css.css’, type: ‘css’ }, ... } Eva UI Library
    48. 48. 生成应用模块与片段/** * block-base file 典型片段 * example:example.js *//*-- how to use eva --*/Eva.require(‘node’,...,‘msgbox’).ready(function(S){ //todo what you want when requires was loaded S.Msgbox.confirm(‘Hello,World!’,{ confirm: function(O){ S.log(‘点击确认’); } });}); Eva UI Library
    49. 49. 调用应用模块或片段 <!-- Page Content --> </div> <!-- Eva Seed --> <script src="http://r.chinaface.com/js/eva/1.0.4/eva- min.js?v=0.1.2.7&combine=true&debug=1"></script> <script> /*-- webpage use --*/ Eva.usage(common,example,analysis); </script> </body> </html>YUI3 http://yuilibrary.com/ Eva UI Library
    50. 50. Eva模块依赖处理1 /*-- Page Usage --*/ USAGE Eva.usage(‘common,example,analysis’); /*-- compile --*/ http://r.chinaface.com/~? b=usage&common,example,analysis&version=1.2.7Minify 实现资源合并压缩Assets Minify http://code.google.com/p/minify/
    51. 51. Eva模块依赖处理2 http://r.chinaface.com/~? loader b=usage&common,example,analysis&version=1.2.7 /*-- Requires --*/ yui components: [‘node’,...,‘io-xdr’] js eva components: [‘ebase’,...,‘msgbox’] Requires yui: [‘widget-css’,...,‘auto..’] css eva: [‘msgbox-css’,...] /*-- compile --*/ http://r.chinaface.com/~?b=css&yui=widget/skin/ css widget.css,...,&eva=msgbox/msgbox- css.css,...,&yv=3.4.1&ev=1.0.4&version=1.2.7&debug=1 http://r.chinaface.com/~?b=js&yui=node,...,io- js xdr&eva=ebase,...,msgbox&yv=3.4.1&ev=1.0.4&ver sion=1.2.7&debug=1Assets Minify http://code.google.com/p/minify/
    52. 52. Eva模块依赖处理2 http://r.chinaface.com/~? loader b=usage&common,example,analysis&version=1.2.7 /*-- Requires /* common.js */ --*/ yui components: [‘node’,...,‘io-xdr’] js /* 15 */ S.CF.Temp._lazyLoad = new S.DataLazyLoader({mod: mannal}); eva components: [‘ebase’,...,‘msgbox’] /* 16 */ Requires //延迟加载 /* 17 */ yui: [‘widget-css’,...,‘auto..’] S.CF.Temp.lazyLoad = function(item){ /* 18 */ css S.CF.Temp._lazyLoad.loadCustomLazyData(item, data-src); eva: [‘msgbox-css’,...] /* 19 */ } /* 20 */ var imgs = S.one(body).all([data-lazyimg]); /*-- compile --*/ /* 21 */ if(imgs){ /* 22 */ S.later(100,null,function(){ http://r.chinaface.com/~?b=css&yui=widget/skin/ /* 23 */ imgs.each(function(n){ css /* 24 */ widget.css,...,&eva=msgbox/msgbox- S.CF.Temp.lazyLoad(n); /* 25 */ css.css,...,&yv=3.4.1&ev=1.0.4&version=1.2.7&debug=1 }); /* 26 */ }); /* 27 */ } http://r.chinaface.com/~?b=js&yui=node,...,io- js xdr&eva=ebase,...,msgbox&yv=3.4.1&ev=1.0.4&ver sion=1.2.7&debug=1Assets Minify http://code.google.com/p/minify/
    53. 53. EVA加载流程Eva.usage(‘a,e,f,g’) browser
    54. 54. EVA加载流程Eva.usage(‘a,e,f,g’) browser browser
    55. 55. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser
    56. 56. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser 解析 YUI Loader
    57. 57. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser 解析 YUI Loader a e f g
    58. 58. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser 解析 YUI Loader a e a b f b c d g c
    59. 59. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser 解析 YUI Loader a e a — b f b — c d g — c
    60. 60. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser 解析 YUI Loader a e a — b 编译 f b — c d YUI Loader g — c
    61. 61. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser 解析 YUI Loader a e a — b 编译 css js f b — c d YUI Loader g — c
    62. 62. EVA加载流程Eva.usage(‘a,e,f,g’) browser异步创建 请求 Minifycombo compressed browser 解析 请求 Minify YUI Loader combo compressed a e a — b 编译 css js f b — c d YUI Loader g — c
    63. 63. EVA小结模块化组织页面功能模块组件和插件扩展出丰富模块自动处理模块依赖组件开发延续了模块的生命周期调试和版本号管理容易文档和规范是基本
    64. 64. ChinaFace前端模块化 开发环境
    65. 65. 模拟CDN本地开发 hosts127.0.0.1 r.chinaface.com vhost r.chinaface.com Apache Minify PHP svn Template/Moca/Eva
    66. 66. WEB服务器配置 APACHE2 + PHP5 /*-- httpd.conf --*/ #open LoadModule vhost_alias_module modules/mod_vhost_alias.so LoadModule alias_module modules/mod_alias.so LoadModule rewrite_module modules/mod_rewrite.so Include ***/extra/httpd-vhosts.conf /*-- extra/httpd-vhost.conf --*/ <VirtualHost *:80> DocumentRoot "yourcode" ServerAlias yourdomain.com AliasMatch ^/~(.*) yourcode/minify/index.php$1 ... </Directory> </VirtualHost> /*-- setting hosts --*/ 127.0.0.1 yourdomain
    67. 67. Smarty 维护TPL和资源引用 <!DOCTYPE html> <html lang=cn> <head> <?include file=base/meta.tpl?> </head> <body> <chinaface id="<?$doctype?>"> ... <?include file=base/header.tpl?> ... <?include file=$child_tpl?> ... </chinaface> ... <script type="text/javascript"> Eva.usage(<?$js_insert_point?>); </script>Smarty http://www.smarty.net/
    68. 68. 模拟CDN本地开发特点完整模拟正式环境资源服务器;资源版本控制,真正有据可查;避免频繁提交代码导致的版本冲突;便于前后端协同开发;提升前端项目开发效率;
    69. 69. ChinaFace前端模块化 性能优化
    70. 70. 4s—— 如果网页加载时间超过4秒,约有四分 之一的人会放弃打开该网页—— 如果网页加载时间超过10秒,50%的移 动用户会放弃该网页,约五分之三的人 不会再返回该网站 来源 http://gtmetrix.com/
    71. 71. ChinaFace1.0 资源加载瀑布
    72. 72. ChinaFace1.0干扰网页外观渲染 资源加载瀑布
    73. 73. ChinaFace1.0干扰网页外观渲染 决定外观的资源 资源加载瀑布
    74. 74. 性能优化1.eva种子、Usage放至于</body>之前:
    75. 75. 性能优化1.eva种子、Usage放至于</body>之前:chinaface2.0 domContentReady
    76. 76. 性能优化1.eva种子、Usage放至于</body>之前: 排除JS加载阻塞风险 优先加载决定表现的资源 优先渲染首屏chinaface2.0 domContentReady
    77. 77. 性能优化1.eva种子、Usage放至于</body>之前: 排除JS加载阻塞风险 优先加载决定表现的资源 优先渲染首屏chinaface2.0 domContentReady 异步加载脚本文件优于直接引用脚本文件 扩展阅读: http://hikejun.com/blog/2012/02/02/js和css的顺序 系/ http://gent.ilcore.com/2011/05/how-web-page-loads.html
    78. 78. 性能优化2.延迟加载图片、区域: 减少大量请求同时出现 合理分配资源加载次序 减少首屏节点树创建 inViewportRegion <img data-src=”” /> <img data-src=”” /> <textarea data-src=”lazy-load” disabled /> <textarea/>
    79. 79. 勇敢和IE6告别降低对IE6的测试权重不再重视IE6性能问题引导用户向高级别标准浏览器更迭只有我们无视,用户才会重视
    80. 80. 勇敢和IE6告别降低对IE6的测试权重不再重视IE6性能问题引导用户向高级别标准浏览器更迭只有我们无视,用户才会重视
    81. 81. 性能优化小结遵循Yslow和pagespeed的优化建议优化不是一次性,而是永无止境优化是种习惯,需因地制宜良好的编程习惯 > 优化切忌一根筋
    82. 82. 附 ChinaFace前端架构image from Flickr http://www.flickr.com/photos/garycherry/2290069108/lightbox/
    83. 83. ChinaFace 前端架构 Base Document YUI3 Grid Eva Eva UI组件库 Structure Moca 应用模块 模块HTML Element Smarty 引用模块资源 Module Usage LessPHP Moca less 发框架 模块引擎 工具 YUI Loader Photoshop Vim 模块CSS Minify Emeditor 组件JS Sublime 兼容性 测试 Editplus JS单元 发 项目资源 Yslow WebPageTest.com 性能监测 SVN PageSpeed Vanish DynaTrace CDN Fiddler Smush.it Firebug 品质保障 JSLint 调试 CodeReview Developer Tools Visual Studio
    84. 84. 环境部署 sources 本地环境 debug 发环境 SVN debug 测试环境 compress环境 模拟CDN本地 发 预发布环境 compress、cache Apache 2(vhost) PHP 5 hosts Vanish sync cache file CDN cache file r.chinaface.com
    85. 85. 文档规范文件组织 前端周报命名规范 项目管理编程规范 F2E Doc 规范 wiki 接口文档 wd.org wiki.chinaface.com模块指南 分享培训前端安全 学习文档
    86. 86. 总结减少代码循环依赖、冗余;减少无用代码的引入;适合富应用Web项目;有效提高前端团队的开发效率;保证前端产出物与设计和产品的一致性;模块化开发一劳永逸;省钱、省时间
    87. 87. ChinaFace前端团队、银泰网前端团队@拔赤、@一舟、@舒克、@淘宝UED(bj)
    88. 88. QA

    ×