Question

在jQuery中，有没有一种方法可以保存常用的函数链以供以后引用，以保持DRY的编码风格？

例如，在以下代码中，我想引用链.closest('.row').closest('div').remove();：

$('#search-results .row .unsafe').closest('.row').closest('div').remove();
$('#search-results .warnings').closest('.row').closest('div').remove();
$('#search-results .textresults1:contains("Endpoint offline!")').closest('.row').closest('div').remove();
// lots more distinct selectors

类似这样的东西：

var bye = ".closest('.row').closest('div').remove()";

$('#search-results .row .unsafe').bye();
$('#search-results .warnings').bye();
$('#search-results .textresults1:contains("Endpoint offline!")').bye();
// more...

我的问题仅涉及以这种方式重用函数链-即jQuery是否具有执行以字符串形式存储在变量中的函数链的方法。我很高兴可以重写任何代码示例来避免对此的需要，但这是一个不同的问题。我认为可能会有很多用例来存储这样的常用功能链-例如用于复杂的样式/动画例程。

^{[我知道可以修改第一个选择器以包含所有后续选择器，但是这样做是为了提高性能。 #search-results包含成千上万个<div>，其中每个元素都有十几个元素。这样，在先前的选择器已经杀死了几千行之后，最后执行模糊搜索（即，与:contains匹配的宽松文本）。另外，此特定代码摘自我正在编写的Greasemonkey用户脚本，因此我没有选择直接从源代码服务器端删除这些虚假结果的选项-这不是我的服务器/网站]}

Answer 1

基本封装将完美地做到这一点：

function removeStuff(selector) {
  return $(selector)
    .closest('.row')
    .closest('div')
    .remove();
}

从@Heretic Monkey的已删除评论中导出。

Answer 2

通过使用一个简单的插件，您可以像.bye()

一样使用它

(function ( $ ) {
  $.fn.bye = function() {
    $(this).remove();
    //$(this).closest('.row').closest('div').remove();
  }
}( jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>click</button>


<script>
  $(document).ready(function(){
     $('button').bye();
  });
</script>

如何在jQuery中保持DRY？

2 个答案: