jQuery高级应用：优化Web应用程序的最后绝招(5)

名称空间

可能处理这种类型的设计和jQuery的最难解方面是理解名称空间。这个例子很好，因为它以一种很直观的方式展示了该问题。知道页面上的所有ID和类时，编写jQuery代码是非常简单的。这就是jQuery的设计目标。当您不知道页面上有几个类时，或这些类开始重复时，会发生什么呢？在这个例子中，您可以直接看到问题，有两个完全相同的小部件！所有东西都是重复的。这似乎是不考虑名称空间引起的问题；您的小部件开始彼此干扰，最终导致不能正常工作。

造成这个问题的原因是您仅调用$(".percentTotal")等，而忽略了应该同步哪个小部件。因为相同的页面上有多个表，因此该页面就有percentTotal类的多个实例。当然，如果页面上仅有一个表，那么您就可以确定它是唯一的。但是随着页面更加高级，以及组件的重用越来越多，这种一个表的假设就不再成立。有些人会问，“在这里使用ID不行吗？”这不能解决问题：您打算给它什么ID？您不可以使用“percentTotal”，因为这会带来歧义。

也不可以使用“percentTotal-1”，因为它不表示页面上的任何东西。（以上数字毕竟是任意创建的）。您可以向页面包含的表添加一些引用来解决问题，比如“percentTotal-percentSort1”，但这会让问题更加复杂。jQuery有一个超级复杂但又十分容易使用的选择语法，从而让这种混合命名模式变得毫无必要。为什么要重新创造已有的东西呢？让我们使用jQuery的选择引擎帮助您解决名称空间问题。

这个小部件的核心问题是决定操作发生在哪个小部件中。当向文本框输入数字时，您可以问自己，jQuery如何知道进入哪个文本框？您在代码中的“百分比”类添加了一个事件，并且可以在代码内部使用$(this)引用它。这将我们带入下一个问题：jQuery如何知道问题发生在哪个小部件中，从而使您能够更新正确的percentTotal字段？我认为这不是一件简单的事情。这确实不简单。尽管您的代码能够向页面上带有“百分比”类的每个文本框添加一个事件，但如果忽略了发生事件的小部件就是不妥当的。

这个问题被归结为名称空间问题的原因是，小部件的命名不清晰，容易导致问题。要使jQuery代码正常工作，每个名称都必须在其自己的空间之内明确定义，这就出现了术语名称空间。您必须避免编写重名的代码，实现每个小部件都是自含的。您必须能够在相同的页面上添加相同小部件的多个实例，同时避免名称重复。最重要的是，每个小部件在页面上都是独立的。

没有能够处理名称空间问题的现成方法，因此我将展示我的解决办法，您可以在自己的代码中使用我的办法，或通过了解问题创建更好的解决办法。我喜欢该代码的原因是它简单易用（只有1行），并且能够让您在某种程度上控制自己的名称空间。看看清单10。

 
 
//oureventisattachedtoEVERYinputtextfieldwithaCLASSof"percent"  
//thismakesourcodelookgood,butcanleadtonamespaceissues  
$("table.percentSortinput.percent").keyup(function(){  
 
//thissimplelinecanestablishanamespaceforus,bygettingtheunique  
//IDattachedtoourtable(thetableisconsideredthe"container"for  
//ourwidget.Itcouldbeanything,dependingonyourspecificcode.)  
//WepasstheCLASSofourwidgettotheparents()function,because  
//thateffectivelyencapsulatesthewidget  
 
varNAMESPACE="#"+$(this).parents("table.percentSort").attr("id");  
 
//withthenamespaceestablished,wecanusethejQueryselection  
//syntaxtousethisnamespaceasourprefixforallofourremaining  
//searches.Noticehowtheambiguityisremovedforoursearch  
//byCLASSof"percent"and"percentTotal"  
//Thissolvesournamespaceissues  
 
varsum=$(NAMESPACE+"input.percent").sum();  
vartotalField=$(NAMESPACE+".percentTotal"); 

因此，仅需添加一行代码，您就能够封装小部件，从而避免它的函数与自身的其他实例重复（或者甚至是其他碰巧对ID或类使用相同名称的小部件）。这种类型的代码编写方式在插件代码中很常见。编写良好的插件应该考虑到名称空间问题，而糟糕的插件忽略了这个问题。从这个例子中可以看到，在代码中使用名称空间也是很简单的，并且随着页面越来越复杂，它可以给您节省大量时间。鉴于这个原因，我建议您现在就开始考虑jQuery代码中的名称空间问题，并在编写代码时使用这种解决办法。

记住：开始编写jQuery代码时，一般就要开始包含名称空间解决办法。您可以使用以上的解决办法，或创建自己的解决办法。通过采用名称空间解决办法，即使代码越来越复杂，也不会带来名称重复问题。