Starting from Constructor Function and Object.create() as methods for creating objects in Javascript, we analize a couple of way to bootstrap a jQuery Plugin.

1. jQuery Plugin
Design Patterns
“Deep into JS” Meetup

2. Constructor
Function

3. function Person() {}

4. function Person(name, surname) {!
! ! ! this.name = name;!
! ! ! this.surname = surname;!
}

5. function Person(name, surname) {!
! ! ! this.name = name;!
! ! ! this.surname = surname;!
! ! ! this.getName = function() {!
! ! ! ! ! ! // privileged method: useful if you need private method, attributes!
! ! ! ! ! ! return this.name;!
! ! ! }!
}

6. function Person(name, surname) {!
! ! ! this.name = name;!
! ! ! this.surname = surname;!
}!
Person.prototype.getName = function() {!
! ! ! ! return this.name;!
}

7. var robb = new Person(‘Robert’, ‘Casanova’);!
console.log(robb.getName());

8. Object.create()

9. var robb = {
! ! name: ‘Robert’,
! ! surname: ‘Casanova’,!
! ! getName: function() {
! ! ! ! ! return this.name;
! ! }!
}

10. var gigi = Object.create(robb);!
gigi.name = ‘Giorgio’;!
gigi.surname = ‘Moroder’;!
!
console.log(gigi.getName())

11. Plugin jQuery

12. $.fn[‘pluginName’] = function() {
this.each(function(){
$(this).doSomething();
});
}
Simplest jQuery plugin ever

13. LightWeight
Start Pattern

14. ;(function($, window,document, undefined ){!
//plugin goes here!
})(jQuery, window, document)
Immediately Invoked Function Expression
(IIFE)

15. var pluginName = “mioPlugin”,!
defaults = {
defaultProperty: ‘defaultValue’
}
Defaults

16. function Plugin(el, options) {!
! this.el = el;!
this.$el = $(el);!
this.options = $.extend({},defaults, options);!
! ! !
this._defaults = defaults;!
this._name = pluginName;!
!
! ! this.init();!
}
Constructor Function

17. Plugin.prototype.init = function() {!
! ! ! ! //the initial logic goes here!
}!
Plugin.prototype.someMethod = function() {!
…!
}
Methods

18. $.fn[pluginName] = function(options) {!
! ! ! return this.each(function(){!
! ! ! ! ! if(!$.data(this, pluginName)) {!
! ! ! ! ! ! $.data(this, pluginName, new Plugin(this, options));!
! ! ! ! ! }!
! ! ! });!
}
Plugin Magic

19. $(‘#elem’).pluginName({!
!! defaultProperty: ‘value’!
});
Example

20. DOM-to-Object
Bridge Pattern

21. var myObject = {!
! ! init: function (options,elem) {!
! ! ! ! …!!
! ! }!
}
Object

22. init: function (options,elem) {!
! ! this.options = $.extend({}, this.options,options);!
! ! this.el = elem;!
this.$el = $(elem);!
!
this._build();!
!
return this;!
}
Init Function

23. options: {!
! defaultOption: ‘defaultValue’!
}
Default options

24. _build: function() {!
! this.$el.html(‘inizialize html here’);!
},!
publicMethod: function() {
this.$el.doSomething();
}
Methods

25. $.plugin = function(name,object) {!
! ! $.fn[name] = function(options) {!
! ! ! ! return this.each(function(){
! ! ! ! ! ! if(!$.data(this,name)) {
$.data(this,name, Object.create(myObject).init(options,this))
}
})!
! ! }!
} !
$.plugin(“pluginName”, myObject )
Plugin Magic

26. $(‘#elem’).pluginName({!
!! defaultProperty: ‘value’!
});!
!
var plugin = $(‘#elem’).data(‘pluginName’);!
plugin.publicMethod();
Example