Конвертирование JQuery $ .extend в чистом JavaScript

Question

Я пытаюсь избавиться от JQuery, как мне это нужно только для так мало вещей, и вместо того, чтобы использовать чистый JavaScript

У меня был оригинальный код:

this.bar = el.find('.bar'); 
this.options = $.extend({ 
    delay: $.toInt(el.data('delay')) || 2000 
}, options); 

И я попытался преобразовать его с этим:

function foo(el, options) { 

    .................. 

    this.bar = el.querySelectorAll(".bar"); 
    this.options = extend({ 
     delay: parseInt(el.data('delay')) || 2000 < -- - problem 
    }, options); 
} 

---

function extend(first, second) { 
    for (var secondProp in second) { 
     var secondVal = second[secondProp]; 
     if (secondVal && Object.prototype.toString.call(secondVal) === "[object Object]") { 
      first[secondProp] = first[secondProp] || {}; 
      extend(first[secondProp], secondVal); 
     } else { 
      first[secondProp] = secondVal; 
     } 
    } 
    return first; 
}; 

---

Но я получаю эту ошибку:

"Uncaught TypeError: el.data is not a function"

Кто-нибудь есть какие-либо идеи о том, как исправить?

Answer 1

el является ссылкой на объект DOM, это не объект jQuery, поэтому вы не можете вызвать jQuery-методы на нем.

Чтобы получить значение атрибута data-* в VanillaJS, вы можете использовать dataset.

Использование

el.dataset.delay 

Если вы хотите использовать метод JQuery вы можете обернуть ссылку элемент в JQuery

$(el).data('delay')