myWidget.js

// At a glance you can see which global objects are being imported, these are the local variable names you will use in your script
(function(z, $) { // encapsulate in a closure
  // Use strict is within scoped function so that it only applies to this code block
  "use strict"; // Prevents common errors and bad practices, by catching them at runtime.
  var proto; // The var that will store the reference to the prototype for our widget
  /**
   * Description of what the widget does
   *
   * @example
   * z.myWidget({
   *   width:100,
   *   height:50
   * }); // This should be an example of how use the class
   *
   * @constructor
   * @param {String/Object} selector
   * @param {Object} settings This is an example parameter description
   * @param {Integer} settings.width This is a description of the items within the settings object
   * @param {Integer} settings.height This is a description of the items within the settings object
   * @param {String} settings.title This is a description of the items within the settings object
   *
   * @return {Type} description of the return value (if any)
   */
  z.myWidget = function(settings) {

    if (!(this instanceof z.myWidget)) { // if it was not declared with the "new" syntax
      return new z.myWidget(settings); // make sure that the object is instantiated
    }

    // constructor functionality here
    var self = this,
      defaultSettings; // declare a variable to reference 'this', and then a variable to conatin our default settings

    defaultSettings = { // define the default settings for our widget
      // just some example settings
      width: 300,
      height: 100,
      title: 'My Widget'
    };

    // combine the settings they pass in with our default settings with their settings overriding ours if defined
    self.settings = $.extend({}, defaultSettings, settings);

    // our init function
    self._init() // call the private init function
  };

  proto = z.myWidget.prototype; // set the proto variable to reference the prototype of our widget

  // our private init function
  proto._init() {
    var self = this;
    // do stuff    
  }

  // these methods are the methods you create to be used to do the bulk of the work. build() and render() are just examples of some commonly used methods. Could be anything.
  /**
   * Description of what the method does
   *
   * @example
   * z.myWidget.build(param);
   *
   * @constructor
   * @param {Type} param1 description of the parameter 
   *
   * @return {Type} description of the return value (if any)
   */
  proto.build = function(param1) { // if need be, you can pass anything into this function within the .each above to do what you need to with each element.
    // can reference the settings object in here if needed
    var width = this.settings.width;
    // do stuff
  };

  /**
   * Description of what the method does
   *
   * @example
   * z.myWidget.render(param);
   *
   * @constructor
   * @param {Type} param1 description of the parameter 
   *
   * @return {Type} description of the return value (if any)
   */
  proto.render = function(param1) {
    // do stuff
  };
  // At a glance you can see which global objects are being used.
  // also (z, $j) where $j is an alias to our jQuery object
}(window.z, window.jQuery));