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＆amp;和我的lon＆amp; // 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: '© <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>个变量，从数据库中检索。

更新

或者以下内容会更有意义。一个自调用匿名函数，里面有变量和代码。这不会干扰或将指定的变量添加到全局命名空间？

<button ng-if="!IsNewEditDisabled" class="btn dropdown-toggle" ng-class="{open: status.isopen}" dropdown-toggle>
                                <i class="fa fa-pencil"></i><span class="caret"></span>
                            </button>
                            <button ng-if="IsNewEditDisabled" class="btn dropdown-toggle disabled" ng-class="{open: status.isopen}" dropdown-toggle>
                                <i class="fa fa-pencil"></i><span class="caret"></span>
                            </button>

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来清理全局命名空间

1 个答案: