The document discusses a template-based modular architecture for advanced JavaScript applications. It covers key concepts like modular design, modules, templates, and a dispatcher. For modules, it describes elements, encapsulation, and advantages like independence and decomposability. It then covers templates for importing styles, scripts, and HTML. The dispatcher section explains principles like Uniform Module Identifiers and strategies for dispatching and routing. A case study demonstrates system decomposition into modules and their development. The document concludes with discussions around module deployment and performance improvements.

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 !