Question

所以我正在研究一种JavaScript框架，只是我自己在未来的项目中使用的一些实用工具，我想建立一个数据绑定系统。

我使用的第一个方法是对象，代码只是遍历指定的html元素并在标记中查找{{key}}的出现，然后在对象中查找该键并将其替换为HTML。

例如，如果您在HTML中有<div>{{name}} is a cool guy</div>并且在JS中有{name:"joseph"}那么最终产品将在屏幕上显示为＆＃39;约瑟夫是一个很酷的家伙＆＃39;。

但是，我后来决定改变我的方法，而不是一个函数框架。因此，您需要{name:"joseph"}代替function(){ var name = "joseph" }。

这显然看起来更好，并提供了更好的功能。

我更改了处理函数，因此不是查找键/值对来替换{{key}}，而是只使用变量上的eval来获取其值。

我的问题在于：如何在用户传递的功能范围内运行搜索/替换代码。

如果用户在该函数中定义变量，由于范围问题，其值将无法在其他任何位置使用。

我尝试使用Function.toString()来实际修改该功能的源代码，但没有任何工作，而且非常复杂。（问题不是由于实际的解决方案，我认为Function.toString()可能有效，但由于我的实施。我一直在收到错误）

那么......在另一个函数的范围内运行任意代码的最佳方法是什么？

性判据：

显然，我无法修改该功能，因为用户正在将其传入。（您无法告诉我将搜索/替换代码添加到功能的底部）
变量必须保留在函数的本地范围内。（不使用window.name = "joseph"或其他任何东西作弊）

我也知道eval有多糟糕，所以任何有关让它发挥作用的建议都非常感谢。谢谢！

代码：

function process(html) {
        var vars = html.match( /({{)[^{}]*(}})/g )
        // vars = ['{{variable}}', '{{anotherVariable}}']
        var names = vars.map( function(x){ return x.replace("{{", "").replace("}}", "") } )
        // names = ['variable', 'anotherVariable]

        obj = {}

        for (var i = 0; i < names.length; i++) {
            obj[names[i]] = eval(names[i])
        }

        for (var p in obj) {
            html = html.replace(new RegExp('{{'+p+'}}','g'), obj[p]);
        }

        return html
}

Answer 1

你应该回到你对象的第一个方法，它会好得多。您仍然可以传递一个函数，但该函数应该返回一个对象：

function () {
    return { name: 'joseph' }
}

在另一个函数的范围内运行代码（JavaScript）

1 个答案: