CODEWITHSUNDEEP
javascriptjquery
Yuriy Galanter
Yuriy Galanter

Reputation: 39777

Object as jQuery.fn prototype?

If I define prototype like this

jQuery.fn.myFunc = function() {
    console.log(this);
}

and call it like this:

$('div').myFunc();

this inside of myFunc will refer to jQuery object selection.

Now if I don't want to pollute .fn with multiple attached functions, can I do something like 

jQuery.fn.myPlugin =  {

    myFunc1: function() {

    },

    myFunc2: function() {

    }       

}

If I call it $('div').myPlugin.myFunc1(); - how do I get reference to selected objects inside of myFunc1? Or is there a different, better approach?

Upvotes: 1

Views: 1437

Answers (4)

georg
georg

Reputation: 215009

Another possible approach is to use defineProperty:

(function($) {

    var myPlugin = {
        foo: function() {
            console.log(this)
        }
    }

    Object.defineProperty($.fn, "myPlugin", {
        get : function() { return $.extend({}, this, myPlugin) }
    });

})(jQuery);

Now $(...).myPlugin.foo should resolve this correctly:

$(function() {
    $("body").myPlugin.foo(); // logs "body"
})

Upvotes: 0

Hugo Tostes
Hugo Tostes

Reputation: 412

work if you create a object before.

Like this:

 <script>
    jQuery.fn.myPlugin = {};

    jQuery.fn.myPlugin =  {

        myFunc1: function() {
            console.log(this);
        },

        myFunc2: function() {
            alert(this);
        }       

    };
    $(document).ready(function(){
        $('div').myPlugin.myFunc1();
        $('div').myPlugin.myFunc2();
    });

</script>

Upvotes: 0

Jason P
Jason P

Reputation: 27022

The jQuery plugin tutorial suggests this:

(function( $ ) {

    $.fn.popup = function( action ) {

        if ( action === "open") {
            // Open popup code.
        }

        if ( action === "close" ) {
            // Close popup code.
        }

    };

}( jQuery ));

I suppose this would be another alternative:

(function($) {
    $.fn.myPlugin = function (action) {
        var functions = {
            open: function () {
                console.log('open: ', this);
            },
            close: function () {
                console.log('close:', this);
            }
        }

        if (action && functions[action]) {
            functions[action].call(this)
        } else {
            console.log('no function', this);
        }

        return this;
    };
}(jQuery));

$('#theDiv')
    .myPlugin()
    .myPlugin('open')
    .myPlugin('close');

http://jsfiddle.net/faJAk/

Upvotes: 0

Kevin B
Kevin B

Reputation: 95047

Nope. can't do it that way. Instead, define it as a function, then add properties to that function.

jQuery.fn.myPlugin = function() {
    console.log(this);
};

jQuery.fn.myPlugin.myFunc1 = function() {

};

jQuery.fn.myPlugin.myFunc2 = function() {

};

note that myFunc1 and myFunc2 still wont' have access to the selected element, therefore it's relatively useless to define them this way other than the fact that they can be easily overridden by other developers (which is a good thing)

The normal way of having additional methods within your plugin is to have your plugin method accept a parameter that can eitehr be an object to init the plugin, or a string to execute a target method on the element. for example, $("somediv").myPlugin("myFunc1")

Upvotes: 1

Related Questions