【发布时间】：2015-07-01 00:36:40
【问题描述】：
我正在尝试在 jquery 插件中包装一个画布函数，以便可以通过多个实例调用它。
我希望能够遍历找到的项目并像这样调用插件
HTML...
<div id="select1" class="foo" data-init="multi">A</div>
<div id="select2" class="foo" data-init="multi">B</div>
<div id="select3" class="foo" data-init="multi">C</div>
<div id="select4" class="foo" data-init="multi">D</div>
JS ...
var complicatedObj = {
init: function(element){
this.el = element;
console.log("init method", this.el);
//start a complicated process
//like rendering a canvas applicaation
this.bindEvent();
this.addRandom(this.el);
},
addRandom: function(el){
$(el).text(Math.random());
},
reInit: function(){
console.log("re-initialize method");
},
bindEvent: function(){
$(this.el).click(function() {
console.log("Letter.", $(this).text());
});
}
}
//An application with complicated functions -- initialize, re-initialize
$.multiInstance = {
id: 'multiInstance',
version: '1.0',
defaults: { // default settings
foo: 'bar'
}
};
(function ($) {
//Attach this new method to jQuery
$.fn.extend({
multiInstance: function (params) {
//Merge default and user parameters
var otherGeneralVars = 'example';
return this.each(function () {
var $this = $(this), opts = $.extend({},$.multiInstance.defaults, params);
switch (params) {
case "init":
complicatedObj.init($this);
break;
case "reInit":
complicatedObj.addRandom($this);
break;
}
//console.log("$this", $this);
console.log("params", params);
//$this.text(opts.foo);
});
}
})
})(jQuery);
/*
$("#select1").multiInstance();
$("#select2").multiInstance({foo:"foobar"})
$("#select3").multiInstance("init");*/
$('[data-init="multi"]').each(function( index ) {
//console.log( index + ": " + $( this ).text());
$(this).multiInstance("init");
});
setTimeout(function(){ $('#select3').multiInstance("reInit"); }, 2000);
但我需要能够调用不同的方法，将参数传递给这些方法——然后当发生更改时——提供回调以捕获对实例的更改
这是构建插件的正确方法吗...我希望能够创建应用程序的多个实例——但也可以从外部控制它——并且还可以从中提取值以获得外部结果。
【问题讨论】：
-
“但也可以从外部控制它 - 并从中提取值以获得外部结果” 可以描述“从外部控制它”吗？
-
好的 - 就像这个插件一样 - 是一个轮播 - 你有下一个/上一个箭头绑定到它......和多个轮播。 -- 但也有其他控制用户界面组件，如选择框、输入 --- 控制一个或两个轮播（就好像它们是双胞胎一样）。所以一个更改的选择框 - 调用轮播插件中的更改。但随后我需要插件与外部领域对话以指示其在哪张幻灯片上。几乎创建一个主/从 - 反之亦然的关系
-
我应该删除“complicatedObj”并将其中的所有函数作为“$.multiInstance”的一部分吗？ --- 还说有一个 img.load - 或者可能需要几秒钟才能采取行动的东西 - 我发现我的“轮播” - 实际上是一个画布 360 应用程序在多个实例中中断
-
“需要插件与外部领域对话以指示其在哪张幻灯片上。” 可以描述“与外部领域对话”吗？ “几乎创建一个主/从 - 反之亦然的关系” 什么是“主/从 - 反之亦然的关系”？不确定预期的结果是什么？
-
-- 外部领域 --- 站点的其余部分 - 如果您将它想象成一个巨大的仪表板应用程序。 “主/从”——我使用轮播切换到不同的照片，并切换其他控件（输入、滑块）以匹配更改。我更改控件（输入、滑块）它会更改轮播
标签： javascript jquery jquery-plugins