javascript - 动态加载 Dojo 包

Question

我正在设置一个 map 应用程序，但无法弄清楚部分工作流程。我正在使用 ESRI 的 JS API，它使用 Dojo back。我正在从数据库中提取数据并将其加载到隐藏字段中以便在加载时进行解析。

当我想要设置 Dojo 加载哪些包时，我的问题就出现了。我有包名称和包 URL，我正在尝试让它们动态加载。但我还需要能够使用这些包来创建新对象，例如 map 图层对象。

我有一个初始的 require 语句来加载 map 本身:

require(["application/bootstrapmap", "dojo/domReady!"],
            function (BootstrapMap) {
                // Get a reference to the ArcGIS Map class
                map = BootstrapMap.create("map", {
                    basemap: "national-geographic",
                    center: [-122.45, 37.77],
                    zoom: 12,
                    scrollWheelZoom: true,
                });
            });

然后我希望能够根据配置数据库表动态加载不同的包。我想我也许可以做这样的事情:

$.each(packages, function (index, iPackage) {
        var packageURL = iPackage["PackageURL"];
        var packageName = iPackage["PackageName"];
        dojo.config.packages.push({ location: packageURL, name: packageName });
    });

或者我的其他尝试是:

$.each(packages, function (index, iPackage) {
        var packageURL = iPackage["PackageURL"];
        var packageName = iPackage["PackageName"];
        require([locationURL], function(packageName){});
    });

我基本上试图找到一种方法来首先加载 map 对象，然后解析插入到页面中的 JSON 以动态添加图层。我想只加载我需要的内容，而不是加载所有不同的模块，然后只选择稍后使用的模块。我宁愿立即加载并使用。

我正在寻找任何建议来让这样的设置正常工作。

Answer 1

首先，即使您可能可以实现您所追求的目标，我也不推荐这样做。对我来说这是一个错误的设计，因为一旦您已经知道需要哪些模块，为什么还需要参数化它？

其次，仅供引用，请确保在加载 dojo.js 本身之前(或之前引用 esri 库，该库几乎是一个 dojo 包)，您拥有包含包 url 设置的 dojoConfig。引用配置对象后，您无法设置或修改该对象的任何其他属性。

假设它应该在加载页面时加载。

<script type="text/javascript">
                    var dojoConfig = {  
                        async: true,
                        cacheBust: false,
                        locale: 'en-au',
                        paths: {
                            "customModulePath": "/modules/custom",
                        }
                    };
</script>

然后，每当您准备好使用任何与 dojo/esri 相关的调用或注入(inject)脚本时(即使将其作为页面中的第一个脚本加载也不会造成伤害)

<script type="text/javascript" src="path/to/jsapi/3.13/jsapicompact/init.js"></script>

然后(确保它已加载!)

var parameters = [ {
        url: "customModulePath/A",
        name: "ParameterA"
    },{
        url: "customModulePath/B",
        name: "ParameterB"
    };

var urls = [];
for (var p in parameters){
    urls.push(parameters[p].url);
}

require(urls, function(){
    for (var p in parameters){
        // use the function arguments to map it back!
        this[parameters[p].name] = arguments[p];
    }

    // Now access your arguments like
    console.log(this.ParameterA);
    console.log(this.ParameterB);

    // It is advisable to check if it is an object or a function before you use it.
})