-
-
Save andybuchanan/2370489 to your computer and use it in GitHub Desktop.
Attempt at Jquery UI Widget "boilerplate" with local and global variables and functions
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
// This is my attempt at a Jquery UI Widget boilerplate which expands upon the others I have | |
// seen. Of particular interest to me is establishing best practices for instance, widget and | |
// global; variables, arrays, object, functions.... | |
(function($, undefined){ | |
// locals - accessible by all instances but not accessible outside this closure | |
instances = []; // ITEM_1 - local array | |
// see ITEM_2 for global alternative | |
var local = 'value'; // local variable | |
localFunct = function() { // local function (constitutes a private method) | |
// ... | |
}; | |
$.widget("myNameSpace.myWidget", { | |
// ITEM_4 - objects defined here will be added to the widget's | |
// prototype. They will be local to the individual instance. | |
// Example of constants obj accessible via this.constants.[key] | |
// Cannot be accessed outside the widget. Each instance will receive these | |
// initial values but maintain its own values like options but there is no | |
// built in method to allow access via the widget API. | |
_constants: { | |
widgetName: myWidget, | |
author: me | |
}, | |
options: { | |
autoOpen: true | |
}, | |
_create: function(){ | |
// by default, consider this thing closed. | |
this._isOpen = false; // ITEM_3 this is an instance variable - accessible | |
// within all methods. Each instance maintains it own value | |
// because _isOpen is assigned to the instance (this is the instance) | |
// remember this instance | |
// for use with ITEM_2 | |
$.myNameSpace.myWidget.instances.push(this.element); | |
// for use with ITEM_1 | |
instances.push(this.element); | |
}, | |
_init: function(){ | |
// call open if this instance should be open by default | |
if( this.options.autoOpen ){ | |
this.open(); | |
} | |
}, | |
open: function(){ | |
this._isOpen = true; | |
// optional auto close of other instances | |
// trigger beforeopen event. if beforeopen returns false, | |
// bail out of this method. | |
if( this._trigger("beforeopen") === false ){ | |
return; | |
} | |
// call methods on every other instance of this dialog | |
$.each( this._getOtherInstances(), function(){ | |
var $this = $(this); | |
if($this.myWidget("isOpen")){ | |
$this.myWidget("close"); | |
} | |
}); | |
// more open related code here | |
// optional trigger open event | |
this._trigger("open"); | |
return this; | |
}, | |
close: function(){ | |
this._isOpen = false; | |
// optional trigger close event | |
this._trigger("close"); | |
return this; | |
}, | |
isOpen: function(){ | |
return this._isOpen; | |
}, | |
destroy: function(){ | |
// remove this instance from instances array | |
var element = this.element, | |
// for use with ITEM_2 | |
position = $.inArray(element, $.ui.myWidget.instances); | |
// for use with ITEM_1 | |
position = $.inArray(element, instances); | |
// if this instance was found, splice it off | |
if(position > -1){ | |
// for use with ITEM_2 | |
$.myNameSpace.myWidget.instances.splice(position, 1); | |
// for use with ITEM_1 | |
instances.splice(position, 1); | |
} | |
// call the original destroy method since we overwrote it | |
$.Widget.prototype.destroy.call( this ); | |
}, | |
_getOtherInstances: function(){ // for use with ITEM_2 | |
var element = this.element; | |
// for use with ITEM_2 | |
return $.grep($.myNameSpace.myWidget.instances, function(el){ | |
return el !== element; | |
}); | |
// for use with ITEM_1 | |
return $.grep(instances, function(el){ | |
return el !== element; | |
}); | |
}, | |
_setOption: function(key, value){ | |
this.options[key] = value; | |
switch(key){ // for special case options | |
case "something": | |
// perform some additional logic if just setting the new | |
// value in this.options is not enough. | |
break; | |
} | |
} | |
}); | |
$.extend($.myNameSpace.myWidget, { | |
instances: [] // ITEM_2 - global at $.myNameSpace.myWidget.instances | |
// see ITEM_1 for local alternative | |
// don't need to add global function example | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a work in progress. It may or may not be right. If you have comments, suggestions, etc. please leave a comment.