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 )