使DOM链的JavaScript函数成为可选函数
使DOM链的JavaScript函数成为可选函数
提问于 2018-01-31 05:50:55
我有以下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依赖值得吗？
- 使这些功能以上(和其他)是可链接的，有什么缺点吗？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-31 06:15:16
重写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构建。
至于第二个后续问题，在代码管理、性能和跨浏览器兼容性方面，这可能不是一个很好的主意。查看关于这样的问题和这篇链接文章的答案之一，详细讨论为什么
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48535310
复制相关文章
相似问题
腾讯云开发者
