高级 jQuery-6

look_w

名称空间可能处理这种类型的设计和 jQuery 的最难解方面是理解名称空间。这个例子很好，因为它以一种很直观的方式展示了该问题。知道页面上的所有 ID 和类时，编写 jQuery 代码是非常简单的。这就是 jQuery 的设计目标。当您不知道页面上有几个类时，或这些类开始重复时，会发生什么呢？在这个例子中，您可以直接看到问题，有两个完全相同的小部件！所有东西都是重复的。这似乎是不考虑名称空间引起的问题；您的小部件开始彼此干扰，最终导致不能正常工作。
图 4. 忽略名称空间带来的问题造成这个问题的原因是您仅调用 $(".percentTotal") 等，而忽略了应该同步哪个小部件。因为相同的页面上有多个表，因此该页面就有 percentTotal 类的多个实例。当然，如果页面上仅有一个表，那么您就可以确定它是唯一的。但是随着页面更加高级，以及组件的重用越来越多，这种一个表的假设就不再成立。有些人会问，“在这里使用 ID 不行吗？” 这不能解决问题：您打算给它什么 ID？您不可以使用 “percentTotal”，因为这会带来歧义。也不可以使用 “percentTotal-1”，因为它不表示页面上的任何东西。（以上数字毕竟是任意创建的）。您可以向页面包含的表添加一些引用来解决问题，比如 “percentTotal-percentSort1”，但这会让问题更加复杂。jQuery 有一个超级复杂但又十分容易使用的选择语法，从而让这种混合命名模式变得毫无必要。为什么要重新创造已有的东西呢？让我们使用 jQuery 的选择引擎帮助您解决名称空间问题。
这个小部件的核心问题是决定操作发生在哪个小部件中。当向文本框输入数字时，您可以问自己，jQuery 如何知道进入哪个文本框？您在代码中的 “百分比” 类添加了一个事件，并且可以在代码内部使用 $(this) 引用它。这将我们带入下一个问题：jQuery 如何知道问题发生在哪个小部件中，从而使您能够更新正确的 percentTotal 字段？我认为这不是一件简单的事情。这确实不简单。尽管您的代码能够向页面上带有 “百分比” 类的每个文本框添加一个事件，但如果忽略了发生事件的小部件就是不妥当的。
这个问题被归结为名称空间问题的原因是，小部件的命名不清晰，容易导致问题。要使 jQuery 代码正常工作，每个名称都必须在其自己的空间之内明确定义，这就出现了术语名称空间。您必须避免编写重名的代码，实现每个小部件都是自含的。您必须能够在相同的页面上添加相同小部件的多个实例，同时避免名称重复。最重要的是，每个小部件在页面上都是独立的。
没有能够处理名称空间问题的现成方法，因此我将展示我的解决办法，您可以在自己的代码中使用我的办法，或通过了解问题创建更好的解决办法。我喜欢该代码的原因是它简单易用（只有 1 行），并且能够让您在某种程度上控制自己的名称空间。看看清单 10。            
清单 10. 名称空间解决办法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// our event is attached to EVERY input text field with a CLASS of "percent" // this makes our code look good, but can lead to namespace issues $("table.percentSort input.percent").keyup(function(){    // this simple line can establish a namespace for us, by getting the unique    // ID attached to our table (the table is considered the "container" for    // our widget.  It could be anything, depending on your specific code.)    // We pass the CLASS of our widget to the parents() function, because    // that effectively encapsulates the widget    var NAMESPACE = "#" + $(this).parents("table.percentSort").attr("id");    // with the namespace established, we can use the jQuery selection    // syntax to use this namespace as our prefix for all of our remaining    // searches.  Notice how the ambiguity is removed for our search    // by CLASS of "percent" and "percentTotal"    // This solves our namespace issues    var sum = $(NAMESPACE + " input.percent").sum();    var totalField = $(NAMESPACE + " .percentTotal");

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