编写接受方法和选项的jQuery插件
我遵循jQuery文档中的说明。我试图将我的调用保持在第6.1节中指示的相同名称空间中,但是我还需要能够在每次调用中传递更多选项 我想做什么 我目前拥有的 我已经有一段时间没有做前端web开发了,我正在尝试重新学习它,但是方法逻辑部分让我有些困惑。我需要了解编写接受方法和选项的jQuery插件,jquery,function,plugins,methods,Jquery,Function,Plugins,Methods,我遵循jQuery文档中的说明。我试图将我的调用保持在第6.1节中指示的相同名称空间中,但是我还需要能够在每次调用中传递更多选项 我想做什么 我目前拥有的 我已经有一段时间没有做前端web开发了,我正在尝试重新学习它,但是方法逻辑部分让我有些困惑。我需要了解方法[options.method].apply()的处理过程。我知道这是调用每个方法的地方,但我不确定在哪里会传递额外的选项 [update1] 我已经阅读了更多关于apply()的内容,并且相信它会通过对象和任何其他参数。我尝试将其更改为
方法[options.method].apply()的处理过程。我知道这是调用每个方法的地方,但我不确定在哪里会传递额外的选项
[update1]
我已经阅读了更多关于apply()
的内容,并且相信它会通过对象和任何其他参数。我尝试将其更改为methods[options.method].apply(这是,options)代码>但是这似乎并没有纠正我的问题
[update2]
我现在通过进行以下更改使代码正常工作
var methods = {
init: function(options) {
//initialization
},
method1: function(element, options) {
var settings = $.extend({
'option1' = 'option default',
'option2' = 'option 2 default'
}, options);
//use settings for given method ex: settings.option1, settings.option2
element.each(function() {
};
}
};
$.fn.myFunction(options) {
//method logic
if(methods[options.method]) {
return methods[options.method](this, options); // apply(this, Array.prototype.slice.call(arguments, 1)); //I'm thinking I need to do something here to pass through the options to the methods???
} else if (typeof options.method === 'object' || !options.method) {
return methods.init.apply(this, options); // arguments); //or possibly here?
} else {
$.error('Method ' + options.method + ' does not exist on jQuery.myFunction');
}
};
不过,我将把这个问题保留几天,如果有人想解释原始代码的用途和我的更改,我会接受这个答案。这是我在互联网上找到的一个模板,我用它来避免从头开始
// keep all your code in a closure
(function($)
{
// name your plugin - try to make it unique
$.fn.wTooltip = function(option, settings)
{
// check if user is setting/getting properties manually after plugin creation
if(typeof option === 'object')
{
settings = option;
}
else if(typeof option === 'string')
{
var data = this.data('_wTooltip');
// this will check if plugin has already been initialized for this element
if(data)
{
if($.fn.wTooltip.defaultSettings[option] !== undefined)
{
if(settings !== undefined){
if(option == 'title') data.content.html(settings);
data.settings[option] = settings;
return true;
}
else return data.settings[option];
}
else return false;
}
else return false;
}
// extend user settings with default settings
settings = $.extend({}, $.fn.wTooltip.defaultSettings, settings || {});
// iterate through all elements and return them to maintain jQuery method chaining
return this.each(function()
{
var elem = $(this);
// create copy of settings object allowing us to make individual adjustments
// this ensures that only values for current element are changed
var $settings = jQuery.extend(true, {}, settings);
$settings.title = settings.title || elem.attr('title') || 'No title set';
// create a tooltip object
var tooltip = new Tooltip($settings);
// we would typically run our generation code here
tooltip.generate();
// run some code here
// try to keep as much of the main code in the prototype methods as possible
// focus on just setting up the plugin and calling proper methods from here
// store the tooltip object for later reference - setters/getters
elem.data('_wTooltip', tooltip);
});
}
// provide default settings
// setting it up like this allows a developer to modify defaults like so:
// $.fn.wTooltip.defaultSettings.color = 'white';
$.fn.wTooltip.defaultSettings = {
position : 'mouse',
color : 'black'
};
// create our tooltip "class"
// this will store the unique individual properties for each tooltip
function Tooltip(settings)
{
this.tooltip = null;
this.settings = settings;
return this;
}
// prototype the tooltip class
// this will contain methods shared amongst all tooltips
// DO NOT keep any unique tooltip properties here
Tooltip.prototype =
{
generate: function()
{
// use local reference of this
// this will be important when using in other closures like event closures
var $this = this;
// return the tooltip in case its already been defined for the current element
if($this.tooltip) return $this.tooltip;
//code
},
someFunc: function()
{
//code
}
}
})(jQuery);
wTooltip是创建独特插件时应进行个性化设置的名称
var methods = {
init: function(options) {
//initialization
},
method1: function(element, options) {
var settings = $.extend({
'option1' = 'option default',
'option2' = 'option 2 default'
}, options);
//use settings for given method ex: settings.option1, settings.option2
element.each(function() {
};
}
};
$.fn.myFunction(options) {
//method logic
if(methods[options.method]) {
return methods[options.method](this, options); // apply(this, Array.prototype.slice.call(arguments, 1)); //I'm thinking I need to do something here to pass through the options to the methods???
} else if (typeof options.method === 'object' || !options.method) {
return methods.init.apply(this, options); // arguments); //or possibly here?
} else {
$.error('Method ' + options.method + ' does not exist on jQuery.myFunction');
}
};
// keep all your code in a closure
(function($)
{
// name your plugin - try to make it unique
$.fn.wTooltip = function(option, settings)
{
// check if user is setting/getting properties manually after plugin creation
if(typeof option === 'object')
{
settings = option;
}
else if(typeof option === 'string')
{
var data = this.data('_wTooltip');
// this will check if plugin has already been initialized for this element
if(data)
{
if($.fn.wTooltip.defaultSettings[option] !== undefined)
{
if(settings !== undefined){
if(option == 'title') data.content.html(settings);
data.settings[option] = settings;
return true;
}
else return data.settings[option];
}
else return false;
}
else return false;
}
// extend user settings with default settings
settings = $.extend({}, $.fn.wTooltip.defaultSettings, settings || {});
// iterate through all elements and return them to maintain jQuery method chaining
return this.each(function()
{
var elem = $(this);
// create copy of settings object allowing us to make individual adjustments
// this ensures that only values for current element are changed
var $settings = jQuery.extend(true, {}, settings);
$settings.title = settings.title || elem.attr('title') || 'No title set';
// create a tooltip object
var tooltip = new Tooltip($settings);
// we would typically run our generation code here
tooltip.generate();
// run some code here
// try to keep as much of the main code in the prototype methods as possible
// focus on just setting up the plugin and calling proper methods from here
// store the tooltip object for later reference - setters/getters
elem.data('_wTooltip', tooltip);
});
}
// provide default settings
// setting it up like this allows a developer to modify defaults like so:
// $.fn.wTooltip.defaultSettings.color = 'white';
$.fn.wTooltip.defaultSettings = {
position : 'mouse',
color : 'black'
};
// create our tooltip "class"
// this will store the unique individual properties for each tooltip
function Tooltip(settings)
{
this.tooltip = null;
this.settings = settings;
return this;
}
// prototype the tooltip class
// this will contain methods shared amongst all tooltips
// DO NOT keep any unique tooltip properties here
Tooltip.prototype =
{
generate: function()
{
// use local reference of this
// this will be important when using in other closures like event closures
var $this = this;
// return the tooltip in case its already been defined for the current element
if($this.tooltip) return $this.tooltip;
//code
},
someFunc: function()
{
//code
}
}
})(jQuery);