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

关键词：

【中文标题】避免污染 jQuery 命名空间的最佳插件开发实践？【英文标题】：Best plugin development practices to avoid polluting jQuery namespace? 【发布时间】：2010-12-22 02:02:32 【问题描述】：

我创建了一个 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.

在不污染 jQuery 命名空间的情况下，将接口暴露给已激活的 DOM 元素及其子元素有哪些做法？

我玩过保存创建树时返回的 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()

你如何处理这个问题？你能指出一些现有的插件来解决这个问题，我可以从他们的代码中学习吗？

【问题讨论】：

【参考方案1】：

使用简短明了的名称！不是无聊的tree，而是例如nicetree（嘿，这只是一个想法）！将接口放入名称中。像这样：

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

另一个想法是按照您的提议返回的对象，但不要更新此对象。该对象只是对真实对象或 DOM 的引用。这增加了一层间接性，您可能会接受也可能不会接受。

作为插件用户，我喜欢这两种解决方案，但更喜欢第一种。

【讨论】：

我见过这种方法并且喜欢它。但是，正如我输入的答案所示，我已经解决了一些问题。 appendNode() 或 item() 方法如何引用包含选定元素的 jQuery 对象（在本例中为 $("ol#tree")）？似乎它遇到的问题是，这些函数中的“this”并没有带你回到足够远的地方找到 jQuery 对象，只是 nicetree 对象，它是一个从 jQuery 原型创建的静态对象。【参考方案2】：

这是我提出的问题：

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 命名空间被污染。我喜欢访问器阐明我们正在使用的内容的上下文——例如树或节点。

【讨论】：

为此，所有返回值都必须使用适当的实用方法重新包装结果。例如“select”将返回“$node(result)”。我还必须重写基本的 jQuery 函数（如“eq”）以返回包装的结果。啊!有点笨拙——但它有效。

C++ 仅头文件库避免“使用命名空间”污染

】C++仅头文件库避免“使用命名空间”污染【英文标题】：C++header-onlylibraryavoid"usingnamespace"pollution【发布时间】：2015-05-2321:19:51【问题描述】：我有一个带有多个命名空间的仅标头C++库。例如一个头文件可能包含//header1.h... 查看详情

枚举类型的命名空间 - 最佳实践

】枚举类型的命名空间-最佳实践【英文标题】：namespacesforenumtypes-bestpractices【发布时间】：2010-10-0317:20:07【问题描述】：通常，需要同时使用多个枚举类型。有时，一个人有一个名字冲突。想到了两个解决方案：使用命名空间... 查看详情

XSLT 将命名空间前缀添加到元素最佳实践

】XSLT将命名空间前缀添加到元素最佳实践【英文标题】：XSLTAddnamespaceprefixtoelementbestpractice【发布时间】：2014-04-1708:33:00【问题描述】：出于验证目的，我需要为我的转换结果文件的每个元素添加命名空间前缀。我在下面写了转... 查看详情

最佳实践：C# 扩展方法命名空间和推广扩展方法

】最佳实践：C#扩展方法命名空间和推广扩展方法【英文标题】：Bestpractices:C#Extensionmethodsnamespaceandpromotingextensionmethods【发布时间】：2010-11-1614:32:52【问题描述】：我知道已经存在一个post，描述几乎相同，但我认为我的有点不同... 查看详情

web前端开发最佳实践系列javascript篇

