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
120
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
260
Taobao-AD-JSBeacon-and-Creative-Optimize
lenel
2
270
Other Decks in Technology
See All in Technology
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
190
Money-saving tips for the frugal serverless developer
theburningmonk
1
410
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
1
180
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
440
Deno で作る快適な “as Code” プラットフォーム – TSKaigi 2024
pizzacat83
4
320
ワールドカフェ再び、そしてロール・ツール群の開発 / World Café Again, and Development of Suites of Roles and Tools
ks91
PRO
0
130
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
230
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
4.8k
Google Cloud Next '24 Recap in ZOZO AIにより変わる開発 運用/Development and operation changed by AI
gachimuchiengineer
0
210
Security Hubのセキュリティスコアはどうやって計算されるか
toru_kubota
0
110
【リラン】AIの光と闇?失敗しないために知っておきたいAIリスクとその対応 ①政府の動き編
tkhresk
0
140
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
190
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
[RailsConf 2023] Rails as a piece of cake
palkan
29
4.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Designing with Data
zakiwarfel
96
4.8k
Become a Pro
speakerdeck
PRO
13
4.6k
Happy Clients
brianwarren
92
6.4k
Building Applications with DynamoDB
mza
88
5.7k
Building an army of robots
kneath
300
42k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Web Components: a chance to create the future
zenorocha
306
41k
Rails Girls Zürich Keynote
gr2m
91
13k
The Language of Interfaces
destraynor
151
23k
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