我已经阅读了几篇关于最佳jquery插件模式的文章,包括官方文档 -
http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
https://github.com/jquery-boilerplate/patterns/
http://docs.jquery.com/Plugins/Authoring
但是,无法决定什么是最适合我的需求,也许有人会建议。
我需要从内部函数创建一个公共方法。
目前我正在使用基本的插件结构:
(function ($) {
$.fn.plugin = function (options) {
var defaults = {
someoption: true
};
options = $.extend(defaults, options);
return this.each(function () {
// all logic goes here...
if (options.someoption) {
mainMethod();
}
function mainMethod () {
// main method bla bla..
// also calls in certain circumstances this func:
somePublicMethod();
}
function somePublicMethod () {
// AND this method should be accessible like:
// $('elem').plugin('somePublicMethod');
}
});
};
})(jQuery);
此somePublicMethod()
func应该可以像$('elem').plugin('somePublicMethod');
你有想法吗?
答案 0 :(得分:6)
我在插件中使用这种模式。它允许我拥有私有和公共方法,并且如果插件未初始化则还禁用调用方法
;(function($, window, undefined) {
'use strict';
/**
* My Plugin
* v1.0
*/
$.MyPlugin = function(options, element) {
// this element
this.$el = $(element);
this._init(options);
};
$.MyPlugin.defaults = {
default1: 1,
default2: 2
};
$.MyPlugin.prototype = {
/**
* Private methods
*/
_init: function(options) {
// options
this.options = $.extend(true, {}, $.MyPlugin.defaults, options);
},
_privateMethod: function() {
},
/**
* Public methods
*/
publicMethod: function() {
}
};
var logError = function(message) {
if(window.console) {
window.console.error(message);
}
};
$.fn.myPlugin = function(options) {
this.each(function() {
var self = $.data(this, 'myPlugin');
if(typeof options === 'string') {
var args = Array.prototype.slice.call(arguments, 1);
if(!self) {
logError('cannot call methods on myPlugin prior to initialization; ' +
'attempted to call method ' + options);
return;
}
if(!$.isFunction(self[options]) || options.charAt(0) === '_') {
logError('no such method ' + options + ' for myPlugin self');
return;
}
self[options].apply(self, args);
} else {
if(self) {
self._init();
} else {
self = $.data(this, 'myPlugin', new $.MyPlugin(options, this));
}
}
});
return this;
};
})(jQuery, window);