获取“未捕获类型错误：无法读取未定义的属性‘助手’’

Question

我有一些 javascript 代码，其中加载了多个 javascript 文件和库。

• 图表
• chartjs-plugin-datalabels
• chartjs-插件数据表

大多数情况下加载这些文件是没有问题的

但有时我会收到“未捕获的类型错误：无法读取未定义的属性‘助手’’

我认为有时 Chart.js 没有完全加载。那么我如何确保加载 Chart.js 然后加载我的依赖脚本？

chartjs-plugin-datalabels抛出的错误：

chartjs-plugin-datalabels.js?_=1570176417056:15 Uncaught TypeError: Cannot read property 'helpers' of undefined
    at chartjs-plugin-datalabels.js?_=1570176417056:15
    at chartjs-plugin-datalabels.js?_=1570176417056:10
    at chartjs-plugin-datalabels.js?_=1570176417056:11

这就是我加载所有 javascript 文件的方式：

Promise.all([loadChartJS(), loadOtherScripts(), loadCss()])
    .then(() => {
        //do something with loaded files.
    });




function loadChartJS() {
    return new Promise((resolve, reject) => {
        dependentScripts = [
            libs/chartjs.min.js,
            libs/someLib.js,
            libs/anotherLib.js,
        ];
        for (var i in dependentScripts) {
            $.getScript(dependentScripts[i]).done(function(script, textStatus) {
                resolve();
            })
        }

    });
}

function loadScripts() {
    return new Promise((resolve, reject) => {
        listOfScripts = [
            libs/datatables.min.js,
            libs/chartjs-plugin-datalabels.js,
             ... some other files
        ];

        var stage = 0;
        for (let e in listOfScripts) {
            $.getScript(listOfScripts[e])
                .done(function(script, textStatus) {
                    stage++;
                    if (stage == listOfScripts.length) {
                        resolve();
                    }
                })
                .fail(function(jqxhr, settings, exception) {
                    reject(jqxhr);
                });
        }
    });
}

Answer 1

似乎在这两种情况下，当

dependentScripts

和

listOfScripts

中的第一个元素被加载时，而不是当所有元素都被加载时，您正在解决单个 Promise。即，在解决 Promise 之前，您无需等待所有

dependentScripts

和

listOfScripts

。

Answer 2

我想我已经找到了在我的案例中加载依赖脚本的解决方案。 因此插件 DataLabels 仅在解析 chartjs 时加载。

$.when(
    $.getScript(`libs/chartjs.min.js`),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {
    $.getScript(`libs/chartjs-plugin-datalabels.js`)
    //Load other scripts
    Promise.all([loadScripts(), loadCss()])
        .then(() => {

            //do stuff ...

        });
});

Answer 3

我们有两个文件 1.chart.js 和 2.datalabels.plugins 这两个文件足以创建不同类型的图表和负责数据标签的数据标签插件，因此首先附加文件“chartjs”，然后附加数据标签插件。首先加载 chartjs，然后加载任何插件。