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

Question

学习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>

Answer 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

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

Self invoking functions javascript to clean up variables on global namespace

javascript

function

self-invoking-function