Писать лучше на jQuery автозаполнения


За последние месяцы я пишу jQuery плагин называется лучше автозаполнения (код на GitHub). Он возник из другого проекта, модуль 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);

Некоторые руки на вопросы:

  1. Мой дизайн модели хорошо выглядеть? Я говорю о модульности, пространства имен, замыкания и др.
  2. Как я могу выделиться больше с jQuery пользовательского интерфейса автозаполнения и другие существующие плагины? Что я могу представить, что они не могут? Также, где я могу добраться до людей, которым нужен этот плагин?
  3. Документации. Я использую инструментарий JSDoc, но это иногда трудно понять. У меня есть несколько предупреждений, когда я генерировать документы. Также я не понимаю, если я правильно помечены функции, конструкторы и т. д. Я могу улучшить его?

Я могу воспринимать критику, поэтому не стесняйтесь, а быть честным.



5504
21
задан 20 июня 2011 в 03:06 Источник Поделиться
Комментарии
1 ответ

Вы должны серьезно рассмотреть использование на JS язык шаблонов, таких как Handlebars.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, чтобы оправдать его использование (выше только одна часть кода). Кроме того, шаблоны поможет отделить логику представления от бизнес-логики, которая в настоящий момент довольно запутанная.

5
ответ дан 14 июня 2012 в 06:06 Источник Поделиться