Question

我已经为此做了几次搜索，发现了许多延迟加载的例子，但我找不到正确的例子来解决我想要完成的事情。这是沮丧和肮脏......

我有一个对象，称之为Library：

(function() {
    function Library() {
        // some code in here
        this.path = "/library";
    }

    function library() {
        var l = new Library;
        l.lang('en');
        return l;
    }

    Library.prototype.lang = function(lang) {
        lang = lang || 'en';

        var s = document.createElement( "script" );
        s.setAttribute("type", "text/javascript");
        s.setAttribute("src", this.path + "/lang/" + lang + ".js");

        document.getElementsByTagName( "head" )[0].appendChild( s );
    }
})();

所以，我正在尝试做的是懒惰加载“语言”文件来扩充Library对象。语言文件类似于：

(function( Library ) {
    Library.prototype._lang = {
        header: "Welcome",
        greet: "Hello",
        exit: "Goodbye"
    };
} ).bind( this );

问题是（显然），因为它的加载方式，新的Library对象在有机会被扩充之前返回。我已经尝试向附加新脚本标记的文档添加事件监听器，但这不会让我“返回”库对象。我找不到推迟返回库对象的正确方法。

我知道require.js。这是一个很棒的lib，但我不想在这个项目中使用它。

感谢您的帮助！

Answer 1

您可以使用同步XMLHTTPRequest和eval：

加载文件

(function() {

    // ...

    Library.prototype.lang = function(lang) {
        lang = lang || 'en';
        load(this.path + "/lang/" + lang + ".js");
    };

    function load(url) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, false);
        xhr.send();
        if (xhr.status !== 200) {
            console.log("Failed to load " + url + ": " + xhr.statusText);
        } else {
            eval(xhr.responseText)(Library);
        }
    }
})();

从外部文件扩充JavaScript对象

1 个答案: