Лучшие практики разработки плагинов, чтобы избежать загрязнения пространства имен jQuery? - PullRequest
Новая
       6

Лучшие практики разработки плагинов, чтобы избежать загрязнения пространства имен jQuery?

3 голосов
/ 01 декабря 2009

Я создал плагин jQuery, который позволяет пользователю взаимодействовать с деревом (создание, обновление, удаление узлов). Существует как минимум десяток способов взаимодействия с деревом. В идеале я не хочу загрязнять пространство имен jQuery всеми этими древовидными методами, как я делаю сейчас, поскольку каждый из этих методов предоставляет дополнительную возможность для столкновения пространства имен. Я просто хочу один метод для активации самого плагина, и поэтому я ищу рефакторинг. 

$('ol#tree').tree(options) // just a single jQuery method for my plugin is fine…
$('li#item4').moveNode('li#item6') // …however, we also have this supporting method
$('ol#tree').appendNode(node) // …and this one
$('li#item2').expandBranch() // …and this one, etc.

Каковы некоторые способы предоставления интерфейса активированному элементу DOM и его подэлементам, которые не загрязняют пространство имен jQuery?

Я играл с сохранением объекта jQuery, который возвращается при создании дерева. 

var tree =  $('ol#tree').tree();

Этот объект дерева сам по себе будет расширен для включения методов. К сожалению, поскольку само дерево регулярно обрабатывается, возникает риск того, что состояние этого объекта не будет синхронизировано с состоянием родительского элемента DOM и его подэлементов. Я не уверен, что пытаться поддерживать состояние в этом объекте стоит, так как сам DOM всегда будет иметь текущее состояние.

Я также рассмотрел вопрос об использовании пространства имен (через плагин Space Джона Резига ): 

$('ol#tree').tree()
$('ol#tree').tree.appendNode(node)
$('ol#tree').tree.item('li#item2').expandBranch()

Как вы справляетесь с этой проблемой? Не могли бы вы указать мне некоторые существующие плагины, которые решают эту проблему, из чьего кода я мог бы узнать?

Ответы [ 2 ]

2 голосов
/ 01 декабря 2009

Используйте короткое и четкое имя! Не скучное дерево , а, например, nicetree (Эй, это всего лишь идея)! Поместите интерфейс в имя. Как это: 

$("ol#tree").nicetree.appendNode(node);
$("ol#tree").nicetree.item("li#item2").expandBranch();

Другая идея - это объект, который возвращается, как вы предложили, но не обновляйте этот объект. Этот объект является только ссылкой на реальный объект или DOM. Это добавляет слой косвенности, и это может или не может быть приемлемым для вас.

Я, как пользователь плагина, хотел бы оба решения, но немного предпочел первое.

0 голосов
/ 02 декабря 2009

Вот то, что я придумал, так как я спросил: 

MarioWare = {
  Tree: {
    Methods: {
      nodes: function(){
        var selected = null;
        var context = this[0];
        if (selector === undefined) // tree.nodes();
          selected = $('li', context);
        else if (typeof selector == 'string') // tree.nodes('li:first,li:last');
          selected = $(selector, context);
        else if (typeof selector == 'number') // tree.nodes(2);
          selected = $('li', context).eq(selector);
        return MarioWare.$node(selected);
      },
      appendNode: function(){...}
    }
  },
  $tree: function(selector){
    return $.extend($(selector), MarioWare.Tree.Methods);
  },
  Node: {
    Methods: {
      select: function(multiSelect) {...}
    }
  },
  $node: function(selector){
    return $.extend($(selector), MarioWare.Node.Methods);
  }
}

Таким образом, он работает как некоторые из служебных методов, найденных в Prototype.js: 

var $tree = MarioWare.$tree; //shortcut
var $node = MarioWare.$node; //shortcut
var tree = $tree('ul:first');
var nodes = tree.nodes();
nodes.eq(0).select();

Для него всегда требуется средство доступа к утилите (например, $ tree, $ node), но оно предотвращает загрязнение пространства имен jQuery. Мне нравится, что метод доступа проясняет контекст того, с чем мы работаем - например, дерево или узел.

...