'How do you make jQuery modular in a simple way?

I've read some stuff after asking Dr. Google some okay examples were:

But how about you guys? Do you guys know any good tricks or tips to make jQuery more modular?

I'm quite new to jQuery, so I'm trying to learn a way to keep it modular, so that when I get more complex stuff, I can write code more cleanly for people to understand.

Also if you guys know any good websites that discusses or teaches a way to make jQuery modular I'd like to know :^)

jquerymodular


Solution 1:[1]

Here's some good resources on your matter, wether you want it to be plugin-based, use modular patterns such as IIFE, or even AMD. Here's a question of mine which has a resourceful answer (by Sam0):

Trying turn this jQuery slideShow plugin into a neat and modular "module"

However if you prefer not to use plugins, simply wrapping (structuring) parts of your code into separate closures is definitely a great start. Make sure to include your trusty jQuery initialization code for modular functionality:

(function($) {  
    // For plugins you may want to include:
    $.fn.pluginName = function( args ) { /* stuff goes here */ }
    // non-plugin stuff
}) (jQuery);

Also if you use plugins, make sure to consider including a separate extension.js file calling the plugins and using them, for clarity, brevity, and modularity. And yes, making that too a module is a great idea.

At first you may find this to be a little complex, but when you learn and understand it I'm sure that you'll find it to be quite simple.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community

Related Questions