More Related Content
Similar to J engine -构建高性能、可监控的前端应用框架 (20)
J engine -构建高性能、可监控的前端应用框架
- 4. 整体框架图
延迟加载
模块
首屏加载 延迟初始
模块 化模块
沙箱(core.sandbox.js)
应用核心(core.application.js)
FDEV4
- 6. 模块化编程—模块
模块:
• 模块对整体架构的了解非常有限,它只知道sandbox的存在。
• 每个模块各司其职,共同构建了应用的正常运行。
- 7. 模块化编程—模块代码示例
!(function($){
var Sandbox,
configs = {
end:0
};
function lazyloadModule1(sb) {
Sandbox = sb;
return lazyloadModule1;
}
$.extend(lazyloadModule1,{
init:function(cfg){
this.config = $.extend(true, {}, configs, cfg);
Sandbox.on( Searchweb.Config.Events.DELETE, this.create);
},
create:function(data){
alert("lazyloadModule1 got the message:" + data.msg);
},
end:0
});
Searchweb.Business.lazyloadModule1 = lazyloadModule1;
})(jQuery);
- 8. 模块化编程—模块
模块必须呆在相应的sandbox中,也许会
很不舒服,但这对应用是安全的!
- 13. 模块化编程—应用核心代码示例
register: function(moduleId, creator, opt){
moduleData[moduleId] = {
creator: creator,
instance: null
};
},
start: function(moduleId){
moduleData[moduleId].instance = moduleData[moduleId].creator(new Sandbox(this));
moduleData[moduleId].instance.init();
},
stop: function(moduleId){
var data = moduleData[moduleId];
if (data.instance){
data.instance.destroy();
data.instance = null;
}
}
- 15. 性能提升—Fast By Default
• 在模块管理中加入“懒注册”机制,从框架的层面解决性能
问题 -- Fast By Default!
延迟加载
模块注册
首屏加载 延迟初始化
模块注册 模块注册
模块注册
- 16. 性能提升—Fast By Default
/**
*@method: lazyRegister 延迟(加载|初始化)模块注册函数
* @param: moduleId: 注册模块的名称(string)
* @param: creator: 模块的构造函数(string|function),如果为string,则会被parse成为function
* @param: els: 触发延迟加载模块的元素,可以是id、dom、domArray(jquery dom数组对象)
* @param: event: 延迟加载的驱动事件,可以是曝光事件、dom事件、manual事件{exposure|manual|normal
events like: click, mouseover, focus, mouseenter}
* @param: opt : (optional)延迟加载成功后的回调函数{Object}
*/
lazyRegister: function(moduleId, creator, els, event, opt){
var succeed = false;
if(opt.init === false){
succeed = jEngine.Core.LazyModule.register(els, event, opt);
}else{
var self = this;
succeed = jEngine.Core.LazyModule.register(els, event, opt,
function(){self._lazyStart(moduleId, creator)});
}
return succeed;
}
- 17. 性能提升—Fast By Default
lazyLoadModuleInit:function(){
//曝光延迟加载模块的注册方式
AppCore .lazyRegister(“mod-search-lazyload1”,
“Searchweb.Business.lazyloadModule1”,
$(".domDetail"), 'exposure',{
threshold:200,
module:this.config.lazyurl.lazyModule1
});
//交互事件驱动延迟加载模块的注册方式
AppCore .lazyRegister("mod-search-lazyload2",
"Searchweb.Business.lazyloadModule2",
'#mod-search-lazyload2', 'mouseover',{
module:this.config.lazyurl.lazyModule2
});
//使用代码主动触发的延迟加载模块的注册方式 Sandbox.notify("jEngine.lazyLoad", moduleId);
AppCore.lazyRegister("mod-search-lazyload3",
"Searchweb.Business.lazyloadModule3",
null, 'manual',{
module:this.config.lazyurl.lazyModule3
});
},
- 19. 性能提升—Fast By Default
<html>
<body>
… 省略 …
<!--页面上只应该有一个js文件被放置在<script>标签中加载,其余都是无阻塞加载-->
<script type=“text/javascript” src=“http://style.china.alibaba.com/js/app/search/v4.0/core/core.seed.js”></script>
<script>
jEngine.Core.Loader.js(“http://style.china.alibaba.com/js/lib/fdev-v4/core/fdev-min.js”)
.js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.logger.js”)
.js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.sandbox.js”)
.js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.lazymodule.js”)
.js(“http://style.china.alibaba.com/js/app/search/v4.0/core/core.application.js”)
//核心类加载完毕,开始加载业务类
.js(“http://style.china.alibaba.com/js/app/search/v4.0/example/config.js”)
.js(“http://style.china.alibaba.com/js/app/search/v4.0/example/module1.js”)
.js(“http://style.china.alibaba.com/js/app/search/v4.0/example/lazyinitmodule.js”)
.js(“http://style.china.alibaba.com/js/app/search/v4.0/example/app.start.js”);
</script>
</body>
</html>
- 22. 增强容错性—全局性异常处理
区分线上线下模式的方法:
var DEBUG_MOD = (typeof window.dmtrack ==="undefined") ? true : false;
try{
…
}
catch (ex) {
if(!DEBUG_MOD){
$.logger.error(“log error message:” + ex.message); //线上模式记录异常
}else{
throw ex; //debug模式下抛异常给浏览器
}
}
- 23. 增强容错性—全局性异常处理
var instance = new module.creator(sb), name, method;
instance.options = opt;
//debug模式下try catch不起作用,交由浏览器自己处理错误。
//online模式下可以把错误信息记录在日志服务器上。
if (!DEBUG_MOD){
for (name in instance){
method = instance[name];
if (typeof method == "function"){
instance[name] = function(name, method){
return function (){
try {
return method.apply(this, arguments);
}
catch(ex) {
$.logger.error(moduleId + " throw error: " + name + "()-> " +
ex.message); }
};
}(name, method);
}
}
}
return instance;