I'm used to writing plugins like so:
;(function($){jQuery.fn.myPlugin=function(options){
var defaults={
'property':value
},
o=$.extend({},defaults,options||{});
// INSERT AND CACHE ELEMENTS
var $Element=$('<div></div>');
$Element.appendTo($('body'));
function funFunction(){
// I have access to $Element!
$Element.hide(500);
};
this.each(function(i){
var $this=$(this);
});
return this;
});};})(jQuery);
I know it's not perfect, which is why I'm now trying to properly learn namespacing, better plugin structure/patterns. The past couple of books I've read unfortunately reference the jQuery plugin authoring tutorial word for word, so haven't been much help. The tutorial seems to split everything up and doesn't show a good example of a combination, which is why I'm confused. In the tutorial, it shows the namespacing example.
jQuery Plugin Namespacing Tutorial
(function( $ ){
var methods = {
init : function( options ) {
},
show : function( ) {
},
hide : function( ) {
},
update : function( content ) {
}
};
$.fn.tooltip = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
// calls the init method
$('div').tooltip();
I understand the structure and how to access namespaced objects, however it shows the other example for defaults/options excluding any namespacing... So in an effort to write the beginning of a plugin that is properly namespaced, has defaults/options and caches the HTML elements I'm inserting for use throughout the entire plugin, I've come up with the following.
Correct Combo?
;(function($,window,document,undefined){
var myPlugin={
// METHODS
init:function(options){
},
buildElements:function(){
var $Elements=$('<div id="myElem"></div>')
.appendTo($('body'));
}
};
$.fn.myPlugin=function(method,options){
var defaults={
},
options=$.extend({},defaults,options||{});
myPlugin.buildElements();
return this.each(function(){
var $this=$(this);
if(myPlugin[method]){
return myPlugin[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof method==='object'||!method){
return myPlugin.init.apply(this,arguments);
}else{$.error('Method '+method+' does not exist on jQuery.myPlugin');};
});
};})(jQuery);
Obviously, when I build/insert myElem it will only be available inside that method and not inside any others.... am I building it in the wrong place?
Is the defaults/extend in the correct place?
If I'm not wanting to access methods from outside of the plugin do I need the method logic section?
Are there any benefits to using .prototype vs .fn?
Thanks so much to anyone and everyone! :)