5.4 KiB
| title | localeTitle |
|---|---|
| Using Anonymous Functions for Private Namespacing in Your JavaScript Apps | 在JavaScript应用程序中使用匿名函数进行私有命名空间 |
让我们来看看构建JavaScript应用程序时命名空间的含义以及构建应用程序时使用私有命名空间的一些好处。
请注意，本文引用了匿名自执行函数。如果你不知道这是什么，请阅读Noah Stokes的这篇优秀文章： 自我执行匿名函数或如何编写干净的Javascript 。本文将详细介绍匿名自执行函数。
什么是命名空间？
简而言之，命名空间只是一段具有自己空间的代码。当您第一次开始编写JS应用程序时，通常只需键入代码并运行它。这将所有代码放入所谓的全局命名空间 ，其中包含您正在使用的窗口的所有代码。
但是，如果将所有代码保存在全局命名空间中 ，则可能会遇到冲突，命名约定等问题，尤其是在大型JS应用程序/游戏中。
让我们来看一个如何仅使用全局命名空间来开发游戏的例子。
所以，假设我们有一款游戏可以跟踪玩家拥有的点数：
var points = 0;
许多游戏跟踪点以增加游戏的竞争优势。只需在脚本中键入该行，我们就创建了一个名为_points_的变量，可以跟踪用户获得的点数。
这一切都很好，但是让我们说我们有一个更高级的用户玩游戏。这个用户知道如何查看网页的来源，因此这个人看一看JS游戏背后的源，并意识到_points_变量只是坐在全局命名空间中 。当他们思考他们可以达到的分数时，一个邪恶的假笑在他们的脸上下降！他们认为他们不想等到打败一些坏人，或者粉碎一些蘑菇，或者你有什么东西，以获得一堆积分。他们现在想要他们的积分！嗯，如何_发出数千亿亿_点的声音？！因此，他们在自己喜欢的浏览器上加载控制台，只需输入控制台：
points = 34750925489459203859095480917458059034;
一旦用户点击进入， _点数_变量就会在游戏中更新。现在，用户在游戏中有一个真正巨大的，可能不切实际的积分，他可以向他的朋友吹嘘，没有人可以击败他的超棒成绩。
那么，我们如何防止这种情况发生？这是私有命名空间发挥作用的地方。
私有命名空间
私有命名空间允许开发人员将他们的代码放入部分（或命名空间 ）。这些部分彼此独立运行，但仍可以从全局命名空间读取和写入。
为了将其简化为现实生活中的简单术语，假设您正在办公楼中工作。你有自己的办公室，你看到其他人有自己的办公室。每个办公室都被锁定，只有拥有办公室的人才有办公室的钥匙。让我们也说你有一些新的超级锁定，使你的办公室难以被建筑物中的任何其他人穿透。让我们将办公楼本身视为全局命名空间 ，将每个办公室视为私有命名空间 。您无权访问任何其他人的办公室，也无权访问您的办公室。但是，你们每个人都可以访问办公楼的其他部分，无论是喝咖啡，吃点心等等。你们每个人都可以从全局命名空间中获取东西（或者在那里创建/修改某些东西），但你可以从彼此的办公室创建/修改/抓取任何东西;您只能从自己的私有命名空间 /办公室创建/修改/抓取。
实现私有命名空间
那么，我们如何在JavaScript中实现这个私有命名空间呢？使用匿名自执行功能！如果您没有阅读Noah Stokes， 自执行匿名函数或如何编写清洁Javascript的文章 ，请立即执行此操作。本文将详细介绍匿名自执行函数。
让我们看看使用前面的那个_点_变量，但是让我们把它分成一个私有命名空间 ：
//The most common way you'll see an anonymous self-executing function
(function () {
var points = 0;
})();
//This is just one of many more alternative ways to use an anonymous self-executing function
/*
!function () {
var points = 0;
}();
*/
现在，当用户访问该页面时，他们将无法在浏览器中打开控制台并根据需要更改points变量的值！真棒！
命名空间和文档交互
上面的代码仅用于使用匿名自执行函数为代码提供自己的私有命名空间 。请记住，名称空间只影响JS代码（变量/数组/对象/等），而不影响与文档本身相关的代码。
命名空间中的任何代码仍然具有与HTML文档和CSS相同的访问权限，就像通常在全局命名空间中一样 。看看接下来的两个代码示例。它们都执行相同的功能，并且既不比另一个更有益，也更有效。
<script type="text/javascript">
(function () {
document.querySelector('body').style.background = 'blue';
})();
</script>
是相同的：
<script type="text/javascript">
document.querySelector('body').style.background = 'blue';
</script>
请记住，这只是在JavaScript应用程序中使用命名空间的一种方法。使您的代码适应最适合当前情况的代码。