将 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 方法。

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

使用

el.dataset.delay

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

中

$(el).data('delay')

将 jQuery $.extend 转换为纯 JavaScript

Converting jQuery $.extend to pure JavaScript

javascript

jquery

ecmascript-5

ecmascript-6