代码之家 › 专栏 › 技术社区 › Mario Narcis Radoi

避免污染jquery命名空间的最佳插件开发实践?

namespaces jquery-plugins jquery

Mario Narcis Radoi · 技术社区 · 16 年前

我已经创建了一个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本身将始终具有当前状态。

我还考虑过使用名称空间(通过john resig Space plugin ):

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

你怎么处理这个问题?你能告诉我一些现有的插件,解决这个问题,从谁的代码我可以学习?

2 回复 | 直到 15 年前

nalply Gagan 16 年前

用一个简洁明了的名字!不是无聊树 ,但例如 镍镉合金 (嘿,这只是个主意)!将接口放入名称中。这样地:

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

另一个想法是按照您的建议返回的对象,但不要更新此对象。此对象只是对真实对象或dom的引用。这会添加一层间接寻址,您可能会接受,也可能不会接受。

作为一个插件用户,我希望这两个解决方案,但更喜欢第一个稍微。

Mario Narcis Radoi 16 年前

以下是我问起这件事后想到的:

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名称空间受到污染。我喜欢访问器澄清我们正在处理的内容的上下文——例如树或节点。