More Related Content
Similar to 使用kslite支持第三方内容开发
Similar to 使用kslite支持第三方内容开发 (20)
使用kslite支持第三方内容开发
- 5. inf.js-3.0
<!-- http://anydomain/any.js include the content of inf.js -->
<script src="http://anydomain/any.js"></script>
<script>
alimama_pid="mm_1_2_3";alimama_type=2;
alimama_width=270;alimama_height=390;
window.alimama_show && alimama_show();
</script>
- 6. inf.js-3.0
<script>
//content of inf.js
</script>
<script>
alimama_pid="mm_1_2_3";alimama_type=2;
alimama_width=270;alimama_height=390;
window.alimama_show && alimama_show();
</script>
- 7. alimama_show()
http://a.com/a.html: <head>
<script src="main.js"></script>
</head>
<script src="inf.js"></script>
<script>
alimama_show();
</script> <div>
<!-- ad content-->
</div>
<iframe src="" style="display:none !important" id="anchor-pid">
<!-- ad content-->destory iframe onunload onbeforeunload
</iframe>
- 8. Inf.js – 3.0 需求&功能
• 需求 • 功能
• 必须稳定 • "alimama_" 变量收集
• 足够小 • 锚点/容器 iframe 输出
• 可扩展 -- 结构化 • 动态内容无阻引入
• kissyLite
- 11. ksLite -- 基于包的扩展
包内无限可扩展 => 模块名由包名,路径,文件名.三部分构成.
{packagename} - [ {path_0} - ... - {path_n} - ] {filename}
S.Config.lt_pkgs={
inf:"http://a.alimama.cn/kslite/",
test:"http://demo.taobao.com/tbad/kslite/"
}
模块"inf-a“: http://a.alimama.cn/kslite/inf/a.js
模块"test-t-1“: http://demo.taobao.com/tbad/kslite/test/t/1.js
- 12. ksLite -- 基于包的扩展
可扩展无限包 => package root router
在一个地址记录所有可用的包以及对应的class root.
S.Config.lt_pkgrouter = http://a.alimama.cn/kslite/router.js
S.mix(S.Config.lt_pkgs,{
pkg1:"http://a.alimama.cn/pkg1/",
pkg2:"http://demo.taobao.com/tbad/pkg2/"
});
当自带S.Config.lt_pkgs没有相关配置时询问pkgrouter.
- 14. ksLite -- 轻量的add
S.add = function(name, fn, config){
var mods = S.Env.mods, mod;
if (mods[name] && mods[name].status > INIT)return;
mod = {name: name,fn: fn || null,status: LOADED};
mods[name] = S.mix(mod,config);
}
不提前attach,保证模块在使用之前没有多余的代码执行消耗.
可选优化:domready之前按需执行,domready之后选择性预热.
- 15. kissyLite -- 简单的use
S.use = function(modNames, callback){
var mods = S.Env.mods;
modNames = modNames.split(',');
S.attachMods(modNames, function(){
if (callback) callback(S);
});
}
将attachMods单独提出来.不止供use中使用.
- 17. asyncer -- 异步执行单元
/*
* @interface asyncer 可能需要等待再回调的function.
* @param { * } args
* @param { Function | Object } callback info
* @param {number} timeout(ms)
* @return {Object}
*/
function ayncer(args , callback,timeout){ }
- 21. 串行模块加载优化
场景:
mod-a requires mod-b
mod-b requires mod-c
开发时:
S.use(“mod-a”,function(){}); //串行的载入mod-a,mod-b,mod-c.效率不高
代码开发完成,发布上线之前,手动预编译优化(就是Google Closure做事的时候):
S.log("should use('mod-a,mod-b,mod-c') here for parallel download !");
S.log("should combine 'mod/b.js','mod/c.js' to 'mod/a.js' for reduce requests !");