目前我所做的是检查页面中是否存在元素。但是我的代码有很多条件,因为那样。当元素不存在时,Jquery事件侦听器不会显示错误。 jquery如何处理这个以及我可以使用哪些texniques进行更好的设计?
var el = document.getElementById('el');
var another_el = document.getElementById('another_el');
if(another_el){
el.addEventListener('click', swapper, false);
}
if(el){
el.addEventListener('click', swapper, false);
}
....
...
答案 0 :(得分:5)
jquery如何处理...?
jQuery的API是基于集合的,而不是基于元素的。 DOM的API是基于元素的。在jQuery中执行TableView
时,如果$("#foo").on("click", ...)
id
没有元素,"foo"
会返回空集,而不是$()
在该集合上调用null
并没有做任何事情,但也不会导致错误。
由于on
会返回元素或getElementById
,您必须进行检查才能阻止尝试调用null
上的方法,导致错误。
如果您希望在不使用jQuery的情况下获得基于集合的API的好处,那么可以编写您自己的一组使用null
的实用程序函数来为自己提供基于集合的精简包装器围绕DOM API,如果你愿意的话。
这是一个非常简单的启动示例:
querySelectorAll
// The object we use as the prototype of objects returned by `domSet`
var domSetMethods = {
on: function(eventName, handler) {
// Loop through the elements in this set, adding the handler
this.elements.forEach(function(element) {
element.addEventListener(eventName, handler);
});
// To support chaining, return `this`
return this;
}
};
// Get a "DOM set" for the given selector
function domSet(selector) {
// Create the set, usign `domSetMethods` as its prototype
var set = Object.create(domSetMethods);
// Add the elements
set.elements = Array.prototype.slice.call(document.querySelectorAll(selector));
// Return it
return set;
}
domSet("#foo").on("click", function() {
console.log("foo clicked");
});
// Notice that even though there's no id="bar" element, we don't get an error
domSet("#bar").on("click", function() {
console.log("bar clicked");
});
您可以向<div id="foo">foo element (there is no bar element)</div>
添加执行其他操作的方法。为了支持API jQuery提供的链接样式,在大多数情况下,从这些方法返回domSetMethods
。