1.
Template-Based
Modular Architecture
Advanced JavaScript
genify(caijf@corp)

2.
Content
• Modular
• Module
• Template
• Dispatcher
• Case Study
• Deployment

3.
Modular
• Features
– Independence
– Composability
– Decomposability
– Replaceability

4.
Modular
• Advantages
– Several programmers can work on individual
programs at the same time, thus, making
development of program faster
– Concerns are separated such that modules
perform logically discrete functions
– The code base is easier to debug, update and
modify

5.
Content
• Modular
• Module
• Template
• Dispatcher
• Deployment

6.
Module
• Elements
– CSS
– HTML
– JAVASCRIPT

7.
Module
• Encapsulation
– DSL
– JavaScript
– Html
[@STYLE]
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
[/@STYLE]
[@HTML]
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
[/@HTML]
[@SCRIPT]
var a = 'aaaaa';
var b = 'bbbbb';
[/@SCRIPT]
var style = '
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
';
var html = '
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
';
(function(){
var a = 'aaaaaaa';
var b = 'bbbbbbb';
// TODO
})();
<style>
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
</style>
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
<script>
var a = 'aaaaa';
var b = 'bbbbb';
// TODO
</script>

8.
Module
• Encapsulation
<style>
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
</style>
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
<script>
var a = 'aaaaa';
var b = 'bbbbb';
// TODO
</script>
<textarea name="css">
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
</textarea>
<textarea name="html">
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
</textarea>
<textarea name="js">
var a = 'aaaaa';
var b = 'bbbbb';
// TODO
</textarea>

9.
Content
• Modular
• Module
• Template
• Dispatcher
• Case Study
• Deployment

