I am writing my first jquery plugin. I have done the basic coding and would now like to refactor the code inside and put some sections inside functions. Please note that I do not want to call these functions from outside the plugin. Private functions, I think. This is somewhat the logic I want to put -
(function($) {
$.fn.filterGroup = function(method)
{
var someParam,someOtherParam; //declared here and 开发者_如何学JAVAvalues updated inside someFunction(), anotherFunction()
return this.each(function()
{
//plugin code starts here
this.someFunction();
alert(someParam); //I want updated value of someParam to be available here
$(inputTextField).keyup(function()
{//as user enters input into an input field
inputText = $(inputTextField).val();
//call a function here on this and does some modification on it.
this.anotherFunction(); //move a lot of lines inside this function
//on subsequent keyups, I want the updated value of someOtherParam to be available here
alert(someOtherParam );
}
});
//not sure where and how to declare these functions ... these needs to be called from inside the plugin only (private functions)
someFunction = function(filterText)
{
//some logic on the passed this, not sure if my sentence is correct in terms of jquery...
//var someParam is updated here
someParam = "something";
}
anotherFunction = function(filterText)
{
//var someOtherParam is updated here
someOtherParam = "something";
}
});
})(jQuery);
My question is -
- how and where do I define the
someFunction()
, so that I can call it likethis.someFunction();
. - And, I need to be able to read the updated value of
someParam
during subsequentonkeyup()
events.
I checked the Namespacing section of http://docs.jquery.com/Plugins/Authoring but looks like that is about a public function to be called from outside.
Also checked these questions -
Using functions from inside a plugin and some others but I am confused.
Here's how I'd do that:
(function($) {
// this object is available only inside of this function
var methods = {
init:function(options){
if(typeof options =="object") settings = $.extend(settings,options);
return this.each(function(){
methods._someFunction();
// all values are available here by private settings object
alert(settings.someParam);
$(this).keyUp(function(){
methods._someOtherFunction();
});
});
},
_someFunction:function(filterText) {
settings.someParam = "something";
},
_anotherFunction:function(filterText) {
settings.someOtherParam = "something";
}
}
// that one too
var settings = {
someParam:null,
someOtherParam:null
}
$.fn.filterGroup = function( method ) {
// second condition here will disable calling functions starting from "_".
// ex. `$(selector).filterGroup('_someFunction');` will return error
if( methods[method] && method[0]!=="_" ) return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
else if ( typeof method === 'object' || ! method ) return methods.init.apply( this, arguments );
else $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
});
})(jQuery);
Things to note:
this
in jQuery (especially plugins) reference to the object on which the plugin was called. Thereforethis.html()
will return contents of this object;- So, as I wrote above you should not retreive data from
$(inputTextField).val()
, but instead call your plugin for those objects like:$(inputTextField).filterGroup()
, and then ininit()
reference to their value asthis.val()
or$(this).val()
if previous won't work for some reason; - If you're going to store more then one object's data in settings better make other object called
data
which would be the list of all element's data :) ; - More: http://docs.jquery.com/Plugins/Authoring ;
精彩评论