acanimal / jquery-plugin-boilerplate

Boilerplate code to create custom jQuery plugins

Hi 👋, I'm Antonio Santiago

A software engineer from Barcelona, Catalonia

Software engineer 💻 by vocation and hobby 🤓 Ocasionally a tech writer 🖊 Restless mind 🦄 I love programming as a tool to give wings to creativity 🤪 Technology is the means, not the end 🏁 I start many things and finish few. Frustrated musician 🎸 I like music that transmits emotions to me. I forget the sorrows doing sports 🏋️

• 🔭 I’m currently working on Joppy
• 🌱 I’m currently learning to be an entrepreneur and how to growing a company
• 👯 I’m looking to collaborate on helping others making ideas into reality
• 🤝 I’m looking for help with to create the best recruitment platform for techies
• 📝 I regularly write articles on https://www.acuriousanimal.com
• 💬 Ask me about whatever you want. I'll try top help you within my possibilities

Connect with me:

Languages and Tools:

jquery-plugin-boilerplate's Issues

Methods that require a return value are not returned, instead, as written, method return jQuery object

Greetings, using your template, we needed a method to return values.
For example,

var myvalue = $('#foo').myPlugin('methodThatShouldReturnValue') ;

As written here, this is not allowing the return value in methodThatShouldReturnValue to pass through:

 // Invoke the specified method on each selected element
                return this.each(function() {
                    var instance = $.data(this, 'plugin_' + pluginName);
                    if (instance instanceof Plugin && typeof instance[options] === 'function') {
                        instance[options].apply(instance, Array.prototype.slice.call(args, 1));
                    }
                });

It does not allow return value of the method to be returned, instead 'return this.each...' is only return jQuery object.

I've altered it like this, but perhaps you have a more elegant solution:

 // Invoke the speficied method on each selected element
                var results ;
                 this.each(function() {
                    var instance = $.data(this, 'plugin_' + pluginName);
                    if (instance instanceof Plugin && typeof instance[options] === 'function') {
                        results = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
                    }
                });
              return results ;

Note, in our plugin, that method is only applied to one id on the dom, not multiple.

In the case of multiple return values required, that code could be written like this:

 // Invoke the speficied method on each selected element
                var results = [] ;
                 this.each(function() {
                    var instance = $.data(this, 'plugin_' + pluginName);
                    if (instance instanceof Plugin && typeof instance[options] === 'function') {
                        results.push( instance[options].apply(instance, Array.prototype.slice.call(args, 1)) ) ;
                    }
                });
              return results ;

Again, perhaps you have a preferred way to rewrite the code to account for both scenarios and return appropriately.

Duplication

Although this one of the most sane ways of doing jQuery plugins, there is duplication there for the getters, what do you think of another convention by using get prefix in names of getters so that you automatically introspect and export them automatically instead of retyping it in the getters ?