Mach3.laBlog

細かすぎて伝わらないjQuery拡張 (8) “$.attributify” – Advent Calendar 2016

この記事は賞味期限切れです。(更新から1年が経過しています)

$.attributify() は、オブジェクトに属性管理のメソッド .attr() を実装する関数です。 先に記事にした $.eventify をあわせて使うとちょっと便利になります。

$.attributify(object)

使い方

var person = {
    _attributes: {
        name: "",
        age: 0,
        email: ""
    }
};

$.attributify(person);

// key, value を渡して設定
person.attr("name", "john");

// オブジェクトを渡して設定
person.attr({
    age: 23,
    email: "john@example.com"
});

// key のみ渡して値を取得
person.attr("name"); // => "john"
// 引数なしで全ての値をオブジェクトで取得
person.attr(); // => {name: "john", age: 23, email: "john@example.com"}
  • $.attributify([object]) で引数のオブジェクトに .attr() メソッドを実装します
  • _attributes プロパティがある場合はそのデータで初期化します
  • 設定データは attributes プロパティに格納されます
  • .attr() メソッドは引数のタイプと数で挙動が変わります

$.configify() と基本的な使い方は同じです。 $.configify() と異なるのは、$.eventify() をあわせて使う事で、値変更時にイベントを発火させる事が出来る点です。

$.eventify(person);

person.on("attributechange", function(e, o){
    console.log( o.key + "が" + o.value + "に変更されました");
});

person.attr("age", 32); // "ageが32に変更されました"

イベントハンドラの第二引数には key, value プロパティを備えたオブジェクトが渡されます。 なお、あらたに設定した値が古い値と同一の場合はイベントは発火しません。

コード

$.attributify = function(obj){
    obj.EVENT_ATTRIBUTE_CHANGE = "attributechange";
    obj.attr = function(){
        var my = this, args = arguments;
        this.attributes = this.attributes || {};
        switch($.type(args[0])){
            case "undefined": return this.attributes;
            case "string":
                if(args.length === 1){
                    return this.attributes[args[0]];
                }
                if(args[1] !== this.attributes[args[0]]){
                    this.attributes[args[0]] = args[1];
                    if($.isFunction(this.trigger)){
                        this.trigger(this.EVENT_ATTRIBUTE_CHANGE, {
                            key: args[0],
                            value: args[1]
                        });
                    }
                }
                break;
            case "object":
                $.each(args[0], function(key, value){
                    my.attr(key, value);
                });
                break;
            default: break;
        }
        return this;
    };
    obj.attr(obj._attributes);
    return obj;
};

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*