时间戳

首页 > 解决方案 > Javascript 代理因实例化而失败

javascript - Javascript 代理因实例化而失败

问题描述

我有一个代理对象，我在其中拦截 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() 部分是好的。我只是不知道如何延迟构造函数调用，直到脚本完全加载。

使用 DevTools 控制台运行会产生以下结果：

标签： javascriptecmascript-6proxy

解决方案

推荐阅读