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');

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

我还有两个问题：

删除jQuery依赖甚至值得吗？
使这些功能（以及其他功能）可以链接是否有任何缺点？

感谢。

Answer 1

覆盖HTMLElement或Element类原型是实现可链接方法的一种方法。

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，详细讨论原因

为DOM链接制作JavaScript函数

1 个答案: