WEB_UI WEB_UI - 1 month ago 15
jQuery Question

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

I have made a slideshow jQuery plugin as

$.fn.slideShow
which works like this :


.slideShow(int transitionDelay, string transtionType, string slideTag)


As you might imagine, the int or string keywords don't exist in javaScript, I have just put them there to specify the data-type for each argument. The first necessary argument is (in milliseconds) the delay per slide AKA transition delay. The second argument is optional. It specifies the transition type (default: normal AKA no-transition). The possible inputs for that are push, normal/no-transition, and fade; which are the different transition animations per slide. The third and last argument specifies what HTML tag the slides are contained in, (default: li). This slideshow is shown in the selector given to the plugin. Now that you know a basic understanding of what my plugin does, let's talk about the problem.

You see, there are two main ways really, to approach writing code. One is to make it so messy that no one can read it, and another is to make it neat and modularized. But it's not easy to make code neat and module-packed; because you need to think out the most re-usable and re-cyclable way to store variables, and much more ways to 'modularize' the code.

Apparently, I don't know how I can modularize my code in this situation. I have loads of global variables all over the place, many re-declared variables, etc. Which would be the best approach in my case (not based on opinion terms or preferences but rather based on real facts and performance) to turn a jQuery plugin like this, into a fully-functioning module? Will using modular patterns such as IIFE help? I've also seen modular interfaces such as browsify but I'm not really sure were to start or at least how to do so.

Answer

At higher levels the performance debate can become a largely academic exercise with lots of split hairs. I would recommend adopting a modular plugin pattern you understand and can structure in a manner you can explain, in this way readers can adapt. Would recommend https://toddmotto.com/mastering-the-module-pattern/ as a better explanation of a modular pattern than I could provide here, coupled with a more extensive overview here: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

Additional pattern methods here: https://www.viget.com/articles/jquery-plugin-patterns . It might be easier to comment on a more specific code example/query