-
-
Save brianegan/3048878 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(selector, { | |
* 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 z_MyWidget(selector, settings) { // z.MyWidget to denote a class & a name for the constructor function | |
if (!(this instanceof z.myWidget)) { // if it was not declared with the "new" syntax | |
return new z.myWidget(selector, 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 | |
// cache a reference to the jQuery object of selector | |
self.jqObj = _jqObj(selector); | |
// since this widget is dependant upon having a valid selector, exit out if it doesn't exist | |
if (!self.jqObj) { | |
console.error('Invalid selector.'); | |
return; | |
} | |
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 | |
_init.call(self); // call the private init function and setting the value of "this" to our widget | |
}; | |
// private functions declared with function () {} inside of the closure | |
function _jqObj(selector) { | |
return (selector instanceof $ ? selector : $(selector)); | |
} | |
// our private init function | |
function _init() { | |
var self = this; | |
// make sure that run the code for every object that is inside the jQuery object (i.e. if the selector contains more than one element) | |
self.jqObj.each(function() { | |
// this code is what will be executed on each object | |
// do stuff | |
}); | |
} | |
proto = z.myWidget.prototype; // set the proto variable to reference the prototype of our widget | |
// 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