Javascript 范围、安全性和扩展

Question

我已经阅读了大量有关 Javascript 作用域的内容，并且已经生成了我想要的功能 - 我想我应该发布这个问题来澄清如何/为什么在一个地方。

就我而言，我使用的是 Leaflet - 一个用于映射的 javascript 库。

我的第一个问题是“L”是什么。

例如，我可以使用以下代码:

current_map = L.map(map_id);

L 代表什么以及为什么我可以“通过”它访问函数？

其次，在我的网站上，我有多个不同的 map ，它们共享一些通用代码，例如设置 map 。

因此，我想开发一些“通用代码”，例如设置 map 和添加标记。

所以我在map_global.js中编写了以下代码:

    var current_map;

window.setup_map = function(map_id)
{


    if ($("#"+map_id)[0])
    {

        $("#"+map_id).show();

        current_map = L.map(map_id);

    }
}

然后在我的 map_individual.js 文件中我只需编写:

map_setup('map_div');

我的 map 已设置。

我可以这样做，因为通过在定义函数名称中使用 window ，我可以在全局范围内设置该函数。同样，通过在任何函数外部设置变量 current_map ，它也是全局的吗？

这是实现此功能的有效/安全/合理的方式吗？

最后为什么我无法访问map_individual.js中的current_map？

非常感谢。

汤姆

Answer 1

这是变量作用域的问题。

从概念上将“L”视为命名空间。 L 向您公开方法，例如map、L.map()。

看起来您想公开您的“current_map”变量。在您的 map_global.js 文件中，current_map 当前是一个局部变量 - 因为您使用 var 声明了它。因此，map_global.js 范围之外的任何内容都无法访问 current_map。

如果您想要一种快速而肮脏的方式来访问map_individual.js中的current_map，您可以通过将全局window.current_map设置为L.map(map_id)来公开它，因此更改current_map变量的范围。

这当然会导致污染全局范围，因此您可以探索的一件事是如何实现“模块化”客户端 JavaScript。执行此操作的一个简单方法是实现您自己的命名空间。例如。在 map_global.js 中，您可以仅公开一个“对象”(您自己的命名空间)并将其附加到 window.如果您将这些方法和变量附加到该“对象”，您可以使用您的命名空间来访问 current_map 和 setup_map()，而不是将所有方法和变量直接附加到窗口 - 全局命名空间 - 这可能会很快失控。

 function setup_map(){ ...}

 var current_map; 

 window.my_lib = {
   setup_map = setup_map,
   current_map = current_map
 }

因此 my_lib.setup_map() 和 my_lib.current_map 稍后可以通过这种方式访问​​，因为您只需将 my_lib全局的。想象一下，如果 my_lib 公开了十几个函数，其想法是，这会更有组织性，而不是将所有十几个函数附加到 window - 全局命名空间。当您有不同的文件/“模块”且具有相同名称的函数时，这会派上用场。这样，您就可以拥有 my_lib.render() 和 client_lib.render()，而无需相互覆盖，并保持这种分离，作为降低覆盖全局命名空间中已有内容的风险的一种方式。

请注意，导入脚本的顺序也很重要!还有一些库，例如 RequireJS、CommonJS，仅举几例，它们尝试处理整个模块化事物的依赖方面，这值得探索。因此请谨慎行事，希望这会有所帮助!