如何覆盖 jQuery 插件的 .val()？

Question

我如何重写 val() 方法，而不是全部重写，而是重写我的插件 return 的那些方法，例如查看以下示例：

(function ($) {
    $.fn.switch = function (action, options) {
        var settings = $.extend({
        }, options);

        return this.each(function () {
            $this.val = function(){
              return 10;
          }
        });
    };

})(jQuery);

我希望 $("#some-id").switch().val() returns 10 虽然它似乎不起作用。我不想使用 $.fn.val 覆盖整个对象。我该如何实现？

Answer 1

一个选项是将插件元素的 data 设置为表明它是插件元素的东西，然后更改 $.fn.val 以在调用它的元素是插件时调用您的自定义逻辑元素：

(function($) {
  $.fn.switch = function(action, options) {
    var settings = $.extend({}, options);

    this.each(function() {
      $(this).data('plugin-element', true);
    });
  };
  const origVal = $.fn.val;
  $.fn.val = function(newVal) {
    if (newVal) {
      return origVal.call(this, newVal);
    }
    return $(this).data('plugin-element')
      ? 10
      : origVal.call(this);
  }

})(jQuery);

$('div').switch();
console.log($('div').val());
console.log($('input').val());
$('input').val(33);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<input value=55>

虽然这是可能的，但这是一件非常奇怪的事情，并且使代码库更加脆弱。考虑是否有更优雅的方式来完成您的 objective.

如何覆盖 jQuery 插件的 .val()？

How to override on .val() of a jQuery plugin?

jquery

jquery-plugins