1. プロトタイプベースOOP
ライブラリmix.js
Web技術勉強会 2011/11/12
Ryuichi TANAKA(@mapserver2007)

2. mix.jsとは
• https://github.com/mapserver2007/mixjs
• プロトタイプベースオブジェクト指向プログラミ
ングを支援するライブラリ
• 親子関係が持てる
• 簡単に継承(mix-in)できる
• IEでも動く

3. JavaScriptで継承はやりづらい
• 「JavaScript」「継承」とかで検索するとでてくる
が、どれも微妙。
• A.prototype = new B();
– ありがち
– そもそも親子関係になってない
• jQuery.extend
– プロパティを上書きするだけ
– やっぱり親子関係になってない

4. 継承は親子を作る
• 継承というからには親子関係が普通ある
• JavaScriptはそれをやるのがすごく大変

5. とにかく簡単に継承
• var obj = A.mix(B)
• これだけで継承(mix-in)が完了
• とにかく簡単

6. バグは収束した
• mix.jsベースでコードを書き直し中
• 動作問題なし
• バグはほぼ潰しきった(はず)

7. 機能を簡単に説明

8. モジュールを定義する
• モジュールという単位でクラスに相当するも
のを定義する
• モジュールを組み合わせて一つのオブジェク
ト(インスタンスに相当)を作る
• mix-inした順番通りに親子関係が構築される

9. モジュールを定義する
Mixjs.module(“Iphone”, {
name: function() {
return “iPhone”;
}
});
// Iphone.name();

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するほうが自然

15. 静的にmix-in(内部mix-in)
Mixjs.module(“Iphone”, {
include: Feature,
name: function() {
return “iPhone”;
}
});

16. 静的にmix-in(内部多重継承)
Mixjs.module(“Iphone”, {
include: [Feature, Telephone],
name: function() {
return “iPhone”;
}
});

17. mix-in済みモジュールか判定
var obj = Iphone.mix(Feature);
obj.has(Iphone); // true
obj.has(Telephone); //false

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

19. 同じモジュールはmix-inできない
• エラーにはならないが同じモジュールはmix-
inできない
var obj = Iphone.mix(Iphone);
obj.hasOwnProperty(“parent”); // false

20. 継承のルール

21. １．通常のmix-in
• M1 mix M2 M1 -> M2
• M1 mix M2 mix M3
M1 -> M2 -> M3

22. ２．多重継承
• M1 mix (M2, M3)
M1 -> (M2->M3) # ()内でまずmix-in
M1 -> (M2’)
M1 -> M2-> M3
通常のmix-inのチェーンとはmix-in順が異なる

23. ３．同じモジュールをmix-in
• T1 mix T1 T1

24. ３．同じモジュールをmix-in
• T1 mix T1 T1
• T1 mix T2 mix T1 T1 -> T2

25. ４．mix-in済みモジュールをmix-in
• T1 mix (T2 mix T1) mix T1
T1 -> T2’ -> T1
T1 -> T2’
T1 -> T2 -> T1
T2’はT2ともT1とも等しくないためこ
のようにmix-inされる

26. ５．同じmix-in済みモジュールが複数
ある場合のmix-in
T1 mix (T2 mix T1) mix (T2 mix T1)
T1 -> T2’ -> T2’
T1 -> T2’
T1 -> T2 -> T1
T2’は２つあるので１つはmix-inさ
れない

27. ６．すべて異なるモジュールだが同じ
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が繰り返されていると循環参
照エラーとなる。

28. パフォーマンス測定

29. 前提条件
• 測定環境
– Core2Duo P8700 2.53GHz
– Mem 4GB
– WindowsVista Ultimate SP2
• 実行環境
– Chrome15.0.874.106 m
– IE8
– Firefox8

30. 測定ツール
• benchmark.js
– http://benchmarkjs.com/
• 実行プログラム
– https://gist.github.com/1358167

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でアプリを作る
– パフォーマンス改善