javascript - 使用 Deferreds 获取位置并显示 map

Question

我试图通过一个(我认为是)简单的示例来理解 Revealing Module Pattern 和 jQuery Deferreds。

我想要做的是调用一个模块来获取用户的位置，并且何时以及该调用成功时在谷歌地图上显示该位置。

这两个操作本身使用一堆函数和回调对我来说都没有问题，但我尝试以一种更“馄饨”而不是“意大利面条”的方式来完成它。

我发现，虽然延迟工作正常，但我的模块的公共(public)属性不包含我在获取位置的操作期间设置的值。

这是我的“geoModule”

var geoModule = function () {
    var lat;
    var lng;

    var init = function () {
    return $.Deferred(function (def) {
        getCurrentPositionDeferred({})
        .fail(function () { def.reject(); })
        .done(function (location) {
            lat = location.coords.latitude;
            lng = location.coords.longitude;
            logger.log("Got location : " + lat + " : " + lng);
            def.resolve();
        });
    }).promise();
    };

    var getCurrentPositionDeferred = function(options) {
    var deferred = $.Deferred();

    navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject, options);

    return deferred.promise();
    };

    return { lat: lat, lng: lng, init: init };
}();

这是我的“mapModule”

var mapModule = function (mapId) {
    var mapElement = document.getElementById(mapId);
    var map;
    var initMap = function (lat, lng) {
    logger.log("init map: " +lat + " : " + lng);
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(lat, lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(mapElement, myOptions);
    };


    return { initMap: initMap };
}('map');

当我像这样把它们放在一起时:

$.when(geoModule.init())
    .done(function () {
        logger.log("location done " + geoModule.lat + " : " + geoModule.lng);
        mapModule.initMap(geoModule.lat, geoModule.lng);
    });

geoModule.lat 和 geoModule.lng 未定义，即使在 geoLocation 中设置它们的代码运行成功。

我在 http://jsfiddle.net/faG4J/4/ 创建了一个完整的示例显示日志输出。我可能正在做一些非常愚蠢的事情，因此我们将不胜感激任何帮助。

Answer 1

您设置的那些变量不是模块的属性 - 它们只是局部变量。您已将它们的值导出到模块对象，但当时尚未设置它们。

但是，这根本不是您应该这样做的方式。不要对正在设置的某些对象的某些属性做出 promise ，但对这些值做出 promise 。

由于只有一个功能的模块对我来说似乎毫无用处，所以我在这里省略了它们:

function getPosition() {
    var deferred = $.Deferred();
    navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject);
    // pipe the output of the deferred through this logging and transformation function
    return deferred.then(function (location) {
        var lat = location.coords.latitude;
        var lng = location.coords.longitude;
        logger.log("Got location : " + lat + " : " + lng);
        return {lat: lat, lng: lng};
    });
}

然后使用诸如getPosition.done(createMap)之类的东西。