0

モジュールパターンを実装していて、イベント関数を公開したいと思います。
コードは次のとおりです。 

var module = (function(){
    var self = {},
        cb = $(":checkbox");

    cb.on("change",/* self.OnChange */ ); // ???

    return self;
}());

module.OnChange(callbackFunction);

function callbackFunction(event){
    //do staff
}

OnChangeでは、 「callbackFunction」にアクセスする方法について何かアイデアはありますか？
または、モジュールパターンでこれを行うためのより良い方法はありますか？

4

2 に答える 2

2

私はモジュール/プラグイン/ライブラリ内でこのパターンをよく使用します：

var borrow = function( obj, funcName, funcArg ){
  return function(){
    /// convert arguments to array
    var args = Array.prototype.slice.call( arguments );
    /// add in our fixed arg 'change'
    args.unshift( funcArg );
    /// execute the function
    return obj[funcName].apply( obj, args );
  }
}

self.change = borrow( cb, 'on', 'change' );

これは、コンストラクターの外部で呼び出すことができることを意味するはずです。

module.change( callbackFunction );

これは基本的にjQuery関数を直接借用する効果がありますが、選択した特定の要素でラップします。上記は、次のように直接入力した場合と同様に、イベントリスナーをチェックボックスに直接渡します。

cb.on( 'change', callbackFunction );

上記を改善して、次のように複数の固定引数を受け入れることができます。

var borrow = function( obj, funcName ){
  /// convert arguments to array
  var args1 = Array.prototype.slice.call( arguments );
  /// remove the first two args (obj & funcName) 
  /// which means we now have an array of left over arguments
  /// we'll treat these as 'fixed' and always passed to the 
  /// 'borrowed' function.
  args1.shift(); args1.shift();
  /// return a closure containing our 'borrowed' function
  return function(){
    /// convert arguments to array
    var args2 = Array.prototype.slice.call( arguments );
    /// create a new array combined from the fixed args and the variable ones
    var args = args1.concat( args2 );
    /// execute the function
    return obj[funcName].apply( obj, args );
  }
}

さらなる改善（シフトを取り除く）は次のようになります：

var borrow = function( obj, funcName ){
  /// convert arguments to array and remove first two arguments
  var args1 = Array.prototype.slice.call( arguments, 2 );
  /// return a closure containing our 'borrowed' function
  return function(){
    /// convert arguments to array
    var args2 = Array.prototype.slice.call( arguments );
    /// create a new array combined from the fixed args and the variable ones
    var args = args1.concat( args2 );
    /// execute the function
    return obj[funcName].apply( obj, args );
  }
}
于 2012-09-16T13:32:40.630 に答える
0

混乱していると思います

var module = (function(){
    // here this points to the window object
    var self = this,
        cb = $(":checkbox");

    cb.on("change",/* self.OnChange */ ); // ???
    // here you are returning the window object
    return self;
}());
//since the function was instantaneous, here you are calling onChange() on the window object
module.OnChange(callbackFunction);

function callbackFunction(event){
    //do staff
}

正確に何をしようとしていますか？

于 2012-09-16T13:31:51.767 に答える