高粒度模块化的前端开发

高粒度模块化
DE 前端开发
蒋吉兵

2012/03/24 FRONT-END MODULAR DEVELOPMENT | CHINAFACE.COM @集冰

About Me
蒋吉兵 Eddy or JJB
Weibo: @集冰
Email: idd.chiang@gmail.com
Website: www.microidc.com

现状
前端的模块化
解决方案
环境配置
性能优化
CHINAFACE前端架构

传统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"/>

再进一步
/*-- 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"/>

传统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>

再进一步
/*-- 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>

再再进一步
//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

ChinaFace前端模块化
模块划分

模块化

http://www.flickr.com/photos/ejpphoto/2314610838/

模块化

http://www.flickr.com/photos/decojim/969950876/sizes/o/in/photostream/

模块化

http://www.flickr.com/photos/olaborda/2078050462/sizes/l/in/photostream/

模块 Module
可组合、分解和更换的单元

可组成系统的、具有某种确定独立功能的半
自律性的子系统

是较大系统的独立部件

功能、状态与接口反映外部特性，逻辑反映
内部特性

http://baike.baidu.com/view/182267.htm

前端设计三大要素

VISUAL
外观

STRUCTURE CONTROLLER

结构控制器

他们的看法
VISUAL
Designer structure
Controller

product manager VISUAL Controller
structure

Web Developer VISUAL structure Controller

Images from: http://www.zcool.com.cn/gfx/ZMjAxNjg0.html

前端模块类型划分

VISUAL
展示外观

功能

STRUCTURE CONTROLLER

结构控制器

前端模块分为：展示模块和功能模块

前端模块抽离原则

・充分了解产品需求，熟读PRD；
・深度挖掘产品需求，提炼模块；
・从视觉规范中抽离高耦合、高相似的部分；
・模块化业务需求中的重合部分；
・暴露接口实现模块间通讯；

ChinaFace.com 展示模块划分
header

Personal-card

TimelineWrap
Time
tags&lbs rshaf
t
recom

Timeline & Feed

ChinaFace.com 功能模块划分

修改背景

解决方案

展示模块解决方案

+ Lessphp

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

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


usage

module

element

moca container
reset.less
layout
color.less
structure

document classes.less

base variables.less



button-base.less

usage button-small.less

module
... ...
element
form-element.less
moca container

icon-base.less
layout

structure icon-timeline.less

document

base


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

依赖与继承
/**
* 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

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

Moca加载流程 Less is more

example.less Browser



example.less a e g Browser



example.less a e g Browser

a.less b c

e.less c g

g.less b c d



example.less a e g
Lessphp Browser

a.less b c

e.less c g

g.less b c d



example.less a e g
Lessphp Browser

a.less b —
c

e.less —
c —
g

g.less —
b c d



example.less a e g
Lessphp Browser

a.less b —
c css
e.less —
c —
g

g.less —
b c d


Moca小结
较大限度减少无用样式引入
减少不必要的http请求
开发效率得到明显提高
命名空间与写作方法需自我约束
基类与全局变量需严格控制
规范文档很必要、CodeReview必不可少
选择器遵循性能优先原则

功能模块解决方案

Eva
YUI3 + Minify

Eva 关键词

一个变'种'的YUI

基于YUI3、增强YUI3

量身定制的Loader
完备的框架、快速开发利器
文档丰富、开源项目受益者

YUI3 http://
yuilibrary.com/
Eva UI Library

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

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



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



register.js

...
eva

common.js

js/ yui
analysis.js timeline.js

usage module recommend.js

... ...
vendor


添加组件
YUI3
/*-- deﬁne 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

配置组件模块依赖，为合并做准备
YUI3
/*-- eva module conﬁgure --*/
modules: {
//JS module
‘msgbox’:{
requires: [‘node’,...,‘msgbox-css’]
},
//CSS module
‘msgbox-css’:{
path: ‘msgbox/msgbox-css.css’,
type: ‘css’
},
...
}

Eva UI Library

