understanding design pattern of a jquery gallery plugin
hey guys i was just going through the code of a gallery plugin and i have been on this for a few hours now , basiclly the plugin has the following code structure , have a look :
- (function( $, undefined ) {
-
- /*
- * Gallery object.
- */
- $.Gallery = function( options, element ) {
-
- this.$el = $( element );
- this._init( options );
-
- };
-
- $.Gallery.defaults = {
- current : 0,
- autoplay : false,
- interval : 2000 };
-
- $.Gallery.prototype = {
- _init : function( options ) {
-
- },
- _validate : function() {
-
- },
- _layout : function() {
-
-
- },
- _setItems : function() {
-
- },
- _loadEvents : function() {
-
-
- },
- _getCoordinates : function( position ) {
-
-
- },
- _navigate : function( dir ) {
-
-
- },
- _startSlideshow : function() {
-
-
- },
- destroy : function() {
-
-
- };
-
- var logError = function( message ) {
-
- };
-
- $.fn.gallery = function( options ) {
-
-
- if ( typeof options === 'string' ) {
-
- this.each(function() {
-
- // do something
-
- });
-
- }
- else {
-
-
- this.each(function() {
-
- // do something
-
- });
-
- }
-
- return this;
-
- };
-
- })( jQuery );
now i have worked on a few jquery plugin earlier , but never come across such a plugin structure before , espically the below poniters are a bit weird , have a look :
1.
There is just one prototype used in the plugin ,
- $.Gallery.prototype = {
-
- // all the functions are written here .
-
- };
2.
using this pattern this always actually points to gallery(which is the main object ) and thus makes it easy to make calls to other functions in the prototype chain :
- $.Gallery.prototype = {
- _init : function( options ) {
- // since this is actually pointing to gallery here , you can call _validate directly here , by just saying this.validate() }, _validate : function() {
-
- },
So i have a question here, what design patterns is this ? and what are its obvious advantages ?