Question

我有一个代理对象，在其中拦截get（）。如果所请求的属性不存在，那么我将从脚本中加载它。那部分工作正常。但是，如果引用了一个类，则实例化将在值加载之前进行。 最明显的答案是使用回调，但是我无法找到一种方法来拦截Construct（）操作或其他某种方法来挂接回调以延迟实例化过程，直到脚本加载完全完成

我确实了解回调，fetch（），import（），但使用代理对象时，与其中任何一个相关的答案都无法解决竞争状况。

以下内容已通过Chrome v71进行了测试。我对与其他浏览器的兼容性，对jQuery或任何其他框架的使用都不感兴趣。我本以为ES6功能就足够了。

我将尝试加载的模块：

App.User = class {
    constructor(name) {
        this._name = name;
    }
    show() {
        console.log(`Hello, I am ${this._name}.`);
    }
}

引起问题的网页和脚本：

<!DOCTYPE HTML>
<html>
<head>
<title>Dynamic Script Loading</title>
</head>
<body>
<p> A test for dynamic script loading</p>
<script>

App = {};

function loadScript(url) {
  console.log(`loadScript: loading ${url}`);
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = false;
    script.src = url;
    script.onload = () => {
        console.log(`loadScript: loaded ${url}`);
        resolve(script);
    }
    script.onerror = () => reject(new Error("Script load error: " + url));
    document.body.appendChild(script);
    console.log(`loadScript: loading ${url}`);
  });
}

var hdlApp = {
    get: function(obj, prop) {
        if (prop in obj) {
            console.log(`App has property ${prop}`);
            return obj[prop];
        } else {
            console.log(`App does NOT have property ${prop}`);
            loadScript(`${prop}.js`).then(
                val => {
                    console.log('THEN');
                    return obj[prop]
                },
                err => {
                    console.log('CATCH');
                    return undefined;
                }
            );
        }
    }
}
window.App = new Proxy({}, hdlApp);

function test() {
    console.log('First test');
    u1 = new App.User('Fred');
    u1.show();
}
</script>
</body>
</html>

在第一次测试中，在脚本完全加载之前执行new App.User。第二次尝试，脚本已完全加载并编译，因此可以正常工作。证明Proxy get（）部分很好。我只是不知道如何在脚本完全加载之前延迟构造函数的调用。

Javascript代理失败，实例化

0 个答案: