自调用函数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