javascript - 用于在 HTML 更改时更新选择器的 jQuery 设计模式

Question

我正在寻找一些关于使我的 jQuery 选择器更具可配置性的建议。例如，给定以下由 PHP 生成的 HTML：

<ul id="my-list">
    <li>first</li>
    <li>second</li>
</ul>

还有一点 jQuery：

$(function() {
    $(document).on("click", "#my-list li", function() {
        alert("You clicked " + $(this).text());
    });
});

到目前为止一切顺利，但有一天设计师出现并将id“my-list”重命名为“list-of-numbers”，javascript停止工作。目前，解决方案是记住通过 grep 代码来查找对“my-list”的任何引用，但这是非常错误的。是否有用于使选择器可配置的 jQuery 设计模式？

score 1 · Accepted Answer

这可以称为“选择器选择”。您可以定义一组包含选择器的变量作为解决方案：

var selectors = { myLi: "#my-list li",
                  myUl: "#my-div ul" };

然后您可以简单地进行对象查找以获取选择器：

$(selectors.myLi);

这具有可读性和动态性的优点；但是，在您更改 . 的示例场景中ID，除非在代码中的某处明确指出需要更改，否则这不会很有帮助。

您可能需要考虑进行一些委派并使用自定义数据属性来定义角色。

score 0 · Accepted Answer

在 JS 代码的开头定义一组选择器（不要忘记为您使用的内容添加注释）：

var selectors = {
  'listSelector':'#my-list li' /* DESC */,
  'nextSelector': '.whatever'
}

并在您的查询中使用它们：

 $(document).on("click", selectors.listSelector, function() {
    alert("You clicked " + $(this).text());
 });

2 回答 2