jQuery Utility Boilerplate

Question

I'm trying to create a jQuery plugin from jQuery Boilerplate. I also am wanting to create another utility-type plugin separate from this plugin. I've been up and down Google searching for different methods to create one and such. I have run into many different types and I'm unsure where to start, so I turned to StackOverflow in hopes you can help guide me.

My goal is to call my plugin (utility method/function) and pass some options and data to it and have it return to me some data whether it's an object, a string or an array, depending on the function called.

I'd like to do something like this:

<script>
  var options = {option1: 'value1', option2: 'value2'};
  var output = $.myplugin('methodName', options);
</script>

However, I want to respect plugin namespace, proper jQuery etiquette, etc.

What are you asking specifically? How to approach a hybrid utility/jQuery plugin? How to attach a utility to jQuery that acts on JS objects (Utility)? How to attach a utility to jQuery that acts on jQuery objects (Plugin)? So far what you describe above seems fine. — Sukima, Dec 03 '14 at 21:28
Is this a question on how to implement or if it is an idiomatic approach? If it's how to implement then you'll have to post what you've tried so far to see where it went wrong. (Use jsbin.com or jsfiddle.net and pair down to do something simple like alert() or it will become TL;DR) — Sukima, Dec 03 '14 at 21:30
@Sukima, I'd like to know how to implement it. I have another question on how to do a hybrid. In this question I'd like to know how to create a utility version only I'm not sure the best way to start writing my utility. — RoLYroLLs, Dec 03 '14 at 21:32

score 1 · Accepted Answer · answered Dec 03 '14 at 21:48

1

jQuery has two types of utility "plugins" (for lack of a better term). The first is adding a method to the actual jQuery object and is also the easiest to implement, The second is to add to jQuery object instances which expect specific things to happen (chaining, iteration, context management, event, etc.).

Utility functions

This is the easy one because your not manipulating jQuery objects but instead just extending jQuery as if it was any normal JavaScript object. Simply assigning a function to jQuery (or $ for short) does the trick.

jQuery.myNewRadUtility = function myNewRadUtility(input, options) {
  // Do something with input and options
  return someValue; // return what you want
};

// Use it in your other code like so:
$.myNewRadUtility(input, options); // Or what ever you plan on doing

As you can see it's just a function like any other except your assigning it to a property on the jQuery object.

To make things more generic / hybrid approach you can separate the function and write it as if it was generic and then attach it to jQuery in a jQuery specific file or pragmatically.

function myNewRadUtility() {
  // Do one and only one amazing thing here.
}

// If we have jQuery then lets use it.
if (jQuery) {
  jQuery.myNewRadUtility = myNewRadUtility;
}

// Or if you need to massage the input / output to conform to jQuery then
if (jQuery) {
  jQuery.myNewRadUtility = function() {
    // Massage the input here
    var result = myNewRadUtility();
    // Massage the output here
    return result;
  };
}

jQuery plugins

This is a little more advance as you have to consider how jQuery objects expect to be used. First you attach to the prototype as you would above using jQuery's fn property. Then you have to manage the jQuery objects that the utility needs to work with. This means iterate over them. Finally you need to return the same or new instance depending on the purpose of the utility your creating (more often then not just return this).

jQuery.fn.myNewRadUtility = function myNewRadUtility() {
  return $(this).each(function() {
    // Do something with $(this)
  });
};

// Use it in your other code like so:
$('p').myNewRadUtility();

Obviously there is a lot more to it and there is a lot you can do. But this is the bare minimum to get a taste.

answered Dec 03 '14 at 21:48

Sukima

9,965
3
46
60

Thanks! How can I prevent namespace conflicts? After looking at "normal" plugins everywhere I see about making the namespace not conflict with other possible same names of the other developers. Is that something I need to worry about here? – RoLYroLLs Dec 03 '14 at 22:18
I don't think there is an *official* name spacing convention in this case. However, I'd personally say that is is a level of over-optimization. I'd pick a reasonable function name and let it be. If you get complaints that yours conflicting then think about name spacing. You could also develop some kind of testing wrappers kinda like `noConflict()` does; but again that's a bit of pre-optimisation that you may not need. Finally, if this is something your going to use in your own project then you can manage conflicts as needed. Name spacing is more for public libraries concern (again as needed). – Sukima Dec 03 '14 at 22:31
Thanks for this. Would you be kind enough to update your code to show this? I guess this is coming from looking at jQuery Boilerplates' version of namespacing to avoid conflicts (https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.namespace.plugin-boilerplate.js). While I may not need it now, I like to learn how things are done so that if say tomorrow or next week I do need it, I don't have to ask a new question, since I've already asked for it in my original question here. :) Hope you understand. Thanks! – RoLYroLLs Dec 04 '14 at 02:08
The link you posted is the exact code sample you need if you want to name space. It's no different your just on level deeper in a JS object. Perhaps I don't understand what your missing from all these examples. – Sukima Dec 04 '14 at 03:05
Thanks. Here's what I came up with with everything we spoke about. Would you take a look at it and see any problems or anything I'm doing wrong? http://jsfiddle.net/RoLYroLLs/1fr9kyy8/ – RoLYroLLs Dec 04 '14 at 16:54
@RoLYroLLs: I don't understand why you feel your doing something wrong. The linked code works as expected. It's a little over engineered, but it works. – Sukima Dec 05 '14 at 04:47
thanks! Sorry I meant more as in even though it works, would that be a good way to do it or, as you stated, too over-engineered? Is there another pattern that might work better? Thanks! – RoLYroLLs Dec 05 '14 at 15:41
As for over-engineering, stop worrying about patterns, You seem concerned about problems that don't exist yet. That is why refactoring works. Do what feels right and is simple enough to maintain in 6 months when you forget what you were doing. Then add complexity only when you need to through a refactoring. – Sukima Dec 05 '14 at 17:26

score 0 · Answer 2 · answered Dec 03 '14 at 21:57

0

you search something like this ?

jQuery.myPlugin = function(method, args) {
    var myPlug = { 
         method1: function(y) {return y} 
         method2: function(a,b) {/*....*/}


    }; 
    return myPlug[method](arg)
}

answered Dec 03 '14 at 21:57

Alessandro Marchisio

535
3
11

Thanks! How can I prevent namespace conflicts? After looking at "normal" plugins everywhere I see about making the namespace not conflict with other possible same names of the other developers. Is that something I need to worry about here? – RoLYroLLs Dec 03 '14 at 22:18
if you want test if the namespace is already taken you can try with if (jQuery.myPlugin) alert("nameSpace conflict!") before the declaration – Alessandro Marchisio Dec 03 '14 at 22:47

jQuery Utility Boilerplate

2 Answers2

Utility functions

jQuery plugins