自调用函数 javascript 以清理全局命名空间上的变量答案

【问题标题】：Self invoking functions javascript to clean up variables on global namespace自调用函数 javascript 以清理全局命名空间上的变量
【发布时间】：2015-08-18 09:04:30
【问题描述】：

学习 javascript，我想获得有关自调用函数的反馈。

我读到创建全局变量不是要走的路。

这是原版

// Footer of page
<script>
    var lat = 51.505 // retrieved from db
    var lon = -0.09  // retrieved from db

    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([lat, lon]).addTo(map)
        .bindPopup('You are here.')
        .openPopup();
</script>

重构

// Footer of page
<script>
    (function(){
        var createMap = function() {
            var lat = 51.505 // retrieved from db
            var lon = -0.09  // retrieved from db

            var map = L.map('map').setView([lat, lon], 13);

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([lat, lon]).addTo(map)
                .bindPopup('You are here.')
                .openPopup();
        }(); // createMap function self invocation
    })(); // anonymous function self invocation
</script>

我不确定我的重构版本是否有意义，因为我在自调用匿名函数中创建了一个函数 var createMap。

我不想用从数据库中检索到的 lat 和 lon 变量混淆全局命名空间。

更新

或者以下内容更有意义。一个自调用匿名函数，其中包含变量和代码。这不会干扰或将分配的变量添加到全局命名空间吗？

// Footer of page
<script>
    (function(){
        var lat = 51.505 // retrieved from db
        var lon = -0.09  // retrieved from db

        var map = L.map('map').setView([lat, lon], 13);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        L.marker([lat, lon]).addTo(map)
            .bindPopup('You are here.')
            .openPopup();
    })(); // anonymous function self invocation
</script>

【问题讨论】：

我在任何地方都看不到var buildMap。你的意思是createMap()？
目前嵌套另一个 IIFE 是没有意义的。为什么你认为你需要createMap？
顺便说一句，createMap 目前是undefined，因为它不是指函数而是指函数的返回。
抱歉打错了，我已经更新了。 buildMap 应该是 createMap。

标签： javascript function self-invoking-function

【解决方案1】：

失去 createMap 函数，没有必要这样做，因为您已经在使用外部 IIFE（立即调用函数表达式）。这样你就不会污染全局命名空间：

(function() {
    var lat = 51.505 // retrieved from db
    var lon = -0.09 // retrieved from db

    var map = L.map('map').setView([lat, lon], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([lat, lon]).addTo(map)
        .bindPopup('You are here.')
        .openPopup();
})(); // anonymous function self invocation

【讨论】：