如何避免在我的自定义JavaScript库中调用不存在的元素时发生冲突

Question

假设我有一个文件mylib.js，我在其中声明了一些函数，以便在我正在处理的几个项目中重复使用。

var mylib = function(s) {
var x;
var obj = {
myLibrary(s){
if (x) return x;
return document.querySelector(s);
},
hide(){
x.style.display='none';
return this;
},
show(a=''){
x.style.display=a;
return this;
}
};
x = obj.myLibrary(s);
return obj;
};

现在，如果我有另一个文件website.js，我在其中使用我的自定义JS库。例如，我的一些页面包含在启动时应该隐藏的部分，所以我给它们提供了类.hidden，并将其应用于我的website.js文件：

mylib('.hidden').hide();

只要.hidden-类中有任何元素，它就可以正常工作，但在一些包含该文件的页面上，就不会有这样的类，所以这实际上会导致冲突，控制台告诉我：x is null

这场冲突的确切原因是什么？我怎样才能避免这种冲突？

Answer 1

尝试if(mylib('.hidden').length)mylib('.hidden').hide();希望我能正确理解这个问题。

Answer 2

如果x为null，则需要对函数进行null检查。

var mylib = function(s) {
var x;
var obj = {
myLibrary(s){
if (x) return x;
return document.querySelector(s);
},
hide(){
if(x) {
x.style.display='none';
}
return this;
},
show(a=''){
if(x) {
x.style.display=a;
}
return this;
}
};
x = obj.myLibrary(s);
return obj;
};
mylib('.hidden').hide();

<div>Test</div>