Re-writing rough JS code with loads of jQuery plugins

Question

I want to include about 10 jQuery plugins in a project but do so in a better way than just pasting them into a JS file.

I want to capture various device data and other data passed from the server-side (in a HTML meta tag) and I want some of this to decide which jQuery scripts to run - or none in the case of some devices.

I also want to be able to extend jQuery plugins, globally control events, globally control setTimeout() and basically write the code in a much better way to maintain.

I have been learning from various tutorials and would like to gauge my understanding.

I have written the code below form various tutorials and advice and it should be a better way to extend and implement jQuery and feedback would be great. I haven't actually ran the code, I'm just trying to understand how the best way to design this would be.

Am I on the right track for how to structure this?

/* all the original jQuery plugins */
(function ($) {
 $.slider = function () {
 //etc
 };
}(jQuery));
/* jQuery wrappers - one for each jQuery script */
function JquerySlider($) {
 var extensionMethods = {
 showId: (function () {
 return this.element[0].id;
 }())
 };
 $.extend(true, $.slider.prototype, extensionMethods);
}
/* execute all the jQuery scripts */
function InitJquery($) {
 this.slider = new JquerySlider($);
}
/* get various device data */
function Device() {
 // get meta data from HTML
 // holds a value 1-3 for the quality of the device (detected server-side)
 this.quality = Number(document.getElementById('device-quality').content);
 // get viewport width
 this.viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
/* standard JS */
function InitStandard(jQuery) {
 //get device information
 this.device = new Device();
 // initialise jQuery, if device is capable
 if (this.device.quality === 1) {
 this.jqueryPlugins = new InitJquery(jQuery);
 }
}
/* cross-browser add event function */
if (window.addEventListener) {
 var addEvent = function (ob, type, fn) {
 if (typeof ob != 'undefined') {
 ob.addEventListener(type, fn, false);
 }
 };
} else if (document.attachEvent) {
 var addEvent = function (ob, type, fn) {
 if (typeof ob != 'undefined') {
 var eProp = type + fn;
 ob['e' + eProp] = fn;
 ob[eProp] = function () {
 ob['e' + eProp](window.event);
 };
 ob.attachEvent('on' + type, ob[eProp]);
 }
 };
}
/* initialise standard JS on load and pass in the jQuery object */
(function init(jQuery) {
 var js = new InitStandard(jQuery);
}(jQuery));
addEvent(window, 'load', init);

Answer 1

On the whole, I think you need to work on keeping it simple.

• I would not write my own cross-browser event handling function if I use jQuery, I would leverage what jQuery provides.

• This:

  /* standard JS */
  function InitStandard(jQuery) {
   //get device information
   this.device = new Device();
   // initialise jQuery, if device is capable
   if (this.device.quality === 1) {
   this.jqueryPlugins = new InitJquery(jQuery);
   }
  }
  /* initialise standard JS on load and pass in the jQuery object */
  (function init(jQuery) {
   var js = new InitStandard(jQuery);
  }(jQuery));
  

  could be

  (function InitStandard(jQuery) {
   //get device information
   this.device = new Device();
   // initialise jQuery, if device is capable
   if (this.device.quality === 1) {
   this.jqueryPlugins = new InitJquery(jQuery);
   }
  }(jQuery));
  

  Because you are not using var js anywhere.
  Also, 1 should be assigned to a properly named constant like ADVANCED_DEVICE

• addEvent(window, 'load', init); could be $( init )