不用 eval 的方式通过字符串调用 JavaScript 的方法

下文来看一个另类做法，就是不用 eval 的方式通过字符串调用 JavaScript 的方法,希望能帮助到大家。

由于 bootstrap-table 插件需要支持data-name=”functionName”的方式，所以在实现的过程中使用了eval的方法。我们知道，在 JavaScript 中，eval是丑陋的，在MDN中提到：
Obsolete
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.
我们通过eval执行字符串代码，例如：
代码如下 复制代码
eval(“var x = ‘Hello from eval!’;”);
console.log(x);
然而，eval会带来一些意想不到的问题：
安全性问题：你的字符串可能会被注入其他的命令或者第三方脚本。
可调试问题：很难去调试错误信息。
压缩问题：程序不会对字符串进行最小化压缩。
不幸的是，在实际的开发中，eval经常会被滥用，例如解析 JSON 字符串，虽然使用eval可以正常工作，但是我们应该尽量避免使用它，例如使用JSON.parse方法。
那么，我们如何才能不用 eval 的方式通过字符串调用 JavaScript 的方法呢？
首先，假如我们有一个字符串名称的方法：
代码如下 复制代码
// 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;
};