JS根据动态生成的字符串,验证是否存在对应function并执行

这个需求是在我搭建前端项目框架的时候遇到的:

由于我走的是前后端完全分离的路线,那前端部分少了后端的支持,所以就少不了要做点路由、分发之类的工作,而在用路由跳转到新的“页面”后,我需要执行相应的function来获取第一版的数据。有个挫一点的方法:写个switch,根据目前要跳到哪个页面,来判断执行哪个function;这种方法work是work,就是维护起来不方便,以后每添一个新“页面”都要来维护这个switch。

PHP有个很不错的动态机制:

<?php
function test() {
  echo '233333333333';
}
$funcName = 'test';
$funcName();    //输出233333333333

用这个动态机制来做路由非常方便,因此在做前端框架的路由的时候,我就想着会不会有类似的解决方案呢?

答案是有的,利用JS的eval函数(PHP也有同名函数),就可以通过拼字符串来执行JS代码了,下面是例子:

function test() {
    alert(111);
};

var functionName ='test';

if(typeof(window[functionName]) === "function") {
    eval(functionName + '()');
}

值得注意的是判断字符串对应的function是否存在(对于一个框架来说会灵活得多,比如说:不是每一个页面都需要获取第一版数据),我试过用jquery的$.isFunction和原生typeof方法与eval函数配合,都无法识别到对应的function,最后还是靠window[functionName]获取到function对应的变量,这样才能进行判断。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章