页面上包含2个或更多对象的javascript设计模式
我需要选择正确的设计模式。我的页面有两个从同一个构造函数创建的对象。我遇到的问题是检测哪个对象正在获得单击事件 我在创建对象后执行此操作:页面上包含2个或更多对象的javascript设计模式,javascript,oop,object,design-patterns,Javascript,Oop,Object,Design Patterns,我需要选择正确的设计模式。我的页面有两个从同一个构造函数创建的对象。我遇到的问题是检测哪个对象正在获得单击事件 我在创建对象后执行此操作: $("table tr, table button,.dataTables_paginate a").click(function (e) { **myTableName.buttonPressed($(this));** }); 及 然后 getName: function (objName) { // search through
$("table tr, table button,.dataTables_paginate a").click(function (e) {
**myTableName.buttonPressed($(this));**
});
及
然后
getName: function (objName) {
// search through the global object for a name that resolves to this object
for (var name in window)
if (window[name] == this) {
if (objName) {
myTableName = window[objName];
//window.myState[this.myInstanceName] = jQuery.extend({}, this);
break;
} else {
window[name] = this;
window[window[name]] = window[name];
myTableName = window[window[name]];
// window.myState[this.myInstanceName] = jQuery.extend({}, this);
}
break;
}
},
除此之外,这些都是全球性的,我不认为这是正确的做法
想法?您似乎应该使用自定义属性。自定义属性允许您将其他相关数据存储到任何DOM元素。一种方法是将DOM与一些JS字节码相关联。当您必须向后工作时,这尤其有用,即查找HTML元素的相关对象。标准规定这些属性必须以
数据-
开头(虽然从技术上讲,您可以使用浏览器未使用的任何内容,但不建议这样做)。下面是一个例子:
HTML:
似乎应该使用自定义属性。自定义属性允许您将其他相关数据存储到任何DOM元素。一种方法是将DOM与一些JS字节码相关联。当您必须向后工作时,这尤其有用,即查找HTML元素的相关对象。标准规定这些属性必须以
数据-
开头(虽然从技术上讲,您可以使用浏览器未使用的任何内容,但不建议这样做)。下面是一个例子:
HTML:
你的代码和问题不是很清楚。“我的页面有两个对象”是什么意思?如果试图确定是什么触发了单击事件,则有两个选项:为每个选择器创建单独的事件处理程序,或者在处理所有单击的单个事件处理程序中检测是什么选择器触发了事件。还有,“名字”是什么?选择器?
name
属性的值?ID或节点类型?如果你能澄清你的意图,那将大有帮助。对不起。创建了2个对象:抱歉。创建了2个对象:var qTableIdent=new QuadTable();qTableIdent.initTable(选项);var qTableDocs=新的四表();qTableIdent.initTable(选项2);选项和选项2是广泛的对象。”name'是实例名称,如果单击是paginate元素,则它也是容器id或atribute。按钮按下:函数(el){if(el.is('a')&&el.nexist('li').hasClass('paginate_按钮')){var objName=el.attr('aria-controls');调试器;}其他{var objName=$(el.nexist('table').attr('id');}另一个问题可能是mvc模式,但是,由于我没有使用框架……啊,我明白了,谢谢你澄清了这一点,我现在明白了一点:)所以我认为你只需要一个地方来存储你的表对象,并使用名称引用它们?我现在还不会把它作为一个答案发布,因为我仍然不完全清楚,但最多是在ic级别,您可以创建一个名为tables
的全局对象,然后像这样向其中添加表:tables[name]=quadTableInstance;
。要获取表,只需使用其键访问属性值:table=tables[name];
。您的代码和问题不太清楚。您所指的是什么“我的页面有2个对象”?如果您试图识别是什么触发了单击事件,则有两个选项:为每个选择器创建单独的事件处理程序,或在处理所有单击的单个事件处理程序中检测是什么选择器触发了事件。还有,“名称”是什么“?选择器?名称属性的值?ID或节点类型?如果您能澄清您的意图,这将非常有帮助。抱歉。创建了2个对象:抱歉。创建了2个对象:var qTableIdent=new QuadTable();qTableIdent.initTable(选项);var qTableDocs=new QuadTable();qTableIdent.initTable(选项2);options和options2是扩展对象。“name”是实例名称,如果单击的是paginate元素,则它也是容器id或atribute。buttonPressed:function(el){if(el.is('a')&&el.closest('li')。hasClass('paginate_button')){var objName=el.attr('aria-controls');debugger;}else{var objName=$(el).closest('table').attr('id');}另一个问题可能是mvc模式,但是,由于我没有使用框架……啊,我明白了,谢谢你澄清了这一点,我现在明白了一点:)所以我认为你只需要一个地方来存储你的表对象,并使用名称引用它们?我现在还不会把它作为一个答案发布,因为我仍然不完全清楚,但最多是在ic级别,您可以创建一个名为tables
的全局对象,然后像这样向其中添加表:tables[name]=quadTableInstance;
。要获取表,只需使用其键访问属性值:table=tables[name];
。
getName: function (objName) {
// search through the global object for a name that resolves to this object
for (var name in window)
if (window[name] == this) {
if (objName) {
myTableName = window[objName];
//window.myState[this.myInstanceName] = jQuery.extend({}, this);
break;
} else {
window[name] = this;
window[window[name]] = window[name];
myTableName = window[window[name]];
// window.myState[this.myInstanceName] = jQuery.extend({}, this);
}
break;
}
},
<table data-instance-name="name1">
...
<button>Action</button>
<a>Another action</a>
</table>
<table data-instance-name="name2">
...
<button>Action</button>
<a>Another action</a>
</table>
$( 'table button, table a' ).on('click', function() {
var name = $(this).closest('table').attr('data-instance-name'),
table = tables[name];
});