• 在 JavaScript 中 eval方法是丑陋的
  • CoCo 发表于 2016/2/25 8:47:00 | 分类标签: eval方法 解析Json
  •  由于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会带来一些意想不到的问题:

    1. 安全性问题:你的字符串可能会被注入其他的命令或者第三方脚本。
    2. 可调试问题:很难去调试错误信息。
    3. 压缩问题:程序不会对字符串进行最小化压缩。

    不幸的是,在实际的开发中,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;
    };
    

    扩展:

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

    '[5, 10, 20, 50, 100, 200]'.replace(/, /g, ',').slice(1, -1).split(',');
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:CoCo
  • 加入时间:2014/6/1 14:42:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