javascript - 从一个 javascript 源创建多个函数作为字符串

Question

我想用一个包含 js 源代码的 JavaScript 字符串创建三个函数。

假设我有以下代码作为一个字符串:

"
function func1()
{
    console.log('This comes from func1')
}

function func2()
{
    console.log('This comes from func2')
}

function func3()
{
    console.log('This comes from func3')
}
"

现在我想将这三个函数创建为 javascript 函数并将它们附加到一个对象，例如:

object1.func1 = function func1(){...}
object1.func2 = function func2(){...}

我有很多对象，并且希望能够附加一个包含这三个函数 func1、func2 和 func3 的脚本文件。脚本文件也可以包含其他函数，但这些函数由三个函数之一调用。因此对象的脚本文件可能如下所示:

"
// Main functions of a script file
// A script file MUST contain these three functions

function func1()
{
    console.log('This comes from func1')
    userFunc1();
    // do some user code
}

function func2()
{
    console.log('This comes from func2')
    userFunc2();
    // do some user code
}

function func3()
{
    console.log('This comes from func3')
    userFunc3();
    userFunc4();
    // do some user code
}


// User functions
// these are optional

function userFunc1()
{
    // do stuff
}

function userFunc2()
{
    // do stuff
}

function userFunc3()
{
    // do stuff
}

function userFunc4()
{
    // do stuff
}

"

当字符串只包含一个函数时，创建函数没有问题，如下所示:

var jsCode = "(function func1(){console.log('This comes from func1')})";
var script=new Function (jsCode);
script();

我的问题是如何从一个字符串中解析两个或多个函数并相应地创建这些函数？

我不想使用任何库，只想使用纯 JavaScript而且我不想使用 eval，因为它似乎慢得可怕。

有人可以帮我解决这个问题吗？

Answer 1

在浏览器中运行时，可以动态添加script元素并使用 createContextualFragment 执行它:

function executeCode(code) {
    document.head.appendChild(
        document.createRange().createContextualFragment('<script>' + code + '<\/script>')
    );
}

// Demo
const code = `
function func1()
{
    console.log('This comes from func1')
}

function func2()
{
    console.log('This comes from func2')
}

function func3()
{
    console.log('This comes from func3')
}`;

executeCode(code);

func1();
func2();
func3();

获取作为对象成员加载的函数

问题更新后，函数必须是对象成员。在这种情况下，我会要求提供的代码遵循以下格式:

({
    func1()
    {
        console.log('This comes from func1')
    },
    func2()
    {
        console.log('This comes from func2')
    },
    func3()
    {
        console.log('This comes from func3')
    }
})

然后您可以使用eval将此对象表达式放入变量中:

const code = `
    ({
        func1()
        {
            console.log('This comes from func1')
        },
        func2()
        {
            console.log('This comes from func2')
        },
        func3()
        {
            console.log('This comes from func3')
        }
    })
`;

const obj = eval(code);

obj.func1();
obj.func2();
obj.func3();

对代码格式的侵入性较小的更改是使其成为数组表达式:

const code = `
    [
        function func1()
        {
            console.log('This comes from func1')
        },
        function func2()
        {
            console.log('This comes from func2')
        },
        function func3()
        {
            console.log('This comes from func3')
        }
    ]
`;

const obj = Object.fromEntries(eval(code).map(f => [f.name, f]));

obj.func1();
obj.func2();
obj.func3();

当代码无法更改时

如果您当前的语法无法更改，那么我建议对其进行字符串替换，以获得上述数组语法:

const code = `
function func1()
{
    console.log('This comes from func1')
}

function func2()
{
    console.log('This comes from func2')
}

function func3()
{
    console.log('This comes from func3')
}`;

const array = "[" + code.replace(/}(\s*function\b)/g, "},$1") + "]";

const obj = Object.fromEntries(eval(array).map(f => [f.name, f]));

obj.func1();
obj.func2();
obj.func3();

显然，这样的字符串替换有一些缺点，因为代码可能具有嵌套函数，并且这些函数不应该获得额外的逗号(尽管它并不总是会破坏代码)。人们还可以想象带有字符串文字的代码，其中包含序列 } 函数，...等等，...等等。