jQuery Advent Calendar 2014の8日目の記事です。
昨日はmaechabinさんの複数ページのSNSシェア数を非同期で取得表示するjQueryプラグイン「jquery.cb-share-count.js」 | mae's blogでした。
去年のadvent calendarではjQueryのTraversingについてというあんまりためにならない記事を書きましたが、今年はもうちょっといい感じのを。(JavaScript デザインパターンの読書メモだったりする。)
ということでデザインパターンについてです。
デザインパターンとは
jQueryだけ使ってるとそもそもデザインパターンって何って言う感じになりがちです。(それが問題になって昨今の流れになっているわけですが…)
ググって出てきたIT用語辞典には次のように書いてあります。
プログラム設計時に起こる典型的な問題とそれに対する解決策を整理し、再利用できるようにまとめたもの。
デザインパターンとは 【 design pattern 】 - 意味/解説/説明/定義 ： IT用語辞典
最近フロント界隈でもよく耳にするMV*もデザインパターンの一つだったりします。
MVCでは、ビジネスデータをModel、表示をView、ModelとViewをつなぐControllerに分離して処理を記述することでコードに秩序をもたらします。
MVCもMVVMもアプローチの仕方は違えども、目的は同じです。
jQueryにおけるデザインパターン
JavaScript デザインパターンでは、jQueryは以下に上げる8つのパターンが使われているよって解説されていました。
- コンポジットパターン
- アダプタパターン
- ファサードパターン
- オブザーバパターン
- イテレータパターン
- 遅延初期化
- プロキシパターン
- ビルダーパターン
(自分は)聞きなれないものが多分にありましたが、一つづつ見ていきます。
コンポジットパターン(Composite Pattern)
分類としては構造に関するパターンです。
コンポジットパターンは、要素であるオブジェクトと、複数の要素からなる複合オブジェクトを区別なく扱えるという特徴を持ちます。
サルでもわかる 逆引きデザインパターン 第2章 逆引きカタログ ロジック編 Composite（コンポジット）
コードで見ると次のような感じかと。
// 取得したDOM要素のスタイルに`color: red`を指定する例
// DOM APIを使い要素の検索、スタイルの定義を行う。
document.getElementById('the-element').style.color = 'red';
Array.prototype.forEach.call(document.getElementsByClassName('elements'), function (el) {
el.style.color = 'red';
});
// jQueryだと単一、コレクション問わず同じ記述で指定できる。
$('#the-element').css('color', 'red');
$('.elements').css('color', 'red');アダプタパターン
あるブジェクとやクラスのインターフェイスを、特定のシステムと互換性のあるインターフェイスに変換します
ファサードパターン
複雑な処理を隠蔽して、単純な抽象インターフェイスを提供します。
オブザーバパターン
発行購読パターンやPub/Subパターンと言われてるやつですね。
// 購読
$(el).on('boot', null, func);
// 発行
$(el).trigger('boot');イベントドリブンなJavaScriptだと特に意識せずに普通に行われていることかと。
ddd
イテレータパターン
遅延初期化
プロキシパターン
ビルダーパターン
というわけでJavaScript デザインパターンを元にデザインパターンを見ました。
jQueryはAPIモデルが汚いとかそもそもいらねーとか言われたりしていますし、いい部分のみ参考にして自分の書くコードはそうならないようにしたいですね！
という締めで終わります。
ツッコミは優し目でお願い致します(__重要__)。
明日は(´ ºムº `) さんです。
No comments yet