因为 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
会带来一些意想不到的问题:数组
安全性问题:你的字符串可能会被注入其余的命令或者第三方脚本。安全
可调试问题:很难去调试错误信息。app
压缩问题:程序不会对字符串进行最小化压缩。函数
不幸的是,在实际的开发中,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(',');