将 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;
};

---

但我收到此错误：

“未捕获的类型错误：el.data 不是函数”

有人对如何修复有任何想法吗？

Answer 1

el是DOM对象引用，不是jQuery对象，所以不能调用jQuery方法。

要在 VanillaJS 中获取data-* 属性值，可以使用dataset。

使用

el.dataset.delay

如果你想要使用 jQuery 方法，你可以在 jQuery 中包装元素引用

$(el).data('delay')