如何将自定义函数称为jQuery函数链的一部分

Question

这似乎是一件直截了当的事情，但是我找不到 jquery 来处理此操作。

例如，

$('div').show().sayHi()
function sayHi(obj) {
    obj.html('hi')
}

sayHi()不是 jQuery 函数，因此在此上下文中无法调用它。您需要称其为：

var $div = $('div').show()
sayHi($div)

，但我希望它作为链的一部分，主要是因为它看起来更好。

解决方案：

BARMAR回答这个特定问题，但我的实现是一个更可重复使用的选择，如下所示。

Answer 1

您可以通过将其定义为$.fn的属性来添加自己的jQuery方法。因此您可以写：

$.fn.sayHi = function() {
  this.html('Hi');
  return this;
}
$("#click").click(function() {
  $("#foo").show().sayHi();
});

#foo {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">Click me</button><br>
<div id="foo"></div>

通过惯例，不返回与对象相关的信息的jQuery方法应返回this，以便可以继续链接它们。

Answer 2

您在要求的内容中误会了。通过语法，obj.foo().bar()表示：在OBJ上致电FOO。现在，以此为呼叫栏的返回值。您可能在JavaScript中看到这种事情的地方是JQuery的承诺模式。通过一种方法来实例化呼叫对象，并可以通过完成/然后/失败方法与其他方法链。通常在延迟（延迟）执行时使用，但可以是一种很好的方式，通常以扩展行为（超时，重试等）扩展某些类型的操作。

谨慎使用。大多数情况都不呼吁，除非您将事情封装得很好，否则您的DEV同伴也不会理解您在做什么。

创建一个自定义 jQuery 函数，该函数接受要调用的函数并调用它。返回此将允许在自定义功能之后进一步进行链接。

此解决方案使用Function.prototype.apply()允许传递任意数量的参数。（添加了Barmar的建议。）

$.fn.custom = function(f) {
  var fnToCall = f; //array shift below makes our param undefined
  [].shift.apply(arguments); //first param is the function, which don't want to pass 
  return fnToCall.apply(this, arguments);
}
$('#btnRun').click( () => {
  $('div').empty()
          .custom(sayHi, "test", "ing")
          .custom(sayHi, ' ', 'a', ' ', 'lot ')
          .custom(sayHi, 'of', ' params ')
})
function sayHi(...args) {
    var $obj = $(this)
    $obj.html($obj.html().concat(...args))
    return this
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btnRun'>Test </button>
<div>
</div>

这是我最终实现的解决方案，因为我想要可重复使用的函数。它没有完全回答这个问题，这就是为什么它没有标记为答案。