【読書ノート】「JavaScriptデザインモード」の外観モデルを読む
8573 ワード
はじめに
外観モードは、Facade(外観)モードとも呼ばれる.中心となる2つの役割――
1> 単純化類のインターフェース(インターフェースをより理解しやすく、応用しやすく、より対応業務に適合するようにする)は、非常に違っていたり複雑な実現をカバーする.
2> キャンセルクラスとそのクライアントコードの間の結合
APIを簡略化して他の開発者に展示することができます.通常は利用性を高めることができます.
二、例を挙げる
例一、事件傍受
例二、組合せ関数
例三、ツール関数
ブラウザをまたぐ開発問題を処理する時、できるだけいくつかの外観関数を作成する方がいいです.大型倉庫に関わるなら、その中のすべてのツール要素を一つに集めたほうがいいです.もっと使いやすくて、アクセスも便利です.各種ブラウザが事件処理で表現した大きな違いに鑑み、イベントツールを開発する必要がある.
例四、他のモードと一緒に適用する.
外観モードは単独で使用しなければならないわけではない.彼らは他のモデルと統合することもできます.例えばModuleモードです.Moduleモードの例は、多くのすでに定義されているプライベート方法を含む.次いで、これらの方法にアクセスするために、フロント・モードを使用して、簡単なAPIを提供する.
三、適用シーン
1.外観モードを適用すべきかどうかを判断するポイントは、繰り返しグループに出現するコードを識別することです.関数bが関数aの後に現れると、このような状況がよく現れる場合、これらの2つの関数を組み合わせた1つの顔関数を追加することを考慮すべきかもしれない.
2.コアツールコードに外観関数を追加するもう一つの目的は、js内蔵関数の異なるブラウザでの表現に対応することです.このようにするのは、これらのAPIを直接使うことができないからではなく、ブラウザをまたぐ違いの問題を処理する時に一番いい解決方法はこれらの違いを店頭方法に抽出することです.それらはより一致したインターフェースを提供することができる.
四、優勢
1.外観モデルの目的はプログラマをもっと楽に過ごすことです.組み合わせコードを作成して、それを繰り返し使うことができます.時間と労力の節約に役立ちます.それらはあなたの骨をかじり取ることができます.よくある問題と任務を処理する簡単なインターフェースを提供します.2.見栄の方法は開発者に便利になりました.そして高層の機能を提供しました.見栄のモードを使わないと、これらの機能が実現できます.3.それらはさらに外部コードへの依存度を低下させ、これはアプリケーションシステムの開発にいくつかの追加的な柔軟性を増加させる.トップモードを使用することで,下位サブシステムとの緊密な結合を回避できる.このように、このシステムをユーザーコードに影響を与えずに修正することができます.
五、劣勢
時には外観の元素もいくつかの余計な負担を持ってきます.便利なものは必ずしも使わなくてもいいです.間口モードはよく乱用されます.ときには,粒径において,構成関数の方が,複雑な面の関数より魅力的である.これは、外観関数がしばしば必要ではないタスクを実行するからです.
六、結論
これらの関数は様々な複雑なタスクを実行するための簡単なインターフェースを提供する便利関数を作成するために、店頭モードを使用することができます.コードの維持と理解を容易にします.それらはさらに、サブシステムとクライアントコードの結合を弱体化させることができる.便利な方法は、一般的な反復性タスクの簡略化と、常に相伴って現れる常用関数の組み合わせに役立つ.このモードはDOMスクリプトプログラミングのような様々な不一致のブラウザインターフェースに直面する必要がある環境でよく使われる.ただし、店頭モードを使うときは、どのような性能コストがかかっているかを調べてみて、抽象的かどうか確認してください.
起源:JavaScriptデザインモデル（人民郵便出版社）——第十章、外観モデル
参考:「JavaScript設計モード」 —— 9.9 Facade(外観)モード
外観モードは、Facade(外観)モードとも呼ばれる.中心となる2つの役割――
1> 単純化類のインターフェース(インターフェースをより理解しやすく、応用しやすく、より対応業務に適合するようにする)は、非常に違っていたり複雑な実現をカバーする.
2> キャンセルクラスとそのクライアントコードの間の結合
APIを簡略化して他の開発者に展示することができます.通常は利用性を高めることができます.
二、例を挙げる
例一、事件傍受
function addEvent(el, type, fn) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
el.attachEvent('on' + type, fn);
} else {
el['on' + type] = fn;
}
}例二、組合せ関数
function a(x) {
// do stuff here...
}
function b(y) {
// do stuff here...
}
function ab(x, y) {
a(x);
b(y);
}例三、ツール関数
ブラウザをまたぐ開発問題を処理する時、できるだけいくつかの外観関数を作成する方がいいです.大型倉庫に関わるなら、その中のすべてのツール要素を一つに集めたほうがいいです.もっと使いやすくて、アクセスも便利です.各種ブラウザが事件処理で表現した大きな違いに鑑み、イベントツールを開発する必要がある.
var DED = window.DED || {};
DED.util.Event = {
getEvent: function(e) {
return e || window.event;
},
getTarget: function(e) {
return e.target || e.srcElement;
},
stopPropagation: function(e) {
if (e.stopPropagation) {
// W3 interface
e.stopPropagation();
} else {
// IE interface
e.cancelable();
}
},
preventDefault: function(e) {
if (e.preventDefault) {
// W3 interface
e.preventDefault();
} else {
// IE interface
e.returnValue = false;
}
},
stopEvent: function(e) {
DED.util.stopPropagation(e);
DED.util.preventDefault(e);
}
};addEvent($('#emample'), 'click', function(e) {
// who clicked me
console.log(DED.util.Event.getTarget(e));
// stop propagation and prevent the default action
DED.util.Event.stopEvent(e);
});例四、他のモードと一緒に適用する.
外観モードは単独で使用しなければならないわけではない.彼らは他のモデルと統合することもできます.例えばModuleモードです.Moduleモードの例は、多くのすでに定義されているプライベート方法を含む.次いで、これらの方法にアクセスするために、フロント・モードを使用して、簡単なAPIを提供する.
var module = (function() {
var _private = {
i: 5,
get: function() {
console.log('current value:' + this.i);
},
set: function(val) {
this.i = val;
},
run: function() {
console.log('running...');
},
jump: function() {
console.log('jumping...');
}
};
return {
facade: function(args) {
_private.set(args.val);
_private.get();
if (args.run) {
_private.run();
}
}
};
}());三、適用シーン
1.外観モードを適用すべきかどうかを判断するポイントは、繰り返しグループに出現するコードを識別することです.関数bが関数aの後に現れると、このような状況がよく現れる場合、これらの2つの関数を組み合わせた1つの顔関数を追加することを考慮すべきかもしれない.
2.コアツールコードに外観関数を追加するもう一つの目的は、js内蔵関数の異なるブラウザでの表現に対応することです.このようにするのは、これらのAPIを直接使うことができないからではなく、ブラウザをまたぐ違いの問題を処理する時に一番いい解決方法はこれらの違いを店頭方法に抽出することです.それらはより一致したインターフェースを提供することができる.
四、優勢
1.外観モデルの目的はプログラマをもっと楽に過ごすことです.組み合わせコードを作成して、それを繰り返し使うことができます.時間と労力の節約に役立ちます.それらはあなたの骨をかじり取ることができます.よくある問題と任務を処理する簡単なインターフェースを提供します.2.見栄の方法は開発者に便利になりました.そして高層の機能を提供しました.見栄のモードを使わないと、これらの機能が実現できます.3.それらはさらに外部コードへの依存度を低下させ、これはアプリケーションシステムの開発にいくつかの追加的な柔軟性を増加させる.トップモードを使用することで,下位サブシステムとの緊密な結合を回避できる.このように、このシステムをユーザーコードに影響を与えずに修正することができます.
五、劣勢
時には外観の元素もいくつかの余計な負担を持ってきます.便利なものは必ずしも使わなくてもいいです.間口モードはよく乱用されます.ときには,粒径において,構成関数の方が,複雑な面の関数より魅力的である.これは、外観関数がしばしば必要ではないタスクを実行するからです.
六、結論
これらの関数は様々な複雑なタスクを実行するための簡単なインターフェースを提供する便利関数を作成するために、店頭モードを使用することができます.コードの維持と理解を容易にします.それらはさらに、サブシステムとクライアントコードの結合を弱体化させることができる.便利な方法は、一般的な反復性タスクの簡略化と、常に相伴って現れる常用関数の組み合わせに役立つ.このモードはDOMスクリプトプログラミングのような様々な不一致のブラウザインターフェースに直面する必要がある環境でよく使われる.ただし、店頭モードを使うときは、どのような性能コストがかかっているかを調べてみて、抽象的かどうか確認してください.
起源:JavaScriptデザインモデル（人民郵便出版社）——第十章、外観モデル
参考:「JavaScript設計モード」 —— 9.9 Facade(外観)モード