0

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>
4

1 に答える 1

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
于 2015-08-18T09:07:48.937 に答える