开发者

Confused with declaring, using functions to be called from inside jquery plugin

开发者 https://www.devze.com 2023-03-23 22:55 出处:网络
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 fu

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 like this.someFunction(); .
  • And, I need to be able to read the updated value of someParam during subsequent onkeyup() 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:

  1. this in jQuery (especially plugins) reference to the object on which the plugin was called. Therefore this.html() will return contents of this object;
  2. 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 in init() reference to their value as this.val() or $(this).val() if previous won't work for some reason;
  3. 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 :) ;
  4. More: http://docs.jquery.com/Plugins/Authoring ;
0

精彩评论

暂无评论...
验证码 换一张
取 消