Soumettre la recherche
Mettre en ligne
Web技術勉強会 20110528
•
0 j'aime
•
847 vues
龍一 田中
Suivre
プロトタイプベースOOPライブラリの紹介
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 21
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
N Millard Clouds, Crowds And Customers
N Millard Clouds, Crowds And Customers
hudsonpd
Action Guide Facebook 1.03.2010
Action Guide Facebook 1.03.2010
mythicgroup
Yokohama mp for newbies
Yokohama mp for newbies
Satoshi Iida
appengine ja night BT 近くを探す?
appengine ja night BT 近くを探す?
Suguru ARAKAWA
25 Linked In Tips For Job Seekers
25 Linked In Tips For Job Seekers
ehlung
Web技術勉強会 20110723
Web技術勉強会 20110723
龍一 田中
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
Kazunori Tatsuki
Web技術勉強会 20110514
Web技術勉強会 20110514
龍一 田中
Recommandé
N Millard Clouds, Crowds And Customers
N Millard Clouds, Crowds And Customers
hudsonpd
Action Guide Facebook 1.03.2010
Action Guide Facebook 1.03.2010
mythicgroup
Yokohama mp for newbies
Yokohama mp for newbies
Satoshi Iida
appengine ja night BT 近くを探す?
appengine ja night BT 近くを探す?
Suguru ARAKAWA
25 Linked In Tips For Job Seekers
25 Linked In Tips For Job Seekers
ehlung
Web技術勉強会 20110723
Web技術勉強会 20110723
龍一 田中
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
Kazunori Tatsuki
Web技術勉強会 20110514
Web技術勉強会 20110514
龍一 田中
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
龍一 田中
Web技術勉強会 20120728
Web技術勉強会 20120728
龍一 田中
Web技術勉強会 20120609
Web技術勉強会 20120609
龍一 田中
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
龍一 田中
Web技術勉強会 20111112
Web技術勉強会 20111112
龍一 田中
Web技術勉強会 20110611
Web技術勉強会 20110611
龍一 田中
Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
Web技術勉強会 20100424
Web技術勉強会 20100424
龍一 田中
Web技術勉強会 第38回
Web技術勉強会 第38回
龍一 田中
Web技術勉強会 第37回
Web技術勉強会 第37回
龍一 田中
Web技術勉強会 第34回
Web技術勉強会 第34回
龍一 田中
Web技術勉強会 第33回
Web技術勉強会 第33回
龍一 田中
Web技術勉強会 第31回
Web技術勉強会 第31回
龍一 田中
Web技術勉強会 第30回
Web技術勉強会 第30回
龍一 田中
Web技術勉強会 第29回
Web技術勉強会 第29回
龍一 田中
Web技術勉強会 第28回
Web技術勉強会 第28回
龍一 田中
Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
Web技術勉強会 第25回
Web技術勉強会 第25回
龍一 田中
Web技術勉強会23回目
Web技術勉強会23回目
龍一 田中
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Contenu connexe
Plus de 龍一 田中
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
龍一 田中
Web技術勉強会 20120728
Web技術勉強会 20120728
龍一 田中
Web技術勉強会 20120609
Web技術勉強会 20120609
龍一 田中
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
龍一 田中
Web技術勉強会 20111112
Web技術勉強会 20111112
龍一 田中
Web技術勉強会 20110611
Web技術勉強会 20110611
龍一 田中
Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
Web技術勉強会 20100424
Web技術勉強会 20100424
龍一 田中
Web技術勉強会 第38回
Web技術勉強会 第38回
龍一 田中
Web技術勉強会 第37回
Web技術勉強会 第37回
龍一 田中
Web技術勉強会 第34回
Web技術勉強会 第34回
龍一 田中
Web技術勉強会 第33回
Web技術勉強会 第33回
龍一 田中
Web技術勉強会 第31回
Web技術勉強会 第31回
龍一 田中
Web技術勉強会 第30回
Web技術勉強会 第30回
龍一 田中
Web技術勉強会 第29回
Web技術勉強会 第29回
龍一 田中
Web技術勉強会 第28回
Web技術勉強会 第28回
龍一 田中
Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
Web技術勉強会 第25回
Web技術勉強会 第25回
龍一 田中
Web技術勉強会23回目
Web技術勉強会23回目
龍一 田中
Plus de 龍一 田中
(20)
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20120728
Web技術勉強会 20120728
Web技術勉強会 20120609
Web技術勉強会 20120609
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20111112
Web技術勉強会 20111112
Web技術勉強会 20110611
Web技術勉強会 20110611
Web技術勉強会 20100925
Web技術勉強会 20100925
Web技術勉強会 20100424
Web技術勉強会 20100424
Web技術勉強会 第38回
Web技術勉強会 第38回
Web技術勉強会 第37回
Web技術勉強会 第37回
Web技術勉強会 第34回
Web技術勉強会 第34回
Web技術勉強会 第33回
Web技術勉強会 第33回
Web技術勉強会 第31回
Web技術勉強会 第31回
Web技術勉強会 第30回
Web技術勉強会 第30回
Web技術勉強会 第29回
Web技術勉強会 第29回
Web技術勉強会 第28回
Web技術勉強会 第28回
Web技術勉強会 第26回
Web技術勉強会 第26回
Web技術勉強会 第25回
Web技術勉強会 第25回
Web技術勉強会23回目
Web技術勉強会23回目
Dernier
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Dernier
(12)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Web技術勉強会 20110528
1.
Web技術勉強会
2011/05/28 Ryuichi TANAKA/@mapserver2007/summer-lights.jp JavaScriptでプロトタイプベースオブジェクト指向プログラミング ~続・親子関係を維持してクラスを使わないオブジェクト指向プログラミング手法~
2.
前回の内容 簡単に継承 var obj =
Base.mix(Utils).mix(Http); mixメソッドで簡単にモジュールをMix-in 親子関係を維持した継承 obj.parent().getName(); 子と親で同じメソッドがあった場合、従来の継承では上書きされ てしまうため親メソッドにアクセス不能だったが、parent()経由 でアクセス可能にした
3.
今回の目的 前回の問題点の解消 Object拡張によるprototype汚染問題 for-inに拡張したプロパティが含まれる問題
実装の致命的ミス(あとで発覚) IE対応 IEにはプロトタイプチェーンがないのでメソッドのチェーン探索 ができない問題 __proto__がないので親を辿れない問題 前回の残課題 多重継承機能未実装 新たな課題 Mix-in、多重継承したオブジェクトを再継承する機能 テスト 自動テストで正しく動くかどうか確認する 公開 正式公開(ライセンスを付与して使えるようにする)
4.
前回の問題点① prototype汚染問題 起こる実害 オブジェクトを作ると必ず追加したメソッドmix, parent
が付随してきてしまう これによりmix, parentが予約させるためライブラリ使用 者が再定義不能、for-inループ時にmix, parentが出現す る問題が発生する var obj = {}; // = new Object(); for (var prop in obj) { alert(prop); // mix, parent }
5.
前回の問題点① prototype汚染はやはり避けるべきである 汎用性を求めない、プロジェクトの一部でしか使わ ないなど、範囲がごく狭い場合ではあるいは許容し てもいいかもしれないが、一般的には避けるべき。 当初、狭い範囲のライブラリの扱いだったが、急遽汎用 性を求めるように方向転換したため変更の必要が出た。 for-inに含まれるのがあまりに大きい。回避も可能 だが、毎回Object#hasOwnPropertyでチェック しないといけない。hasOwnPropertyの存在を知 らない人が使ったら100%バグになる。
これは無視できない問題。この問題がある以上 prototype汚染は避けないと後々つらいことになる。
6.
前回の問題点① 実は前回の内容には決定的なバグが存在していた これはひどい。先週時点では糞ライブラリと言われても 反論できないです…。 mixi-inで「オブジェクト自体」を拡張していた つまり… var
obj = Iphone.mix(Feature).mix(Telephone); alert(obj.parent().getPhoneName()); // garake- var obj2 = Iphone; // 継承しない alert(obj2.parent().getPhoneName()); // garake- \(^o^)/ もとのオブジェクト(Iphone)が勝手に拡張されるた め、Mix-in後に単独で使ったりするとおかしなこと になる。
7.
前回の問題点①を解決 mix, parentメソッドを動的に追加するモジュール を一つ定義するように変更。 このモジュールを経由してオブジェクトを生成する ルールとする。 Objectを拡張しないので{}.mix(), {}.parent()は実行 できない=for-in問題も解決。 var
Module = {}; Module.create = function() { // … };
8.
前回の問題点①を解決 オブジェクト自体を拡張しないようにする ここで言うオブジェクトとは、Objectのことではなく利 用者が定義したモジュールオブジェクトのこと JavaScriptは参照渡しが基本
そのままオブジェクト(this)を拡張するともとのオブジェ クトにも影響が出てしまう JavaScriptにはディープコピーがない var copy = origin; とやってもシャローコピーになる copyを拡張するとoriginも拡張される var copy = clone(origin); のようにディープコピーする 処理を実装してあげることで解決する
9.
前回の問題点①を解決 var Iphone =
Module.create({ getPhoneName: function() { return “iphone”; } }); // alert(Iphone.hasOwnProperty(“mix”)); // true // alert(Iphone.hasOwnProperty(“parent”); // true // Feature, Telephoneも同様に定義 var obj = Iphone.mix(Feature).mix(Telephone); alert(obj.parent().getPhoneName()); // garake- var obj2 = Iphone; alert(obj2.parent().getPhoneName()); // undefined method
10.
前回の問題点② IE未対応 趣味なら問題ない(公開してるシステムはほとんどIE未対 応)
だが、個人的な野望として仕事で使いたいと密かに思っ てるのでこれはなんとかしたい。 仕事ではIEだらけ。避けて通れない…。 ライセンスさえクリア出来れば仕事でも使える。 とはいえ簡単じゃない モダンブラウザでできた__proto__による継承関係、プ ロトタイプチェーンを利用した親のメソッド自動探索が 使えない。つまりこれを自前で作らないといけない。 この問題が今回の最難関
11.
前回の問題点②を解決 __proto__を使わないで動的に親子関係を構築する 以下のパターン全てに対応する(パターンが多いので 一部省略、テストでは全部実施) 単独Mix-inパターン Iphone.mix(Feature) 単独Mix-in連鎖パターン Iphone.mix(Feature).mix(Telephone) 多重継承パターン
Iphone.mix(Feature, Telephone) 多重継承連鎖パターン Iphone.mix(Fetature, Telephone).mix(Android, Ipad)
12.
単独Mix-inオブジェクトを親にしたMix-inパターン var obj
= Iphone.mix(Feature) obj.mix(Telephone) 単独Mix-inオブジェクトを子にした多重継承パターン var obj = Iphone.mix(Feature) Telephone.mix(obj, Android) 多重継承オブジェクトを親にしたMix-inパターン var obj = Iphone.mix(Feature, Telephone) obj.mix(Android) 多重継承オブジェクトを子にした多重継承パターン var obj = Iphone.mix(Feature, Telephone) Android.mix(obj, Ipad)
13.
実装方法について(__proto__の代用) Iphone.mix(Feature).mix(Telephone)
② オブジェクト探索は Iphone プロトタイプチェーンをと同じこと。 ① Feature 探索処理を自前で実装した。 parent() ③ getPhone parent() Telephone Name() getPhone Name() parent() getPhone Name() ①:子(Iphone#parent)は親(Feature)オブジェクトを指すようにする ②:①で一つのオブジェクトとして扱う ③:②のオブジェクト(parentの指す先を探し続ける)を探索して一番親 のオブジェクト(Feature#parent)を見つけて、その親(Telephone)を 指すようにする
14.
実装方法について(プロトタイプチェーンの代用) var obj =
Iphone.mix(Feature).mix(Telephone) obj.getType() // Telephone#getType obj Iphone Feature ④ parent() parent() ③ parent() getPhone getPhone ① Name() getPhone Name() Telephone Name() getType() getType() getType() parent() getPhone Name() ② getType() ①:objにコピーする ②:子は親(祖先)を辿り、子にないメソッドがあればobjにコピーする。かつ、親は その親(祖先)を辿り、親にないメソッドがあれば親にコピーする。 ③:親を辿り、すでに子にコピー済みのメソッドであればコピーしない ④:parent()はコピーしない(mix()も同様)
15.
実装方法について(プロトタイプチェーンの代用) 子に親以上(祖先すべて)のメソッドをコピーする理由 プロトタイプチェーンで辿れないのですべて子にコピーする こうすることで、呼び出し方はモダンブラウザと同じになる
(内部処理は異なる) 祖先にしか存在しないメソッドを子にコピーしているの で若干効率が悪い IEではこうするしかないと判断(もっと良いやり方があれば…) IEは割り切るしかないかな、と。 現状ではIEとその他ブラウザで同じ動作をするようにま でなったのでひとまずよしとした。
16.
前回未実装機能を実装 多重継承 obj =
Iphone.mix(Feature, Telephone); 実装自体は非常に簡単に完了 引数を可変にするだけ。arguments.length回同じことをする だけ。
17.
Mix-in、多重継承したオブジェクトを再継承する 機能 Mix-inしたオブジェクトを継承対象にする obj =
Iphone.mix(Feature).mix(Telephone); obj2 = Android.mix(obj); obj3 = obj2.mix(Ipad) 多重継承したオブジェクトを継承対象にする obj = Iphone.mix(Feature, Telephone); obj2 = Android.mix(obj, Ipad); obj3 = obj.mix(Android, Ipad); 既存の継承機能を少し拡張することで対応。そんなに難 しくなかった。
18.
テスト QUnit jQueryのテスト用フレームワーク。現在はjQuery非依存のjs でもテスト可能。
xUnitが分かればすぐ使える ローカルに落としてきて、test/index.htmlを実行するだけ https://gist.github.com/982540 21項目、61個のテストを作成 IE8,Chrome11ですべてパスを確認
19.
公開について https://github.com/mapserver2007/mixjs 圧縮版も合わせて付属させる予定 オプションとしてモジュールもCommitする予定
20.
主要JavaScriptライブラリとの比較
jQuery prototype.js Ext.js mix.js 継承方法 プロパティ クラスベース クラスベース プロトタイプベース 上書き 親子関係 ☓ ☓ ☓ ○ の維持 親の呼び 呼び出し不 Super.prototyp Super.supercla obj.parent().getNa 出し方 可 e.getName.appl ss.getName.ap me() y(this) ply(this, arguments) 継承の仕 var obj = var obj = var obj = var obj = 方 $.extend(o Object.extend(c Ext.extend(cls1, o1.mix(o2) 1, o2) ls1, cls2) cls2) メリット シンプル 馴染みある継承 馴染みある継承 シンプル 方法 方法 デメリッ 親を呼び出 親の呼び出し方 親の呼び出し方 オブジェクトにmix, ト すことが出 が長い が長い parentが実装される 来ない
21.
まとめ 前回作成したコードをBrushUp バグはほぼない状態 IE対応 まずは今つくっているシステムに導入する予定 問題なさそうなら仕事でも使いたい
Télécharger maintenant