一、养成良好的编码习惯，提高可维护性1、避免定义全局变量和函数，解决全局变量而导致的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上，使其变成对象的属性：1varmyCurrentAction={2length:0,3init:function(){},... 查看详情

用于 jQuery 选择器的 CSS 类命名的最佳实践

】用于jQuery选择器的CSS类命名的最佳实践【英文标题】：BestpracticeforCSSclassnamingforusewithjQueryselectors【发布时间】：2011-08-0616:00:23【问题描述】：在构建重Javascript的Web应用程序时，命名CSS类以保持Javascript代码和CSS样式表整洁以及U... 查看详情

Django 管理员 - jQuery 命名空间

...ry插件。Django管理员将jQuery命名空间设置为django.jQuery（以避免冲突）如果我没有jQuery的默认$命名空间，插件将无法工作，对吗？我必须做类似的事情window.$=django.jQ 查看详情

智能合约最佳实践之solidity编码规范

...望可以帮助大家写出更好规范的智能合约。##命名规范###避免使用小写的l，大写的I，大写的O应该避免在命名中单独出现，因为很容易产生混淆。###合约、库、事件、枚举及结构体命名合约、库、事件及结构体命名应该使用单词... 查看详情

智能合约最佳实践之solidity编码规范(代码片段)

...，希望可以帮助大家写出更好规范的智能合约。命名规范避免使用小写的l，大写的I，大写的O应该避免在命名中单独出现，因为很容易产生混淆。合约、库、事件、枚举及结构体命名合约、库、事件及结构体命名应该使用单词首... 查看详情

如何避免javascript命名空间冲突？

】如何避免javascript命名空间冲突？【英文标题】：Howtoavoidjavascriptnamespaceconflict?【发布时间】：2013-03-1723:50:41【问题描述】：我有一个企业应用程序，它在全局命名空间中导入了一些带有一些函数的java脚本库（比如说A）。我们... 查看详情

jQuery 插件模板 - 最佳实践、约定、性能和内存影响

】jQuery插件模板-最佳实践、约定、性能和内存影响【英文标题】：jQueryplugintemplate-bestpractice,convention,performanceandmemoryimpact【发布时间】：2011-08-2405:23:17【问题描述】：我已经开始编写一些jQuery插件，并认为使用jQuery插件模板设置... 查看详情

索引最佳实践

...以及collation定义不当导致，因此我们在设计开发阶段，要避免数据库字段定义，避免出现隐式转换。由于MySQL不支持函数索引，在开发时要避免在查询条件加入函数，例如date(gmt_create)。所有上线的SQL都要经过严格的审核 查看详情

artifactory仓库架构和命名最佳实践（上）

背景为公司设计正确的仓库命名规范是至关重要的。为产品开发创建正确的仓库结构，在产品扩展性方面发挥着至关重要的作用。它不仅可以减少创建管理仓库的开销，还可帮助团队意识到仓库规范管理的好处，帮助组织内部各... 查看详情

asp.net mvc 开发人员的 javascript 最佳实践

...好地管理javascript的实际示例。在使用jQuery之前，我尽量避免使用javascript。现在我经常使用它，但我觉得我可能 查看详情

如何在不污染全局命名空间的情况下公开 javascript 对象以进行单元测试

】如何在不污染全局命名空间的情况下公开javascript对象以进行单元测试【英文标题】：Howtoexposejavascriptobjectsforunittestingwithoutpollutingtheglobalnamespace【发布时间】：2012-01-2401:46:48【问题描述】：我有一个javascript自动完成插件，它使... 查看详情

Kubernetes 集群最佳实践

...PROD。最推荐的是，创建多个集群或创建一个大集群，按命名空间分隔环境。【问题讨论】：【参考方案1】：您是要拥有一个prod集群还是多个prod集群？需要考虑的一件事是更新集群管理软件（到新的k 查看详情

jQuery 优化/最佳实践

...在浏览我的一些旧代码，我想知道最佳实践和优化。为了避免在主观车道上骑行，我将发布一些示例，其中包含一些希望易于回答的问题。我将尽量使示例保持简单，以便于回答并减少出错的可能性。我们开始：1)赋值与jQuery调... 查看详情

开发jquery插件(转)

 阅读目录基本方法支持链式调用让插件接收参数面向对象的插件开发关于命名空间关于变量定义及命名压缩的好处工具GitHubServiceHook原文：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html要说jQuery最成功的地方，我认为是它的可... 查看详情