javascript - Function 对象和 ES 模块的范围问题

Question

这几天我遇到了这个问题，我正在开发一个客户端框架，最近我将其切换为使用 ES 模块。问题是我的模板引擎现在遇到了范围问题:我无法再在 View 中调用辅助函数。

这是代码:

class templateEngine {

    // Parse template (content) with parameters
    static parse(content, params) {
        let re = /{#(.+?)#}/g,
            reExp = /(^\s*(if|for|else|switch|case|break|{|})).*/g,
            code = 'with(obj) { var r=[];\n',
            cursor = 0,
            result,
            match;
        let add = function (line, js) {
            js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
                (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
            return add;
        }
        while (match = re.exec(content)) {
            add(content.slice(cursor, match.index))(match[1], true);
            cursor = match.index + match[0].length;
        }
        add(content.substr(cursor, content.length - cursor));
        code = (code + 'return r.join(""); }').replace(/[\r\t\n]/g, ' ');
        try {
            test("test"); // This console log "test".
            result = new Function('obj', code).call(this, params);
        }
        catch (err) {
            console.error(err.message, "falling back to raw content.");
            return content;
        }
        return result;
    };
};

function test(s) {
    console.log(s);
    return s;
}

export default templateEngine;

以下是我如何调用解析函数(此加载函数是 View 类的一部分):

// Load parsed template view into "viewroot"
    load() {
        let params = this.params;
        let xhr = new XMLHttpRequest();
        xhr.overrideMimeType("text/html");
        xhr.open('GET', this.path, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == "200") {

                // Parse view template
                let parsedview = templateEngine.parse(this.responseText, params);

                // Load parsed html into viewroot element
                document.querySelector("viewroot").innerHTML = parsedview;

                // Change page title with view title
                let title = document.querySelector("viewhead").querySelector("title");
                document.title = title.text;
            }
        };
        xhr.send(null);
    }

这是 html 模板:

<viewhead>
    <title>Welcome!</title>
</viewhead>

<viewbody>
    <div class="container">
        <h1 class="title">Page title</h1>
        <p class="description">welcome to this page</p>
        <p>{# test("test") #}</p>
    </div>
</viewbody>

“测试”函数不再可以从“结果”函数对象访问。

普通的 javascript 和非模块函数可以访问和工作，但模块函数则不然。

希望你能帮我解决这个问题。

Answer 1

我通过实验找到了答案，我刚刚在 scope 对象中添加了我想要使用模板访问的函数，并使用 apply(scope, [params]).

代码如下:

let scope = params;
scope.myFunction = myFunction;
result = new Function('obj', code).apply(scope, [params]);

希望它可以帮助人们找到这个答案。