Question

我有一段简单的代码。当我按下按钮时，我想改变该按钮的颜色。当我按下此按钮时，我得到的当前错误是'无法读取属性'changeColor'of undefined'。我不明白我哪里错了。我编写这段代码的目的是不打算过度污染全局命名空间，因为我打算添加更多代码。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title> </title>
 <style>
    #wrap{
        margin-top: 30px;
        margin-left: 30px;
    }
    .btn{
        font-size: 20px;
        width: 65px;
        height: 45px;
    }

</style>

</head>

<body>
<div id="wrap">
<button id="btn1" onclick="pub.changeColor('#66FFFF')"    class="btn">btn1</button>
<button id="btn2" class="btn">btn2</button>
</div>

我的JS档案：

var pub = (function(){
    var changeColor = function(element, color){
    element.style.backgroundColor = color;

    }
})();

Answer 1

因为您没有返回任何内容，所以pub的值未定义。更好：

var pub = (function(){
  return {
    changeColor: function(element, color) {
      element.style.backgroundColor = color;
    }
  }; 
})();

您现在可以使用IIFE内部声明的局部变量，这些变量对于IIFE本身的代码是私有的。您要返回的对象的属性是pub模块的用户最终可见的内容。

为什么我的命名空间未定义？

1 个答案: