対象オブジェクトに複数のプロパティを一度に追加します。
以下のデザインパターンを適用する。
- extendパターン
元の処理
プロパティを一つずつ設定します。
var mike = {}; mike.firstName = "michelle"; mike.lastName = "jackson"; mike.getFullName = function() { return this.firstName + "." + this.lastName; }; mike.getFullName();
extendパターン
全てのプロパティをまとめてコピーするextend関数を用意します。
var extend = function(sub, parent) { for (var prop in parent) { sub[prop] = parent[prop]; } };
extend関数を使って複数のプロパティを一度に追加します。
var mike = {}; extend(mike, { firstName: "michelle", lastName: "jackson", getFullName: function() { return this.firstName + "." + this.lastName; } }); mike.getFullName();
jQeury.extend
jQeury には jQeury.extend 関数が用意されています。 引数のデフォルト値を設定するためによく使われます。
名前と苗字をつなげて返す関数です。
var defaults = { firstName: "michelle", lastName: "jackson" }; var getFullName = function(options) { var settings = jQuery.extend({}, defaults, options); return settings.firstName + "." + settings.lastName; };
デフォルトでは michelle.jackson を返します。
getFullName();
"michelle.jackson"
指定した firstName プロパティは上書きし lastName はデフォルト値を使います。
getFullName({ firstName: "jannet" });
"jannet.jackson"
jQeury.extendは第一引数のオブジェクトを変更します。変更したくない場合は第一引数に空のオブジェクトを指定します。
参考
図書
2.5 オブザーバパターン に出てきた関数を参考にしました。
ブログ
【JavaScript】オブザーバパターン | Snippets に JavaScriptデザインパターン から参考にしたコードが載っています。