@ledsun blog

無味の味は佳境に入らざればすなわち知れず

JavaScriptのパターン オブジェクトの拡張

技 JavaScript

対象オブジェクトに複数のプロパティを一度に追加します。

以下のデザインパターンを適用する。

  1. 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デザインパターン

ブログ

【JavaScript】オブザーバパターン | Snippets に JavaScriptデザインパターン から参考にしたコードが載っています。