10.
Template
• Import Style
<style>
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
</style>
<link rel="stylesheet"
type="text/css"
href="http://b.126.net/r/c.css"/>
<textarea name="css">
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
</textarea>
<textarea name="css"
data-src="http://b.126.net/r/c.css">
</textarea>
<textarea name="css"
data-src="http://b.126.net/r/c.css">
.m-test a{color:#aaa;}
.m-test b{color:#bbb;}
</textarea>

11.
Template
• Import Script
<script>
var a = 'aaaaa';
var b = 'bbbbb';
</script>
<script src="http://b.126.net/r/c.js"></script>
<textarea name="js">
var a = 'aaaaa';
var b = 'bbbbb';
</textarea>
<textarea name="js"
data-src="http://b.126.net/r/c.js">
</textarea>
<textarea name="js"
data-src="http://b.126.net/r/c.js">
var a = 'aaaaa';
var b = 'bbbbb';
</textarea>

12.
Template
• Import html
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
<textarea name="txt" id="txt-test-html">
<div class="m-test">
<span class="a">aaaaaaaaaaaa</span>
<span class="b">bbbbbbbbbbbb</span>
</div>
</textarea>
<textarea name="jst" id="jst-test-html">
<div class="m-test">
<span class="a">${x.a}</span>
<span class="b">${x.b}</span>
</div>
</textarea>
<textarea name="ntp" id="ntp-test-html">
<div class="m-test">
<span class="a"></span>
<span class="b"></span>
</div>
</textarea>
<textarea name="html"
data-src="/pub/module/widget.html">
</textarea>

13.
Template
<meta charset="utf-8"/>
<textarea name="txt" id="m-ifrm-module">
<div class="n-login">
<div class="iner j-flag">
<span class="cls j-flag">×</span>
<span class="min j-flag">－</span>
</div>
<div class="cnt j-cnt"></div>
</div>
</textarea>
<!-- @TEMPLATE -->
<textarea name="js" data-src="./index.css"></textarea>
<textarea name="js" data-src="./index.js"></textarea>
<!-- /@TEMPLATE -->

14.
Content
• Modular
• Module
• Template
• Dispatcher
• Case Study
• Deployment

15.
Dispatcher

16.
Dispatcher
• Principle
Blog
BlogList BlogTags
Setting
Account
Profile EduExp
Permission
SystemA
B C
D E F G
H I
System
Blog Setting
BlogList BlogTags Account Permission
Profile EduExp

17.
Dispatcher
• UMI
– Uniform Module Identifier
– Format
• Path of URI，e.g. /m/m0/
• Begin with “/”
• Begin with“/?”if private module
– Dependency
• e.g. parent of “/m/m0/”and “/m/m1/”is “/m”

18.
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /
• UMI
– Split Dependency by UMI
Blog
BlogList BlogTags
Setting
Account
Profile EduExp
Permission
System
Dispatcher

19.
Dispatcher
• UMI
– Mapping UMI to Module
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /
System
Blog Setting
BlogList BlogTags
Account
PermissionProfile
EduExp
BlogList
/m/blog/list/

20.
Dispatcher
• UMI
– Mapping UMI to html
BlogList
<style> …
<html> …
<script> …
module.html
BlogList
/m/blog/list/

21.
Dispatcher
• UMI
– Mapping UMI to html
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /
module/frame.html
module/blog/frame.html module/setting/frame.html
module/blog/list.html
module/setting/account/frame.html
module/setting/account/edu.html

22.
Dispatcher
• Strategy
– dispatch to /m/blog/list/
• Check action
• Load or Dispatch
• Waiting Loaded Callback
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /

23.
Dispatcher
• Strategy
– dispatch to /m/setting/account/
• Find common root
• Hide : source -> common
• Refresh : root -> common
• Show : common -> target
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /

24.
Dispatcher
• Module Type
Module-I Module-I
Module-II Module-II

25.
Dispatcher
• Composite
Module-aa
Module-aa-b2
Module-aa-b1 Module-aa-b3
'/m':{
module:'module/frame/frame/index.html',
composite:{
onrefresh:{
top:'/?/frame/top/',
side:'/?/frame/side/'
},
onshow:{
lyric:'/?/frame/foot/lyric/',
player:'/?/frame/foot/player/',
detailtag:'/?/frame/detailtag/'
}
}
}

26.
Dispatcher
• Message Channel
– Pointer to Pointer m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /
this.__doSendMessage(
'/m/setting/account/',
{d:'ddddd',e:'eeeeee'}
);
_proModuleAccountProfile.__onMessage = function(_event){
console.log(
'receive message from '+
_event.from+' and say: '+
JSON.stringify(_event.data)
);
};

27.
Dispatcher
• Message Channel
– Publish and Subscribe
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /
this.__doPublishMessage(
'onok',{a:'aaaa',b:'bbbbb'}
);
this.__doSubscribeMessage(
'/m/setting/account/','onok',
this.__onSubscribe._$bind(this)
);
this.__doSubscribeMessage(
'/m/setting/account/','onok',
this.__onSubscribe._$bind(this)
);

28.
Content
• Modular
• Module
• Template
• Dispatcher
• Case Study
• Deployment

29.
Case Study

30.
Case Study
• System Decomposition
Blog
BlogList BlogTags
Setting
Account
Profile EduExp
Permission
System
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ // / /
/
/
m
blog setting
account

31.
Case Study
• System Decomposition
收件箱切换
类别列表
标签列表日志列表
?
blog
tag listbox
/
/ /
class
/ //?/blog/box//?/blog/tag//?/blog/list//?/blog/class/

32.
Case Study
• Module Development

33.
Case Study
• Module Development
<meta charset="utf-8"/>
<textarea name="txt" id="module-id-2">
<div class="mdl-2">
<div class="lbx js-flag"></div>
<div class="pgr js-flag"></div>
</div>
</textarea>
<textarea name="jst" id="jst-2-blog-list">
{list beg..end as y}
{var x=xlist[y]}
<div class="w-bit">
<div class="f-cb">
<p class="fl ztl"><a href="#">${x.title}</a></p>
<div class="fr xat">
<a href="#">编辑</a>
<a href="#">删除</a>
</div>
</div>
<p class="inf">
<span>${x.publishTime|format:'yyyy-MM-dd HH:mm'
<span>阅读(${x.accessCount})</span>
<span>评论(${x.commentCount})</span>
</p>
</div>
{/list}
</textarea>
<!-- @TEMPLATE -->
<textarea name="css" data-src="./index.css"></textarea>
<textarea name="js" data-src="./index.js"></textarea>
<!-- /@TEMPLATE -->

34.
Case Study
• Module Development
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
/**
* 构建模块
* @return {Void}
*/
_pro.__doBuild = function(){
this.__body = _e._$html2node(
_e._$getTextTemplate('module-id-2')
);
// 0 - list box
// 1 - pager box
var _list = _e._$getByClassName(this.__body,'js-flag');
this.__mopt = {
limit:15,
parent:_list[0],
item:'jst-2-blog-list',
cache:{klass:_d._$$CacheBlog},
pager:{clazz:'w-pager',parent:_list[1]},
onbeforelistload:this.__onLoadingShow._$bind(this),
onemptylist:this.__onMessageShow._$bind(this,'没有日志列表！')
};
};
/**
* 显示模块触发事件，子类实现具体逻辑
* @param {Object} 事件对象
* @return {Void}
*/
_pro.__onShow = function(_options){
var _parent = this.__doParseParent(_options);
// show and refresh module
if (!!_parent&&!!this.__body)
_parent.appendChild(this.__body);
this.__supOnShow(_options);
this.__doApplyComposite('onshow',_options);
this.__onRefresh(_options);
};
/**
* 隐藏模块触发事件，子类实现具体逻辑
* @return {Void}
*/
_pro.__onHide = function(){
this.__supOnHide();
this.__doHideComposite();
_e._$removeByEC(this.__body);
};
/**
* 刷新模块
* @param {Object} 配置信息
* @return {Void}
*/
_pro.__onRefresh = (function(){
var _doParseCKey = function(_param){
if (!!_param.cid)
return 'class-'+_param.cid;
if (!!_param.tid)
return 'tag-'+_param.tid;
return 'box-'+(_param.box||1);
};
return function(_options){
this.__supOnRefresh(_options);
if (this.__lmdl) this.__lmdl._$recycle();
this.__mopt.cache.lkey = _doParseCKey(_options.param||_o);
this.__lmdl = _t._$$ListModulePG._$allocate(this.__mopt);
};
})();
_e._$regist('blog-list',_p._$$ModuleBlogList);

35.
Case Study
• Module Test
<!-- template box -->
<div id="template-box" style="display:none;">
<textarea name="html" data-src="../index.html"></textarea>
</div>
<script>
define(['{lib}util/dispatcher/test.js'],
function(){
// test module
document.mbody = 'module-id-0';
NEJ.P('nej.e')._$testByTemplate('template-box');
});
</script>

36.
Case Study
• System Composition
<script>
define(['{lib}util/dispatcher/dispatcher.2.js'],
function(){
var _ = NEJ.P;
/* start up dispatcher */
_('nej.e')._$startup({
rules:{...},
modules:{...}
});
});
</script>
rules:{
rewrite:{
'404':'/m/blog/list/',
'/m/blog/list/':'/m/blog/',
'/m/setting/account/':'/m/setting/'
},
title:{
'/m/blog/tag/':'日志标签',
'/m/blog/list/':'日志列表',
'/m/setting/permission/':'权限管理',
'/m/setting/account/':'基本资料',
'/m/setting/account/edu/':'教育经历'
},
alias:{
'system-tab':'/?/tab/',
'blog-tab':'/?/blog/tab/',
'blog-list-box':'/?/blog/box/',
'blog-list-tag':'/?/blog/tag/',
'blog-list-class':'/?/blog/class/',
'blog-list':'/?/blog/list/',
'setting-tab':'/?/setting/tab/',
'setting-account-tab':'/?/setting/account/tab/',
'layout-system':'/m',
'layout-blog':'/m/blog',
'layout-blog-list':'/m/blog/list/',
'layout-setting':'/m/setting',
'layout-setting-account':'/m/setting/account',
'blog-tag':'/m/blog/tag/',
'setting-edu':'/m/setting/account/edu/',
'setting-profile':'/m/setting/account/',
'setting-permission':'/m/setting/permission/'
}
}
modules:{
'/?/tab/':'module/tab/index.html',
'/?/blog/tab/':'module/blog/tab/index.html',
'/?/blog/box/':'module/blog/list.box/index.html',
'/?/blog/tag/':'module/blog/list.tag/index.html',
'/?/blog/class/':'module/blog/list.class/index.html',
'/?/blog/list/':'module/blog/list/index.html',
'/?/setting/tab/':'module/setting/tab/index.html',
'/?/setting/account/tab/':'module/setting/account.tab/index.h
'/m':{
module:'module/layout/system/index.html',
composite:{
tab:'/?/tab/'
}
},
'/m/blog':{
module:'module/layout/blog/index.html',
composite:{
tab:'/?/blog/tab/'
}
},
'/m/blog/list/':{
module:'module/layout/blog.list/index.html',
composite:{
box:'/?/blog/box/',
tag:'/?/blog/tag/',
list:'/?/blog/list/',
clazz:'/?/blog/class/'
}
},
'/m/blog/tag/':'module/blog/tag/index.html',
'/m/setting':{
module:'module/layout/setting/index.html',
composite:{
tab:'/?/setting/tab/'
}
},

37.
Content
• Modular
• Module
• Template
• Dispatcher
• Case Study
• Deployment

38.
Deployment
• Publisher
– NodeJS
– NEJ-Publisher
– Project Configuration
– do release

39.
Deployment
• Performance Improvement
<div id="template-box" style="display:none;">
<!-- @TEMPLATE -->
<textarea name="html" data-src="module/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.box/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.class/index.html"></textarea>
<textarea name="html" data-src="module/layout/system/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog.list/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting.account/index.html"></textarea>
<textarea name="html" data-src="module/blog/tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list/index.html"></textarea>
<textarea name="html" data-src="module/setting/tab/index.html"></textarea>
<textarea name="html" data-src="module/setting/account.tab/index.html"></textarea>
<!-- /@TEMPLATE -->
</div>

40.
Deployment
• Performance Improvement
<div id="template-box" style="display:none;">
<!-- @MODULE -->
<textarea name="html" data-src="module/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.box/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.class/index.html"></textarea>
<textarea name="html" data-src="module/layout/system/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog.list/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting.account/index.html"></textarea>
<textarea name="html" data-src="module/blog/tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list/index.html"></textarea>
<textarea name="html" data-src="module/setting/tab/index.html"></textarea>
<textarea name="html" data-src="module/setting/account.tab/index.html"></textarea>
<!-- /@MODULE -->
</div>

41.
Deployment
• Performance Improvement
<!-- @TEMPLATE -->
<textarea name="html" data-src="./blog/tab/index.html"></textarea>
<textarea name="html" data-src="./blog/tag/index.html"></textarea>
<textarea name="html" data-src="./blog/list/index.html"></textarea>
<textarea name="html" data-src="./blog/list.box/index.html"></textarea>
<textarea name="html" data-src="./blog/list.tag/index.html"></textarea>
<textarea name="html" data-src="./blog/list.class/index.html"></textarea>
<!-- /@TEMPLATE -->
modules:{
'/?/tab/':'module/tab/index.html',
'/?/blog/tab/':'module/blog.html',
'/?/blog/box/':'module/blog.html',
'/?/blog/tag/':'module/blog.html',
'/?/blog/class/':'module/blog.html',
'/?/blog/list/':'module/blog.html',
'/?/setting/tab/':'module/setting.html',
'/?/setting/account/tab/':'module/setting.html',

42.
DEMO

43.
Q&A

44.
Thank You !