Как избежать конфликтов при вызове несуществующих элементов в моей пользовательской библиотеке 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

Вам необходимо проверить все функции, если x равно нулю.

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>

Answer 2

попробуй if(mylib('.hidden').length)mylib('.hidden').hide(); надеюсь, я правильно понял вопрос.