Skip to content

Instantly share code, notes, and snippets.

@overthemike
Created July 4, 2012 18:00
Show Gist options
  • Save overthemike/3048617 to your computer and use it in GitHub Desktop.
Save overthemike/3048617 to your computer and use it in GitHub Desktop.
// 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));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment