![添加组件
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](https://image.slidesharecdn.com/random-120325212103-phpapp01/75/slide-46-2048.jpg)
![配置组件模块依赖，为合并做准备
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](https://image.slidesharecdn.com/random-120325212103-phpapp01/75/slide-47-2048.jpg)
![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=1
Assets Minify http://code.google.com/p/
minify/](https://image.slidesharecdn.com/random-120325212103-phpapp01/75/slide-51-2048.jpg)
![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=1
Assets Minify http://code.google.com/p/
minify/](https://image.slidesharecdn.com/random-120325212103-phpapp01/75/slide-52-2048.jpg)
高粒度模块化的前端开发
- 1. 高粒度模块化 DE 前端开发 蒋吉兵 2012/03/24 FRONT-END MODULAR DEVELOPMENT | CHINAFACE.COM @集冰
- 2. About Me 蒋吉兵 Eddyor JJB Weibo: @集冰 Email: idd.chiang@gmail.com Website: www.microidc.com
- 3.
- 4.
- 5. 传统CSS模块组织 /*-- reset --*/ html,body....{...} global.css /*-- header --*/ #header{...} #body{...} /*-- mod --*/ .mod{ ... } .mod .hd{ ... } .mod .bd{ ... } /*-- login --*/ ＃login-form{...} page.css selector{...} /*-- HTML --*/ <link href="domain/assets/css/global.css" rel="stylesheet"/> <link href="domain/assets/css/page.css" rel="stylesheet"/>
- 6. 再进一步 /*-- reset --*/ html,body....{...} reset.css /*-- header --*/ #header{...} header.css #body{...} /*-- mod --*/ mod.css .mod{ ... } .mod .hd{ ... } .mod .bd{ ... } /*-- login --*/ ＃login-form{...} page.css select{...} /*-- 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. 传统js模块组织 /*-- HTML --*/ <scriptsrc="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. 再进一步 /*-- 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> </head> <body> ... <script> (function(){ //to change world. })(); </script> </body> </html>
- 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. ChinaFace前端模块化 模块划分
- 11. 文本 模块化
- 12.
- 13.
- 14.
- 15. 模块 Module 可组合、分解和更换的单元 可组成系统的、具有某种确定独立功能的半 自律性的子系统 是较大系统的独立部件 功能、状态与接口反映外部特性，逻辑反映 内部特性 http://baike.baidu.com/view/182267.htm
- 16. 前端设计三大要素 VISUAL 外观 STRUCTURE CONTROLLER 结构 控制器
- 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. 前端模块类型划分 VISUAL 展示 外观 功能 STRUCTURE CONTROLLER 结构 控制器 前端模块分为：展示模块和功能模块
- 19.
- 20. ChinaFace.com 展示模块划分 header Personal-card TimelineWrap Time tags&lbs rshaf t recom Timeline & Feed
- 21. ChinaFace.com 功能模块划分 修改背景
- 22. ChinaFace前端模块化 解决方案
- 23. 展示模块解决方案 + Lessphp
- 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. 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. 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. 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. 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. 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. 依赖与继承 /** * 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. 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. Moca加载流程 Less is more example.less Browser Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
- 33. Moca加载流程 Less is more example.less a e g Browser Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
- 34. Moca加载流程 Less is more example.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. Moca加载流程 Less is more example.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. Moca加载流程 Less is more example.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. Moca加载流程 Less is more example.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. Moca加载流程 Less is more example.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.
- 40. 功能模块解决方案 Eva YUI3 + Minify
- 41.
- 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. 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. Eva资源组织 Eva UI Library oop node-base-debug.js node-base node-base-min.js eva ... node-base.js js/ yui /3.4.1/ transition event-mouseenter usage autocomplete vendor Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
- 45. Eva资源组织 Eva UI Library register.js ... eva common.js js/ yui analysis.js timeline.js usage module recommend.js ... ... vendor Images from:http://preview.zcool.com.cn/png/computer/20071008/png_100RO92007.html
- 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. 配置组件模块依赖，为合并做准备 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. 生成应用模块与片段 /** * block-basefile 典型片段 * 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. 调用应用模块或片段 <!-- 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. Eva模块依赖处理1 /*-- Page Usage --*/ USAGE Eva.usage(‘common,example,analysis’); /*-- compile --*/ http://r.chinaface.com/~? b=usage&common,example,analysis&version=1.2.7 Minify 实现资源合并压缩 Assets Minify http://code.google.com/p/ minify/
- 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=1 Assets Minify http://code.google.com/p/ minify/
- 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=1 Assets Minify http://code.google.com/p/ minify/
- 53. EVA加载流程 Eva.usage(‘a,e,f,g’) browser
- 54. EVA加载流程 Eva.usage(‘a,e,f,g’) browser browser
- 55. EVA加载流程 Eva.usage(‘a,e,f,g’) browser 异步创建 请求 Minifycombo compressed browser
- 56. EVA加载流程 Eva.usage(‘a,e,f,g’) browser 异步创建 请求 Minifycombo compressed browser 解析 YUI Loader
- 57. EVA加载流程 Eva.usage(‘a,e,f,g’) browser 异步创建 请求 Minifycombo compressed browser 解析 YUI Loader a e f g
- 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. EVA加载流程 Eva.usage(‘a,e,f,g’) browser 异步创建 请求 Minifycombo compressed browser 解析 YUI Loader a e a — b f b — c d g — c
- 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. 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. 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.
- 64. ChinaFace前端模块化 开发环境
- 65. 模拟CDN本地开发 hosts127.0.0.1 r.chinaface.com vhost r.chinaface.com Apache Minify PHP svn Template/Moca/Eva
- 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. 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.
- 69. ChinaFace前端模块化 性能优化
- 70. 4s —— 如果网页加载时间超过4秒，约有四分 之一的人会放弃打开该网页 —— 如果网页加载时间超过10秒，50%的移 动用户会放弃该网页，约五分之三的人 不会再返回该网站 来源 http://gtmetrix.com/
- 71. ChinaFace1.0 资源加载瀑布
- 72. ChinaFace1.0 干扰网页外观渲染 资源加载瀑布
- 73.
- 74.
- 75. 性能优化 1.eva种子、Usage放至于</body>之前： chinafac e2.0 domContentReady
- 76. 性能优化 1.eva种子、Usage放至于</body>之前： 排除JS加载阻塞风险 优先加载决定表现的资源 优先渲染首屏 chinafac e2.0 domContentReady
- 77. 性能优化 1.eva种子、Usage放至于</body>之前： 排除JS加载阻塞风险 优先加载决定表现的资源 优先渲染首屏 chinafac e2.0 domContentReady 异步加载脚本文件优于直接引用脚本文件 扩展阅读： http://hikejun.com/blog/2012/02/02/js和css的顺序 系/ http://gent.ilcore.com/2011/05/how-web-page-loads.html
- 78. 性能优化 2.延迟加载图片、区域： 减少大量请求同时出现 合理分配资源加载次序 减少首屏节点树创建 inViewportRegion <img data-src=”” /> <img data-src=”” /> <textarea data-src=”lazy-load” disabled /> <textarea/>
- 79.
- 80.
- 81.
- 82. 附 ChinaFace前端架构 image fromFlickr http://www.flickr.com/photos/garycherry/2290069108/lightbox/
- 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. 环境部署 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. 文档规范 文件组织 前端周报 命名规范 项目管理 编程规范 F2E Doc 规范 wiki 接口文档 wd.org wiki.chinaface.com 模块指南 分享培训 前端安全 学习文档
- 86.
- 87.
- 88.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n