Допустим, у меня есть файл 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

В чем именно причина этого конфликта? Как я мог избежать такого конфликта?

0
RE666 28 Окт 2019 в 01:58

2 ответа

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

0
Ali 28 Окт 2019 в 02:05

Вам нужно обнулить функции, если 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>
0
Joelgullander 28 Окт 2019 в 02:07