Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KsLite-for-3rd-Part-Content-Develop
Search
limu
July 31, 2012
Technology
1
130
KsLite-for-3rd-Part-Content-Develop
limu
July 31, 2012
Tweet
Share
More Decks by limu
See All by limu
OPOA-in-Action
lenel
13
1.1k
ETao UX Magix and Brix
lenel
2
280
Taobao-AD-JSBeacon-and-Creative-Optimize
lenel
2
290
Other Decks in Technology
See All in Technology
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
Engineer Career Talk
lycorp_recruit_jp
0
190
Terraform Stacks入門 #HashiTalks
msato
0
360
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
250
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
110
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
Taming you application's environments
salaboy
0
190
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
120
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Gamification - CAS2011
davidbonilla
80
5k
Fireside Chat
paigeccino
34
3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Applications with DynamoDB
mza
90
6.1k
Practical Orchestrator
shlominoach
186
10k
How to train your dragon (web standard)
notwaldorf
88
5.7k
How to Ace a Technical Interview
jacobian
276
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Transcript
使用KsLite支持第三方 内容开发 李牧 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="http://a.alimama.cn/inf.js"></script>
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>
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>
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>
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>
http://a.com/a.html: alimama_show() <script src="inf.js"></script> <script> alimama_show(); </script> <iframe src="" style="display:none
!important" id="anchor-pid"> <!-- ad content--> </iframe> <head> <script src="main.js"></script> </head> <div> <!-- ad content--> </div> destory iframe onunload onbeforeunload
Inf.js – 3.0 需求&功能 • 需求 • 必须稳定 • 足够小
• 可扩展 -- 结构化 • 功能 • "alimama_" 变量收集 • 锚点/容器 iframe 输出 • 动态内容无阻引入 • kissyLite
KsLite kissylite,是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={ 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
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.
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只能作为开发约定,手动写在每个包中.
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之后选择性预热.
KsLite -- 简单的use S.use = function(modNames, callback){ var mods =
S.Env.mods; modNames = modNames.split(','); S.attachMods(modNames, function(){ if (callback) callback(S); }); } 将attachMods单独提出来.不止供use中使用.
KsLite – 明确的attachMod 如果模块LOADED,直接attach. 如果模块没有LOADED,则异步载入模块.然后attach. 模块load之后,attach时如果发现requires. attachMods(requires,callbcak).之后attach.
asyncer -- 异步执行单元 /* * @interface asyncer 可能需要等待再回调的function. * @param
{ * } args * @param { Function | Object } callback info * @param {number} timeout(ms) * @return {Object} */ function ayncer(args , callback,timeout){ }
parallel asyncers L 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. }
serial asyncers L asyncerA(a,function(resA){ asyncerB(b,function(resB){ asyncerC(c,function(resC){ //your code. }) });
});
S.multiAsync J 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); }
串行模块加载优化 场景: 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 !");
避免循环引用 模块和包都是无限可扩展的,一旦出现循环引用,影响客户页面稳定性 场景: 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!");
简单粗暴的算法 在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.
简单粗暴的算法 多次遍历 + 数据冗余. 广告类小应用勉强可以. 求更好的算法J
被Kissy兼容 S.app("KSLITE"); 仍然是发布前预编译时,生成面向KISSY.add的模块注册代码.
End