生成应用模块与片段
/**
* 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

调用应用模块或片段

</div>

<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

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/


http://r.chinaface.com/~? loader

/*-- 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
minify/


http://r.chinaface.com/~? loader

/*-- 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
minify/

EVA加载流程

Eva.usage(‘a,e,f,g’) browser

EVA加载流程


browser

EVA加载流程


异步创建请求 Minifycombo
compressed
browser

EVA加载流程


compressed
browser

解析 YUI Loader

EVA加载流程


compressed
browser

解析 YUI Loader

a

e

f

g

EVA加载流程


compressed
browser

解析 YUI Loader

a

e a b

f b c d

g c

EVA加载流程


compressed
browser

解析 YUI Loader

a

e a
— b

f b
— c d

g —
c

EVA加载流程


compressed
browser

解析 YUI Loader

a

e a
— b 编译
f b
— c d YUI Loader

g —
c

EVA加载流程


compressed
browser

解析 YUI Loader

a

e a
— b 编译
css js
f b
— c d YUI Loader

g —
c

EVA加载流程


compressed
browser

解析请求 Minify
YUI Loader
combo
compressed
a

e a
— b 编译
css js
f b
— c d YUI Loader

g —
c

EVA小结

模块化组织页面功能模块
组件和插件扩展出丰富模块
自动处理模块依赖
组件开发延续了模块的生命周期
调试和版本号管理容易
文档和规范是基本

开发环境

模拟CDN本地开发
hosts127.0.0.1 r.chinaface.com

vhost r.chinaface.com
Apache

Minify
PHP

svn

Template/Moca/Eva

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

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/

模拟CDN本地开发特点

完整模拟正式环境资源服务器；
资源版本控制，真正有据可查；
避免频繁提交代码导致的版本冲突；
便于前后端协同开发；
提升前端项目开发效率；

性能优化

4s
—— 如果网页加载时间超过4秒，约有四分
之一的人会放弃打开该网页

—— 如果网页加载时间超过10秒，50%的移
动用户会放弃该网页，约五分之三的人
不会再返回该网站

来源 http://gtmetrix.com/

ChinaFace1.0

资源加载瀑布

ChinaFace1.0

干扰网页外观渲染

资源加载瀑布

ChinaFace1.0

干扰网页外观渲染

决定外观的资源

资源加载瀑布

性能优化
1.eva种子、Usage放至于</body>之前：

性能优化

chinafac
e2.0 domContentReady

性能优化

排除JS加载阻塞风险
优先加载决定表现的资源
优先渲染首屏
chinafac

性能优化

排除JS加载阻塞风险
优先加载决定表现的资源
优先渲染首屏
chinafac

异步加载脚本文件优于直接引用脚本文件
扩展阅读：
http://hikejun.com/blog/2012/02/02/js和css的顺序系/

http://gent.ilcore.com/2011/05/how-web-page-loads.html

性能优化
2.延迟加载图片、区域：

减少大量请求同时出现
合理分配资源加载次序
减少首屏节点树创建
inViewportRegion

<img data-src=”” />

<img data-src=”” />

<textarea data-src=”lazy-load” disabled /> <textarea/>

勇敢和IE6告别

降低对IE6的测试权重
不再重视IE6性能问题
引导用户向高级别标准浏览器更迭
只有我们无视，用户才会重视

性能优化小结

遵循Yslow和pagespeed的优化建议
优化不是一次性，而是永无止境
优化是种习惯，需因地制宜
良好的编程习惯 > 优化
切忌一根筋

附 ChinaFace前端架构

image from Flickr http://www.flickr.com/photos/garycherry/2290069108/lightbox/

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

环境部署

sources
本地环境 debug

发环境 SVN debug

测试环境 compress
环境模拟CDN本地发
预发布环境 compress、cache
Apache 2（vhost）
PHP 5
hosts
Vanish sync cache file

CDN cache file

r.chinaface.com

文档规范

文件组织前端周报

命名规范项目管理

编程规范 F2E Doc 规范 wiki 接口文档

wd.org wiki.chinaface.com
模块指南分享培训

前端安全学习文档

总结

减少代码循环依赖、冗余;
减少无用代码的引入；
适合富应用Web项目；
有效提高前端团队的开发效率；
保证前端产出物与设计和产品的一致性；
模块化开发一劳永逸；
省钱、省时间

ChinaFace前端团队、银泰网前端团队
@拔赤、@一舟、@舒克、@淘宝UED(bj)

高粒度模块化的前端开发

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (17)

Semelhante a 高粒度模块化的前端开发

Semelhante a 高粒度模块化的前端开发 (20)

高粒度模块化的前端开发

Notas do Editor