javascript - 使 DOM 的 JavaScript 函数可链接

Question

我有以下 jQuery 代码:

$('.selector').removeClass('removed').addClass('added');

我计划用纯 JavaScript 编写所有代码，所以我这样做了:

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className);
  else
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
}

var element = document.querySelector(".selector");
removeClass(element, 'removed');
addClass(eleement, 'added');

它按预期工作，但我希望这些函数可以链接以保持一致性。我怎样才能做到这一点？

我还有两个问题:

1. 删除 jQuery 依赖值得吗？
2. 使上述(和其他)函数可链接有什么缺点吗？

谢谢。

Answer 1

重写 HTMLElement 或 Element 类原型(prototype)是执行可链接方法的一种方法。

HTMLElement.prototype.addClass = function (className) {
    let el = this;
    if (el.classList)
        el.classList.add(className);
    else
        el.className += ' ' + className;
    return this;
};
HTMLElement.prototype.removeClass = function (className) {
    let el = this;
    if (el.classList)
        el.classList.remove(className);
    else
        el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    return this;
};

然后你可以这样做:

someElement.addClass('one').addClass('two').removeClass('one');

要回答有关删除 jQuery 的后续问题，这取决于您的用例。如果您仅使用 jQuery 进行简单的 DOM 操作，您可以放弃它或使用更轻的替代方案，例如 MinifiedJS。最终，这取决于便利方法(避免解决已经解决的问题)和脚本有效负载大小之间的权衡。还值得一提的是，如果有效负载大小是唯一的问题，通过 CDN 使用 jQuery 将确保大多数用户已将其缓存在浏览器中。您还可以仅使用您需要的功能来自定义构建 jQuery。

关于你的第二个后续问题，就代码管理、性能和跨浏览器兼容性而言，这可能不是一个好主意。检查this question on SO和 this linked article from one of the answers详细讨论原因