使用kissyLite支持第 三方内容开发                 李牧           2010-12-16
inf.js-2.0<script>  alimama_pid="mm_1_2_3";alimama_type=2;  alimama_width=270;alimama_height=390;</script><script src="htt...
inf.js-3.0<script>  alimama_pid="mm_1_2_3";alimama_type=2;  alimama_width=270;alimama_height=390;</script><script src="htt...
inf.js-3.0<script src="http://anydomain/inf.js"></script><script>  alimama_pid="mm_1_2_3";alimama_type=2;  alimama_width=2...
inf.js-3.0<!-- http://anydomain/any.js include the content of inf.js --><script src="http://anydomain/any.js"></script><sc...
inf.js-3.0<script>   //content of inf.js</script><script>  alimama_pid="mm_1_2_3";alimama_type=2;  alimama_width=270;alima...
alimama_show()http://a.com/a.html:             <head>                                   <script src="main.js"></script>   ...
Inf.js – 3.0 需求&功能•   需求               •   功能    •   必须稳定             •   "alimama_" 变量收集    •   足够小              •   锚点/容...
kissyLitekissylite,是kissy的一个支持有限方法的子集目标是用1.5k代码支持包管理和模块化管理                预览地址
ksLite -- 足够小统一风格的OOP,异步的带依赖关系模块化,简单的模板.•   S.mix•   S.extend•   S.clone•   S.add•   S.use•   S.getScript•   S.substitute
ksLite -- 基于包的扩展包内无限可扩展 => 模块名由包名,路径,文件名.三部分构成.{packagename} - [ {path_0} - ... - {path_n} - ] {filename}S.Config.lt_pkgs=...
ksLite -- 基于包的扩展可扩展无限包 => package root router在一个地址记录所有可用的包以及对应的class root.S.Config.lt_pkgrouter = http://a.alimama.cn/ksli...
ksLite -- 命名约定S.add("pkg1-path1-mod1",function(S,P){      S["pkg1"] = S["pkg1"] || {};      P = S["pkg1"];});S.use("pkg1-p...
ksLite -- 轻量的addS.add = function(name, fn, config){    var mods = S.Env.mods, mod;    if (mods[name] && mods[name].status ...
kissyLite -- 简单的useS.use = function(modNames, callback){    var mods = S.Env.mods;    modNames = modNames.split(,);    S.a...
ksLite – 明确的attachMod如果模块LOADED,直接attach.如果模块没有LOADED,则异步载入模块.然后attach.模块load之后,attach时如果发现requires.attachMods(requires,ca...
asyncer -- 异步执行单元/** @interface asyncer 可能需要等待再回调的function.* @param { * } args* @param { Function | Object } callback info...
parallel asyncers asyncerA(a,function(resA){    window.resA = resA;    if(window.resB)c();});asyncerB(b,function(resB){  ...
serial asyncers asyncerA(a,function(resA){      asyncerB(b,function(resB){            asyncerC(c,function(resC){         ...
S.multiAsync S.multiAsync(asyncers,callback,timeout,isSerial);实例:S.attachMods = function(modNames,callback){  var i, asyn...
串行模块加载优化场景:  mod-a requires mod-b  mod-b requires mod-c开发时:  S.use(“mod-a”,function(){}); //串行的载入mod-a,mod-b,mod-c.效率不高代码开...
避免循环引用模块和包都是无限可扩展的,一旦出现循环引用,影响客户页面稳定性场景:  mod-a requires mod-b  mod-b requires mod-c  mod-c requires mod-a运行时:  S.use("mod...
简单粗暴的算法在env中有一个对象记录  x模块依赖哪些模块  x模块支持哪些模块当出现x依赖x的时候 thorw error.
避免循环引用实例Load mod-a => requires b  依赖关系:      a => b  支持关系      b <= a
避免循环引用实例Load mod-b => requires c  依赖关系:      a => b , c      b => c  支持关系:      b <= a      c <= b , a
避免循环引用实例Load mod-c => requires a  依赖关系:      a => b , c , a      b => c , a      c => a  a依赖a throw Error.
简单粗暴的算法多次遍历 + 数据冗余.广告类小应用勉强可以.求更好的算法
被Kissy兼容S.app("KSLITE");仍然是发布前预编译时,生成面向KISSY.add的模块注册代码.
End
Upcoming SlideShare
Loading in …5
×

使用kslite支持第三方内容开发

1,118 views

Published on

Published in: Technology, Business
  • Be the first to comment

使用kslite支持第三方内容开发

  1. 1. 使用kissyLite支持第 三方内容开发 李牧 2010-12-16
  2. 2. inf.js-2.0<script> alimama_pid="mm_1_2_3";alimama_type=2; alimama_width=270;alimama_height=390;</script><script src="http://a.alimama.cn/inf.js"></script>
  3. 3. inf.js-3.0<script> alimama_pid="mm_1_2_3";alimama_type=2; alimama_width=270;alimama_height=390;</script><script src="http://anydomain/inf.js"></script>
  4. 4. inf.js-3.0<script src="http://anydomain/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>
  5. 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. 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. 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. 8. Inf.js – 3.0 需求&功能• 需求 • 功能 • 必须稳定 • "alimama_" 变量收集 • 足够小 • 锚点/容器 iframe 输出 • 可扩展 -- 结构化 • 动态内容无阻引入 • kissyLite
  9. 9. kissyLitekissylite,是kissy的一个支持有限方法的子集目标是用1.5k代码支持包管理和模块化管理 预览地址
  10. 10. ksLite -- 足够小统一风格的OOP,异步的带依赖关系模块化,简单的模板.• S.mix• S.extend• S.clone• S.add• S.use• S.getScript• S.substitute
  11. 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. 12. ksLite -- 基于包的扩展可扩展无限包 => package root router在一个地址记录所有可用的包以及对应的class root.S.Config.lt_pkgrouter = http://a.alimama.cn/kslite/router.jsS.mix(S.Config.lt_pkgs,{ pkg1:"http://a.alimama.cn/pkg1/", pkg2:"http://demo.taobao.com/tbad/pkg2/"});当自带S.Config.lt_pkgs没有相关配置时询问pkgrouter.
  13. 13. ksLite -- 命名约定S.add("pkg1-path1-mod1",function(S,P){ S["pkg1"] = S["pkg1"] || {}; P = S["pkg1"];});S.use("pkg1-path1-mod1",function(S,P){});保证包内对象都在名称空间P,即S.P内.相当于另一个途径实现S.app(),嵌入至S的app.为了被Kissy兼容,P只能作为开发约定,手动写在每个包中.
  14. 14. ksLite -- 轻量的addS.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. 15. kissyLite -- 简单的useS.use = function(modNames, callback){ var mods = S.Env.mods; modNames = modNames.split(,); S.attachMods(modNames, function(){ if (callback) callback(S); });}将attachMods单独提出来.不止供use中使用.
  16. 16. ksLite – 明确的attachMod如果模块LOADED,直接attach.如果模块没有LOADED,则异步载入模块.然后attach.模块load之后,attach时如果发现requires.attachMods(requires,callbcak).之后attach.
  17. 17. asyncer -- 异步执行单元/** @interface asyncer 可能需要等待再回调的function.* @param { * } args* @param { Function | Object } callback info* @param {number} timeout(ms)* @return {Object}*/function ayncer(args , callback,timeout){ }
  18. 18. parallel asyncers asyncerA(a,function(resA){ window.resA = resA; if(window.resB)c();});asyncerB(b,function(resB){ window.resB = resB; if(window.resA)c();})function c(){ //your code run after resA & resB both returend.}
  19. 19. serial asyncers asyncerA(a,function(resA){ asyncerB(b,function(resB){ asyncerC(c,function(resC){ //your code. }) });});
  20. 20. S.multiAsync S.multiAsync(asyncers,callback,timeout,isSerial);实例:S.attachMods = function(modNames,callback){ var i, asyncers = {}; for (i = 0; i < modNames.length; i++) { asyncers[modNames[i]] = { f: S.attachMod, a: modNames[i] }; } S.multiAsync(asyncers, callback);}
  21. 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 !");
  22. 22. 避免循环引用模块和包都是无限可扩展的,一旦出现循环引用,影响客户页面稳定性场景: mod-a requires mod-b mod-b requires mod-c mod-c requires mod-a运行时: S.use("mod-a",function(){}); throw new Error("Fatal Error,Loop Reqs!");
  23. 23. 简单粗暴的算法在env中有一个对象记录 x模块依赖哪些模块 x模块支持哪些模块当出现x依赖x的时候 thorw error.
  24. 24. 避免循环引用实例Load mod-a => requires b 依赖关系: a => b 支持关系 b <= a
  25. 25. 避免循环引用实例Load mod-b => requires c 依赖关系: a => b , c b => c 支持关系: b <= a c <= b , a
  26. 26. 避免循环引用实例Load mod-c => requires a 依赖关系: a => b , c , a b => c , a c => a a依赖a throw Error.
  27. 27. 简单粗暴的算法多次遍历 + 数据冗余.广告类小应用勉强可以.求更好的算法
  28. 28. 被Kissy兼容S.app("KSLITE");仍然是发布前预编译时,生成面向KISSY.add的模块注册代码.
  29. 29. End

×