2012-12-13 72 views
7

我正在使用jQuery UI小部件工廠。使用jQuery UI Widget工廠創建實例變量的正確方法

$.widget("myPlugin" , { 

    options: { 
    }, 

    _create: function() { 
    }, 

    instanceVar: "huzzah!" 

}); 

在測試中,看起來好像instanceVar實際上是原型的一部分。所以這個插件的所有實例都是一樣的。然而

$.widget("myPlugin" , { 

    options: { 
     instanceVar: "huzzah!" 
    }, 

    _create: function() { 
    }, 

}); 

這似乎很奇怪,因爲instanceVar僅僅是由插件使用的內部變量 - 不是插件的用戶:

我可以把instanceVar進入選項,像這樣解決這個問題應該能夠改變。

是否有另一種(更好)的方法來實現這一目標?

感謝您的幫助!

+2

你可以存儲私人數據,例如,在_create裏面,你應該可以執行'this.instanceVar =「huzzah!」' –

回答

12

你可以存儲在實例本身的私人數據,例如,_create裏面,你應該能夠做到this.instanceVar = "huzzah!"

$.widget("ui.myPlugin", { 

    options: { 
     foo: "foo" 
    }, 

    _create: function() { 
     this.instanceVar = "huzzah!" 
    }, 

    _setOption: function() { 
     this.instanceVar = "worky!"; 
    }, 

    destroy: function() { 
     console.log(this.instanceVar); 
    } 

}); 

$(document).myPlugin().myPlugin("option","foo","bar").myPlugin("destroy"); // "worky" 

$("body").myPlugin().myPlugin("destroy"); // "huzzah! 

演示:在實例本身http://jsfiddle.net/PGUqr/

+1

你也可以使用下劃線前綴作爲約定來聲明一個私有實例變量,就像你將函數一樣。 _instanceVar:undefined, –

+3

應該指出,使用下劃線前綴實際上並不能阻止對這些'私人'成員和方法的訪問。您仍然可以通過$('#myElement')。data('pluginName')._ foo訪問它們。添加下劃線的作用是通過常用方式調用小部件上的方法來省略該函數:$('#myElement')。pluginName('somePublicFunction')。一旦你有了對小部件實例的引用,你就可以完全訪問所有的東西,不管它是否有前導下劃線。 – jinglesthula

+0

請注意,雖然'option'成員沒有下劃線,文檔通過.option()方法指示對其內容的訪問:https://api.jqueryui.com/jquery.widget/#method-option – jinglesthula

相關問題