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

【问题标题】：How to override on .val() of a jQuery plugin?如何覆盖 jQuery 插件的 .val()？
【发布时间】：2021-01-06 13:01:00
【问题描述】：

如何覆盖 val() 方法，而不是全部覆盖，而是覆盖那些由我的插件返回的方法，例如查看以下示例：

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

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

})(jQuery);

我希望$("#some-id").switch().val() 返回10，而它似乎不起作用。我不想使用$.fn.val 覆盖整个对象。我应该如何做到这一点？

【问题讨论】：

这似乎是一件非常违反直觉的事情，因为任何使用 jQuery 的人都非常熟悉默认的 val() 行为，仅针对特定元素更改它可能会导致混淆

标签： jquery jquery-plugins

【解决方案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>

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

【讨论】：