如何不用 eval 的方式经过字符串调用 JavaScript 的方法

因为 bootstrap-table 插件须要支持data-name="functionName"的方式,因此在实现的过程当中使用了eval的方法。咱们知道,在 JavaScript 中,eval是丑陋的,在MDN中提到:git

Obsoletegithub

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.web

咱们经过eval执行字符串代码,例如:bootstrap

eval("var x = 'Hello from eval!';");
console.log(x);

然而,eval会带来一些意想不到的问题:数组

  1. 安全性问题:你的字符串可能会被注入其余的命令或者第三方脚本。安全

  2. 可调试问题:很难去调试错误信息。app

  3. 压缩问题:程序不会对字符串进行最小化压缩。函数

不幸的是,在实际的开发中,eval常常会被滥用,例如解析 JSON 字符串,虽然使用eval能够正常工做,可是咱们应该尽可能避免使用它,例如使用JSON.parse方法。工具

那么,咱们如何才能不用 eval 的方式经过字符串调用 JavaScript 的方法呢?spa

首先,假如咱们有一个字符串名称的方法:

// function we want to run
var func = 'runMe';
function runMe() {
    // do something
}

一个好的解决方法那就是咱们能够经过window对象,在调用方法以前咱们对其进行检查:

// find function
var fn = window[func]; // runMe
// is a function?
if (typeof fn === 'function') {
    fn();
}

更多的时候,咱们的方法是有一系列的参数的,例如咱们存放到数组中,这个咱们只须要简单的执行apply方法便可:

// function name and parameters to pass
var func = 'runMe';
var args = [1, 2, 3];
// find function
var fn = window[func]; // runMe
// is a function?
if (typeof fn === 'function') {
    fn.apply(null, args);
}

到此,咱们知道了不用 eval 的方式经过字符串调用 JavaScript 的方法,是更安全、容易进行调试、运行更快的方法。

最后,将其封装成了一个工具函数:

var calculateFunctionValue = function (func, args, defaultValue) {
    if (typeof func === 'string') {
        // support obj.func1.func2
        var fs = func.split('.');
        if (fs.length > 1) {
            func = window;
            $.each(fs, function (i, f) {
                func = func[f];
            });
        } else {
            func = window[func];
        }
    }
    if (typeof func === 'function') {
        return func.apply(null, args);
    }
    return defaultValue;
};

扩展:

对字符串对象,也一样的方法处理。而对于字符串数组,则使用相似:

'[5, 10, 20, 50, 100, 200]'.replace(/, /g, ',').slice(1, -1).split(',');
相关文章
相关标签/搜索