javascript - 全局命名空间和 onclick 函数的污染

Question

假设代码

//(function() {
  function addItem() {
    alert("item added!");
  }
//})();

<button onclick="addItem()">add item</button>

如果我注意不污染全局命名空间，并取消注释注释的代码，我的功能将被破坏...

这种问题的通常解决方法是什么，保持 html 内联“on...”事件处理程序？

---

PS. 给初学者的注意事项:

有经验的开发人员可能会建议避免内联 onclick 属性。不使用它们的原因有很多:

• 呈现和行为之间的紧密耦合；
• 代码(通常)在全局范围内运行；
• 使测试和调试变得困难；
• 拒绝渐进增强；
• 很快变得难以维护；
• 它还会取消绑定(bind)任何以前分配的点击处理程序，这可能是不受欢迎的副作用；

Answer 1

你想要一个 closure这里:

var myGlobalClosure = (function(){
     var myPrivateVariable = "item added from inside closure!";
     function addItem() {
        alert(myPrivateVariable);
     }
    
    return {addItem:addItem};
})();

//if I have variable collisions they don't affect my closed over code.
//so this illustrates one of the big advantages of this pattern
var myPrivateVariable = "this is in the global scope and won't do anything";

<button onclick="myGlobalClosure.addItem()">add item</button>

上面的闭包是 revealing module pattern 的一个例子.这是一种常见的JS结构设计模式。

最终，某些东西需要在全局范围内，否则您无法引用它。这里的想法是组织您的全局对象，使它们具有结构。这也将防止标准函数/对象名称的冲突，例如 click 等。

这就是大多数库构建代码的方式，例如 jQuery/$ 是一个关闭 jQuery 函数和对象的闭包。