2013-10-26 40 views
0

我一直在尋找jQuery插件的插件鍋爐板,我發現它確定,但有一個主要缺陷,或者可能只是我無法弄清楚的東西。jQuery插件鍋爐板 - 綁定範圍的私有方法?

當我現在編寫插件時,我很容易定義公開的方法和只有插件才能訪問的私有方法。

當我試圖在鍋爐板上做類似的事情時,我受挫。

;(function ($, window, document, undefined) { 

// Create the defaults once 
var 
    pluginName = "defaultPluginName", 
    defaults = { 
     propertyName: "value" 
    }; 

// The actual plugin constructor 
function Plugin (element, options) { 
     this.element = element; 
     this.settings = $.extend({}, defaults, options); 
     this.defaults = defaults; 
     this.name = pluginName; 
     this.init(); 
} 

Plugin.prototype.init = function() { 
    console.log('init') 
    console.log(this) 
    this.yourOtherFunction(); 
} 
Plugin.prototype.yourOtherFunction = function() { 
    console.log('yourOtherFunction') 
    console.log(this) 
    this.yourOtherFunction2(); 
} 
Plugin.prototype.yourOtherFunction2 = function() { 
    privateFunction().bind(this) 
} 

var privateFunction = function() { 
    console.log('private') 
    console.log(this) 
} 

// A really lightweight plugin wrapper around the constructor, 
// preventing against multiple instantiations 
$.fn[ pluginName ] = function (options) { 
    return this.each(function() { 
     if (!$.data(this, "plugin_" + pluginName)) { 
      $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
     } 
    }); 
}; 

})(jQuery, window, document); 

$(document).defaultPluginName() 

反正你可以看到功能「privateFunction」它的範圍是window對象,但我希望能夠做的是它範圍的插件實例,或基本「這個」從原型方法。

我不想做的,是通過範圍到每個私有函數作爲函數參數!

那麼我怎樣才能綁定範圍?

Console output 

init 
Plugin { element=document, settings={...}, defaults={...}, more...} 
yourOtherFunction 
Plugin { element=document, settings={...}, defaults={...}, more...} 
private 
Window index.html <-- I want Plugin, not window 

回答

2

替換:

Plugin.prototype.yourOtherFunction2 = function() { 
    privateFunction().bind(this) 
} 

隨着

Plugin.prototype.yourOtherFunction2 = function() { 
    privateFunction.apply(this,arguments); 
} 
+0

只是一個快速的說明(因爲它絆倒了我),'arguments'是一個數組。 – jbarreiros

3

要調用privateFunction然後結合this的範圍爲它的結果。
因此,使用(由@Khanh_TO說):

Plugin.prototype.yourOtherFunction2 = function() { 
    privateFunction.apply(this,arguments); 
} 

相反的:

Plugin.prototype.yourOtherFunction2 = function() { 
    privateFunction().bind(this) 
} 

更多細節:

bind返回函數的副本上被稱爲(您的案例中的privateFunction的結果),應用了您通過的範圍(您的案例中的this)。 bind所做的是類似於:

Function.prototype.bind = function(scope) { 
    var _function = this; 
    var _args = []; 
    for (var i = 0, len = arguments.length-1; i < len; i++){ _args[i] = arguments[i+1]; } 
    return function() { 
     // returns the same function on which is called (not the same Function object, but 
     // another with same properties) with 'this' equal to the first parameter and 
     // the remaining specified parameters as parameters of the function returned 
     return _function.apply(scope, _args); 
     } 
} 

例如, myFunction.bind(newScope, param1, param2, ...) - >返回一個匿名功能,其在匝組this = newScope返回函數myFunction(param1, param2,....)
所以,作爲一個概念證明,也該代碼會工作:

Plugin.prototype.yourOtherFunction2 = function() { 
    privateFunction.bind(this)(); 
} 

但由於最後一個確實有額外的通道同樣的事情,你應該使用的第一個。