复合组件最佳实践（4）

look_w

使用 JavaScript 闭包 当您实现复合组件时，您必须在一个页面上提供多个组件。当一个组件的所有实例共享同一个 JavaScript 时，您必须小心操作用户目前正在与之交互的那个组件。
您可以用几种方法在一个页面上支持多个组件。一个方法（Oracle 工程师 Jim Driscoll 在其博客上关于一个类似可编辑输入组件所讨论的）是维护组件 ID 的名称空间（见 参考资料），另一个方法是使用 JavaScript 闭包：

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

com.clarity = {    init: function (ccid) {       var mydiv = document.getElementById(ccid);       mydiv.editButton = $(mydiv.id + ':editButton');       mydiv.text = $(mydiv.id + ':text');       mydiv.editableText = $(mydiv.id + ':editableText');       mydiv.doneButton = $(mydiv.id + ':doneButton');       mydiv.doneButton.offsetLeft = mydiv.editButton.offsetLeft;                 mydiv.editButton.startEditing = function() {         mydiv.text.fade( { duration: 0.25 } );         mydiv.editButton.fade( { duration: 0.25 } );             window.setTimeout( function() {            mydiv.editableText.appear( { duration: 0.25 } );            mydiv.doneButton.appear( { duration: 0.25 } );                 window.setTimeout( function() {                mydiv.editableText.focus();             }, 300);          }, 300);       };    },

这是用于可编辑输入组件的 JavaScript， 中显示一个整体。init() 函数被每个可编辑输入组件所调用，正如您在  的底部所看到的。给定组件封装的 DIV 客户端标识符，我得到该特定 DIV 的一个引用。因为 JavaScript 是一个动态语言，允许您在运行时向对象添加属性和方法，我向 DIV 中添加了对回调函数中所需的所有元素的引用。
我也向组件的 edit 按钮添加了一个 startEditing() 方法。当用户单击 edit... 时，调用此方法：

1 2 3

<h:commandButton id="editButton" type="button"    value="#{cc.resourceBundleMap.editButtonText}"    onclick="this.startEditing()"/>

当 startEditing() 函数被调用时，mydiv 变量保持在 init() 方法调用时的原始值。这是关于 JavaScript 闭包最酷的（在某种程度上是 Java 内部类）。init() 和 startEditing() 之间花多少时间没有关系，init() 是否在它们之间被多次调用也无关紧要 — 当 startEditing() 被调用时，mydiv 的值正是当 init() 方法被具体组件调用时其自身的复制。
因为 JavaScript 闭包会保留周围函数变量的值，您要确保每个 startEditing() 都访问其组件的适当 DIV。