Mach3.laBlog

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

$.rebase は、オブジェクトに属しているメソッドをそのオブジェクトに bind するための関数です。 bind するメソッド名をパターンで渡すことができます。

$.rebase(obj, pattern)

使い方

var obj = {
    _onTest: function(){
        console.log(this === obj);
    }
};

// setTimeout のコールバック内の this は window になります
setTimeout(obj._onTest, 0); // => false

$.rebase(obj);
// this が obj に固定されます
setTimeout(obj._onTest, 0); // => true

第二引数で、bindするメソッドの名前のパターンを指定できます。 デフォルトでは /^_[a-z]/ です。

var obj = {
    fooBarBaz: function(){ ... }
};

// パターンを正規表現文字列か、RegExpオブジェクトで渡す
$.rebase(obj, /^foo/);

DOMのイベントリスナー登録での使用例

この関数はとても良く使っています。 クラスライクにコードを書く事が多いのですが、インスタンスメソッドをDOMのイベントリスナーに登録する時など、 bind されてあると this でインスタンスが参照できるのでとてもはかどります。

var MyApp = function(selector){
    $.rebase(this);
    this.el = $(selector);
    this.el.on("click", this._onClickTest);
};

MyApp.prototype.el = null;
MyApp.prototype._onClickTest = function(){
    // ここの this はインスタンス(app)に固定されている
};

var app = new MyApp("#test");

コード

$.rebase = function(obj, pattern){
    pattern = pattern || /^_[a-z]/;
    pattern = ($.type(pattern) !== "regexp") ? new RegExp(pattern) : pattern;
    $.each(obj, function(key, value){
        if(pattern.test(key) && $.isFunction(value)){
            obj[key] = value.bind(obj);
        }
    });
    return obj;
};

コメント

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


*