在过去的几个月中，我一直在编写一个名为Better Better Complete（Github上的代码）的jQuery插件。它起源于另一个项目，一个叫做Linkit的Drupal模块，但是我决定应该是一个独立的插件。我花了很多时间来重构代码，主要是为了使其具有更多用途而更加通用和灵活。现在，我已经达到了真正可以在代码上寻求建议的地步，希望由经验丰富的专业JavaScript开发人员来解决。

编辑：我在FAQ中读到了我应该包括的内容一些代码。这是代码的简短版本，描述了代码的结构。也有可用的文档。

(function ($) {

$.fn.betterAutocomplete = function(method) {

  var methods = {
    init: function(resource, options, callbacks) {
      var $input = $(this),
        bac = new BetterAutocomplete($input, resource, options, callbacks);
      $input.data('better-autocomplete', bac);
      bac.enable();
    },
    enable: function(bac) {
      bac.enable();
    },
    disable: function(bac) {
      bac.disable();
    },
    destroy: function(bac) {
      bac.destroy();
    }
  };

  var args = Array.prototype.slice.call(arguments, 1);

  // Method calling logic
  this.filter(':input[type=text]').each(function() {
    switch (method) {
        // ... Code here
    }
  });

  // Maintain chainability
  return this;
};

// This is the constructor function. Instantiated by using the new keyword
var BetterAutocomplete = function($input, resource, options, callbacks) {

  options = $.extend({
    charLimit: 3,
    // More options
  }, options);

  /**
   * These callbacks are supposed to be overridden by you when you need
   * customization of the default behavior. When you are overriding a callback
   * function, it is a good idea to copy the source code from the default
   * callback function, as a skeleton.
   */
  callbacks = $.extend({

    /**
     * Gets fired when the user selects a result by clicking or using the
     * keyboard to select an element.
     *
     * <br /><br /><em>Default behavior: Simply blurs the input field.</em>
     *
     * @param {Object} result
     *   The result object that was selected.
     */
    select: function(result) {
      $input.blur();
    },
    // ... More callbacks for fetching data, parsing results etc.
  }

  var self = this,
    lastRenderedQuery = '',
    results = {}, // Caching database of search results.
    // ... More private instance variables

  // Create the DOM elements necessary and attach eventhandlers
  var $wrapper = $('<div />')
      .addClass('better-autocomplete')
      .insertAfter($input);

  // Public methods
  this.enable = function() { ... };

  // Then private methods
  var fetchResults = function() { ... };

  var getHighlighted = function() { ... };
};

}(jQuery);


一些实际问题：


我的设计模式看起来不错吗？我正在谈论模块化，命名空间，闭包等。
如何从jQuery UI自动完成功能和其他现有插件中脱颖而出？我可以提供他们不能提供的东西？另外，在哪里可以找到需要此插件的人？
文档。我一直在使用JSDoc工具包，但有时很难理解。生成文档时，我有一些警告。另外，我不确定我是否正确标记了函数，构造函数等。是否可以改进它？ br />

评论

首先：我不能帮助JSDoc，而且我不是一个非常有经验的jQuery插件开发人员，但是在＃2上，我认为您应该问插件的用户。提供电子邮件/讨论区/任何知道他们需要什么的人。也许问他们一些具体的问题，例如他们做了什么扩展您的插件等。
我不想对您已完成的工作施加压力，但我认为您的辛勤工作最好是帮助一个已建立的项目变得更好，而不是开始一个新的分支。只是我的$ 0.02

#1 楼

呈现接口时，您应该强烈考虑使用诸如Handlebars.js之类的JS模板语言。

  // Add the group if it doesn't exist
  var group = callbacks.getGroup(result);
  if ($.type(group) == 'string' && !groups[group]) {
    var $groupHeading = $('<li />').addClass('group')
      .append($('<h3 />').html(group))
      .appendTo($results);
    groups[group] = $groupHeading;
  }

  var $result = $('<li />').addClass('result')
    .append(output)
    .data('result', result) // Store the result object on this DOM element
    .addClass(result.addClass);


您正在做足够的dom操作以保证其使用（上面只是代码的一部分）。此外，模板还可以帮助您将表示逻辑与业务逻辑分离开来。目前，业务逻辑还很复杂。