Response title
This is preview!
jquery plugin like components pattern
in Using jQuery Plugins
•
11 years ago
developing components (don't think its right to call them plugin).
Saw different patterns all describing about only one component/plugin.
These components use jquery core.
And its very much custom components released to use by specific clients.
Assume I have 2 components comp1 & comp2.
Pattern One
- //component1
- (function ($) {
- var methods = {
- init: function (options) {
- var _this = this;
- var _options = { //defaults
- }
- if (options) {
- $.extend(_options, options);
- }
- _privateForComp1();
- },
- publicMethod: function () {}
- };
- //private for Comp1
- var _privateForComp1 = function () {}
- $.fn.Comp1 = 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 Comp1');
- }
- };
- })(jQuery);
- //component2
- (function ($) {
- var methods = {
- init: function (options) {
- var _this = this;
- var _options = { //defaults
- }
- if (options) {
- $.extend(_options, options);
- }
- _privateForComp2();
- },
- publicMethod: function () {}
- };
- //private for tab
- var _privateForComp2 = function () {}
- $.fn.Comp2 = 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 Comp2');
- }
- };
- })(jQuery);
Pattern Two
- (function ($) {
- $.fn.Comp1 = function (tabOptions) {
- // support mutltiple elements
- if (this.length > 1) {
- this.each(function () {
- $(this).comp1(tabOptions)
- });
- return this;
- }
- }
- })(jQuery);
- (function ($) {
- $.fn.Comp2 = function (tabOptions) {
- // support mutltiple elements
- if (this.length > 1) {
- this.each(function () {
- $(this).comp2(tabOptions)
- });
- return this;
- }
- }
- })(jQuery);
I am not worried about chaining...So these components can return object which contains public methods as below.
- (function ($) {
- var methods = {
- init: function (options) {
- var _this = this;
- var _options = { //defaults
- }
- if (options) {
- $.extend(_options, options);
- }
- _privateForComp1();
- return {
- publicMethod: function () {}
- }
- }
- };
- //private for Comp1
- var _privateForComp1 = function () {}
- $.fn.Comp1 = 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 Comp1');
- }
- };
- })(jQuery);
jQueryUI is using $.widget as below
- (function ($) {
- $.widget("ui.menu", {
- _create: function () {
- this.refresh();
- },
- refresh: function () {},
- activate: function (event, item) {},
- deactivate: function () {}
- // TODO merge with previousPage
- nextPage: function (event) {},
- // TODO merge with nextPage
- previousPage: function (event) {},
- hasScroll: function () {
- return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight");
- },
- select: function (event) {
- this._trigger("selected", event, {
- item: this.active
- });
- }
- });
- }(jQuery));
My question is which is the best approach to develop components/widgets which will be used by specific clients only.
Assuming all components in one single js file.
1