Лучший подход для обработки ошибок «Не удается прочитать свойство 'addEventListener' с нулевым значением» - PullRequest
Новая
       24

Лучший подход для обработки ошибок «Не удается прочитать свойство 'addEventListener' с нулевым значением»

0 голосов
/ 30 мая 2018

В настоящее время я проверяю, существует ли элемент на странице.Но мой код имеет много условий для этого.Слушатели событий Jquery не показывают ошибку, когда элемент не существует.Как jquery справляется с этим и какие методы можно использовать для улучшения дизайна? 

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);
}
....
...

1 Ответ

0 голосов
/ 30 мая 2018

Как jquery справляется с этим ...?

API jQuery основан на множестве , а не на элементах.API DOM основан на элементах.Когда вы делаете $("#foo").on("click", ...) в jQuery, если нет элемента с id "foo", $() возвращает пустой набор , а не null, и вызов on для этого набора неничего не делать, но также не вызывает ошибку.

Так как getElementById возвращает элемент или null, вы должны иметь проверку, которую вы показали, чтобы предотвратитьпытаясь вызвать методы на null, что вызывает ошибку.

Если вы хотите использовать преимущества API на основе множеств без использования jQuery, вы могли бы написать свой собственный набор служебных функцийкоторые используют querySelectorAll, чтобы создать себе тонкую оболочку на основе набора для DOM API, если хотите.

Вот очень простой начальный пример: 

// 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>

Вы можете добавить методы к domSetMethods, которые делают другие вещи.Для поддержки стиля связывания API, предоставляемого jQuery, вы возвращаете this в большинстве случаев из этих методов.

...