Question

我有一个庞大的应用程序，其中addClass和removeClass jquery 正在代码中的许多地方使用。我想根据正在添加/删除的类来对要改变的类的元素执行一些工作。更长的路线是在addClass和removeClass之后在应用程序的任何地方添加我的代码片段，但我在想如果我能以某种方式覆盖这些jquery的函数，那么我的生活会更容易。我试过下面的代码。

var oAddClass = jQuery.fn.addClass;
jQuery.fn.addClass = function (arg) {
    alert(this);
    alert(arg);

    // Now go back to jQuery's original size()
    return oAddClass.apply(this, arg);
};

但是得到错误＆＃34; Function.prototype.apply：参数不是对象＆＃34;在return oAddClass.apply(this, arg);

有人可以帮我解决问题。

Answer 1

您试图将包装函数中的第一个参数传递给.apply()，但.apply()的第二个参数应该是一个数组。您可以从arguments对象创建一个数组：

  var args = [];
  for (var i = 0; i < arguments.length; ++i) args[i] = arguments[i];
  oAddClass.apply(this, args);

arguments对象是每个函数中由运行时初始化的特殊对象。处理它是一件棘手的事情，它可能导致代码优化问题，但上面的简单使用是安全的。

Answer 2

.apply的第二个参数必须是类似数组的对象。

return oAddClass.apply(this, arguments);

Answer 3

出于可维护性的原因，我建议不要这样做：如果另一个开发人员查看代码并看到jQuery .addClass，那么除非删除该类，否则它会非常混乱。

我只想用自己的规则编写一个辅助函数，调用addClass和/或removeClass。

Answer 4

鉴于jQuery.addClass被记录为接收单个参数，我认为应该使用.call而不是.apply

虽然食物：jQuery没有记录其内部自用模式，因此您永远不知道何时将调用替换的addClass方法（例如下面的切换类）。

(function () {
  var oAddClass = jQuery.fn.addClass;
  jQuery.fn.addClass = function(arg) {
    return oAddClass.call(this, arg);
  };
}());

$('#foo').addClass('foo bar');

$('span').addClass(function(index) {
  if (index == 0) {
    return 'bar';
  }
  return 'foo';
});

$('button').on('click', function () {
    $('#foo').toggleClass('foo');
});

.foo {
  background-color: green;
}
.bar {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">Hello World</div>
<span>Span 1</span>
<br />
<span>Span 2</span>
<br />
<button>Toggle .foo on the div</button>

覆盖Jquery的功能

4 个答案: