自定义jQuery插件中jQuery插件的位置

Question

我有一个基于此样板的小插件。

一切工作正常，但希望专注于在插件中放置一种小的“辅助”功能。 这是代码段。

 (function ($, window, document, undefined) { var pluginName = 'test', defaults = {}; function Plugin(element, options) { this.element = element; this.options = $.extend({}, defaults, options); this.init(); } Plugin.prototype = { init: function() { $(this.element).find(':input').each(function() { $(this).setValue('value'); }); } }; $.fn.setValue = function(value) { var $el = $(this); if ($el.prop('type') == 'checkbox') { $el.prop('checked', true); } else { $el.val(value); } }; $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin( this, options )); } }); }; })(jQuery, window, document); $('#apply-test').click(function(e) { e.preventDefault(); $('#test').test(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container mt-5"> <form id="test"> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" id="name" class="form-control"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" name="email" id="email" class="form-control"> </div> <div class="form-group"> <div class="form-check"> <input type="checkbox" name="notifications" id="notifications" class="form-check-input"> <label for="notifications" class="form-check-label"> Receive Notifications </label> </div> </div> <div class="form-group"> <button type="submit" id="apply-test" class="btn btn-primary">Apply Test</button> </div> </form> </div> 

在插件中，您会注意到另一个功能，例如：

$.fn.setValue = function(value) {
    var $el = $(this);
    if ($el.prop('type') == 'checkbox') {
        $el.prop('checked', true);
    } else {
        $el.val(value);
    }
};

现在，我可以将该代码放置在该插件内部或外部的任何位置，并且效果很好。 另外，我之所以使用这样的函数，是为了在以与使用标准$(el).val()几乎相同的方式设置表单元素值时可以轻松使用它。

我的问题如下：

• 是否可以通过某种方式进行设置，以使该功能为私有功能？
• 如果不是，是否像摆在小提琴一样将其放置在函数内部，是添加这样的小助手函数的一种好方法？
• 还是有其他建议的方法？
• 也许像这样的助手应该只是他们自己的独立插件？ （这里可能只是一个偏爱的东西）

Answer 1

问题在于，一旦执行$.fn.setValue = function … ，就可以从应用程序中的任何地方调用setValue函数（使用$('randomSelector').setValue() ），这可能不是您的意图。

要使setValue函数只能从插件内部访问，可以使其行为取决于提供的参数：

(function ($, window, document) {
    // …
// Make setValue only accessible through the plugin
    function setValue = function(value) {
      if (this.prop('type') == 'checkbox') {
        this.prop('checked', true);
      } else {
        this.val(value);
      }
    };

    $.fn[pluginName] = function(options, more) {
// Test arguments and call setValue when appropriate
      if (options === 'set') {
        // Apply setValue on the current jquery Collection
        setValue.apply(this, more);
        // Make your plugin "chainable"
        return this;

      // Eventually handle other scenarios
      } else /* if (…) */ { ; }

      // Your default plugin behavior
      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          $.data(this, "plugin_" + pluginName,
            new Plugin(this, options));
        }
      });
    };

})(jQuery, window, document);

然后您以这种方式调用插件：

$('#apply-test').click(function(e) {
  e.preventDefault();
  // Call setValue
  $('#test').test('set', 1);
  // Standard call
  $('#test').test();
});

旁注：在插件函数$.fn.xxx = function() {/*here*/} ， this指向触发插件函数调用的jquery集合。 所以var $el = $(this); 在这种情况下是没有用的（只会增加开销），只需使用this或最终使用this.eq(0)或this.each(…) 。