为了避免全局变量和方法，外部JavaScript文件应该是什么样子的?

Question

我的页面上有以下一段代码:

<script src="/Assets/JavaScripts/myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript">
     testAlert();
</script>

和在myJavaScript.js我有以下内容:

(function () {
     function testAlert() {
          alert('test alert');
     }
})();

它没有调用testAlert。不确定我在这里做错了什么?我试图避免全局变量和方法。我在jQuery中做了类似的事情，它工作了，它只需要在外部文件的开头加一个$。有人能解释我在这里做错了什么，以及如何确保我遵循最佳实践?

Answer 1

我把你的代码放在我的环境中检查，我在mozilla错误控制台中出现了错误。所以，请在那里核对一下。在myjavascript.js文件中，你应该只把javascript函数放在下面。

function testAlert() {
    alert('test alert');
}

Answer 2

js文件中的函数没有返回任何内容。为了避免使用全局变量，您可以创建一个全局命名空间(类似)变量:

var myNS = (function () {
     function testAlert() {
          alert('test alert');
     }
     return {testAlert:testAlert};
}());

现在你可以在你的内联javascript中使用myNS.testalert()

Answer 3

JS是以这样一种方式构建的，你真的无法完全避免全局变量。(嗯，你可以，在某种程度上。如果你从不给任何东西起名字。但这往往带来的问题多于解决的问题。)当您从其他脚本调用testAlert时，您是在假定testAlert是全局的情况下操作的。如果不是，你就不能像那样从任何地方调用它。

您可以通过将您的内容添加到充当名称空间的对象中来最小化冲突的可能性，如下所示:

// don't clear it out if it already exists.
// that way all of your scripts can use your namespace, if you want.
// what you're really trying to protect against, are strangers picking names
// like yours. 
if (!window.myNamespace) myNamespace = {};
// example function
myNamespace.testAlert = function() { alert("test alert"); };

myNamespace.testAlert();

这样，唯一有可能发生冲突的名字是myNamespace。

我要展示一个命名空间全局变量的例子…但是你知道吗?命名空间的全局仍然是全局。在大多数情况下，全局变量是你想要尝试摆脱的东西。

Answer 4

您需要一些类型的全局变量，以便您可以访问您正在寻找的方法。您拥有<script>testAlert()</script>的事实意味着您希望在全局命名空间中定义testAlert()。

我喜欢做的(特别是在使用YUI时，您已经用YUI标记了这个问题)是创建一个全局对象，作为实用程序类。

var page = {
    init: function() {
        // Do some initialization...
    },
    testAlert: function() {
        alert("Test Alert");
    }
};

这样做之后，你可以使用一个全局变量"page"来访问你需要的所有内容。

// e.g.
page.testAlert();
// or...
Y.on("domready", page.init, page);

对于第二个例子，我假设您使用YUI，因为您用它标记了这个问题。