More Related Content
Similar to Web技術勉強会 20111112
Similar to Web技術勉強会 20111112 (20)
Web技術勉強会 20111112
- 1. プロトタイプベースOOP
ライブラリmix.js
Web技術勉強会 2011/11/12
Ryuichi TANAKA(@mapserver2007)
- 10. モジュールを定義する
var namespace = {}:
Mixjs.module(“Iphone”, namespace, {
name: function() {
return “iPhone”;
}
});
// namespace.Iphone.name();
- 11. モジュールをmix-inする
var obj = Iphone.mix(Feature);
var obj2 = Iphone.mix(Feature).mix(Telephone);
var obj3 = Iphone.mix(Feature, Telephone);
- 12. 親にしかないメソッドにアクセス
var obj2 = Iphone.mix(Feature).mix(Telephone);
// Telephone#getType()にアクセスしたい
// Iphone, FeatureはgetType()を持っていない
obj2.getType(); // これでOKOK
IE以外ではプロトタイプチェーンで取得、IEでは
mix-in時に親のメソッドを自身にコピーする
- 13. 親にある同じ名前のメソッドにアクセ
スしたい
var obj2 = Iphone.mix(Feature).mix(Telephone);
// name()はIphone, Feature, Telephone全員が
// もっている
obj2.name(); // Iphone#name()
obj2.parent.name(); // Feature#name()
obj2.parent.parent.name(); // Telephone#name()
- 14. あらかじめmix-in済みのモジュールを
定義したい
• これまでのmix-inは外部mix-in
• 外部mix-inはモジュール定義後に動的にmix-
inする
• モジュール定義時に親子関係が確定してい
る場合は静的にmix-inするほうが自然
- 18. 自分自身の参照位置を基底に移動
Mixjs.module(“Feature”, {
name: function() {
// this.name()だと参照できない
// this.baseを使うと参照位置を継承済みオブジェクトの最も子供の
// 位置に移動させることができる
this.base.name();
}
});
Mixjs.module(“Iphone”, {
include: Feature,
name: function() {
return “iphone”;
}
});
Iphone.parent.name(); // iphone
- 22. 2.多重継承
• M1 mix (M2, M3)
M1 -> (M2->M3) # ()内でまずmix-in
M1 -> (M2’)
M1 -> M2-> M3
通常のmix-inのチェーンとはmix-in順が異なる
- 26. 5.同じmix-in済みモジュールが複数
ある場合のmix-in
T1 mix (T2 mix T1) mix (T2 mix T1)
T1 -> T2’ -> T2’
T1 -> T2’
T1 -> T2 -> T1
T2’は2つあるので1つはmix-inさ
れない
- 27. 6.すべて異なるモジュールだが同じ
mix-in順序が含まれる
T1 mix (T3 mix T2 mix T1) mix (T2 mix
T1)
T1 -> T3’ -> T2’
T1 -> T3->T2->T1->T2->T1
Cyclic Error
T2->T1が繰り返されていると循環参
照エラーとなる。
- 29. 前提条件
• 測定環境
– Core2Duo P8700 2.53GHz
– Mem 4GB
– WindowsVista Ultimate SP2
• 実行環境
– Chrome15.0.874.106 m
– IE8
– Firefox8
- 31. 測定結果
include: [Test1, Test2, Test3]
include: [Test1, Test2]
include: Test1
IE8
(Test1.mix(Test2)).mix(Test3.mix(Test4))
Firefox
Chrome
Test1.mix(Test2, Test3, Test4)
Test1.mix(Test2).mix(Test3)
Test1.mix(Test2)
0 0.2 0.4 0.6 0.8 1 1.2
- 32. Chrome
Pettern ops/sec msec
Test1.mix(Test2) 55,646 0.017971
Test1.mix(Test2).mix(Test3) 9,264 0.107945
Test1.mix(Test2, Test3, Test4) 13,588 0.073594
(Test1.mix(Test2)).mix(Test3.mix(Test4)) 13,639 0.073319
include: Test1 11,232 0.089031
include: [Test1, Test2] 3,750 0.266667
include: [Test1, Test2, Test3] 2,374 0.42123
- 33. IE8
Pettern ops/sec msec
Test1.mix(Test2) 7526 0.132873
Test1.mix(Test2).mix(Test3) 1739 0.575043
Test1.mix(Test2, Test3, Test4) 3244 0.308261
(Test1.mix(Test2)).mix(Test3.mix(Test4)) 2200 0.454545
include: Test1 3009 0.332336
include: [Test1, Test2] 1338 0.747384
include: [Test1, Test2, Test3] 877 1.140251
- 34. Firefox
Pettern ops/sec msec
Test1.mix(Test2) 19123 0.052293
Test1.mix(Test2).mix(Test3) 6644 0.150512
Test1.mix(Test2, Test3, Test4) 6109 0.163693
(Test1.mix(Test2)).mix(Test3.mix(Test4)) 6925 0.144404
include: Test1 7437 0.134463
include: [Test1, Test2] 3006 0.332668
include: [Test1, Test2, Test3] 2661 0.375799
- 35. 結論
• Chromeで一番速い
– まあまあ予想通り
• IEは突出して遅い
– 予想通りだが内部実装が違うことも多少影響か
• includeによる内部mix-inは外部mix-inに比べ極
端に遅い
– 改善の余地あり
• mix-inチェーンより多重継承でまとめてmix-inす
るほうが速い
– 要原因調査
- 36. まとめ
• mix.jsのメリット
– 親子関係を構築できる
– 簡単
– IEでも動く
– 他ライブラリに依存しない
• 今後の予定
– mix.jsでアプリを作る
– パフォーマンス改善