Add methods to plugin namespace without selector

Asked

Viewed 60 times

2

I am creating a plugin in js and need to add some methods to this plugin.

This is the basis of the plugin so far:

    (function ($) {
    function jarbas(params) {
        ...
    }

    $.fn.jarbas = function (params) {
        // cria funcionalidade a partir do método sem seletor $.jarbas(params);
    }

    // defaults
    $.fn.jarbas.defaults = { ... };

    $.extend({
        jarbas : function (params) {
            switch (typeof params) {
                case 'string':

                    break;
                case 'object':
                    return new jarbas(params);
                    break;
            }
        }
    });
})(jQuery);

In using the plugin I do (works perfect):

$.jarbas({ ... });
$('seletor').jarbas({ ... });

is it possible to create methods extending the plugin name without the need for selector? for example:

$.jarbas.remapAll();
  • Yes, that’s possible, but this is .remapAll(): how would you know what to do if you pass no argument or selector?

  • as long as I can call the method!

2 answers

2


Yes it is possible.

The same way you did $.fn.jarbas.defaults = { ... }; to define a property of this function can add a new method by passing a function:

$.fn.jarbas.remapAll= function(){
    // fazer o que quiser;
}

Example:

$.fn.jarbas = function (params) {
    // cria funcionalidade a partir do método sem seletor $.jarbas(params);
}

// defaults
$.fn.jarbas.defaults = {
    foo: 'bar'
};

$.fn.jarbas.remapAll = function () {
    alert('Eureka! Achei o ' + this.defaults.foo + '!');
}

// testar

alert($.fn.jarbas.defaults.foo);
$.fn.jarbas.remapAll ();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • Thanks for the answer, I thought there was a way to create without . fn visually speaking! vlw!

  • @Trxplz0 can do only $.jarbas (http://jsfiddle.net/mq29zr6p/) but this is bad practice. jQuery indicates in the documentation that it should be $.fn.novoMetodo

  • yes in my case as I use 1 extender method does not work only the $.Arbas it error by finding the method and not a plugin. Anyway ta answered! I will mark as soon as possible! As the bad practice did not know, this . fn not short is not fight until the rest of life!

2

Your plugin has a chaining problem (chaining) of jQuery objects. What the documentation recommends is that your plugin always returns this (if it always applies to collections of only 1 object), or this.each(...), if the plugin needs to handle more than one selected object.

This allows you to chain jQuery methods in the same selection, for example:

$('a').jarbas().show();

The way your plugin is built, returning new jarbas, this will not be possible. Nor can I call $.jarbas(); whether you have defined the method in $.fn. You can, yes, call $.fn.jarbas().

How to make the plugin work as namespace, Sergio has already answered and I won’t repeat what he said. Since functions in Javascript are objects, you can hang any properties you want on them. But that’s kind of weird in the world of jQuery. Plugins usually depend on the selectors, and they’re not used with namespaces that way. Which brings me to your final question:

it is possible to create methods extending the plugin name without the need for selector?

Yes, but then it makes no sense to put your methods in $.fn. What you have there is used as a prototype for jQuery objects, which are selections from DOM nodes. If you want something that is selector-independent, define it directly in the object itself jQuery (or $):

(function($) {
    $.jarbas = function(){
        document.body.innerHTML += "jarbas<br>";
    };
    $.jarbas.remapAll = function() {
        document.body.innerHTML += "jarbas remapped<br>";
    }
}(jQuery));

$.jarbas();
$.jarbas.remapAll();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • thanks for the tips, but it returns $this and the direct call to $.Arbas is generated by the extender at the end that allows me to get or create a new object depending on the parameters. In the post I took just to shorten it. What I need is using selector and without. It’s already solved! Thanks!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.