1. 程式人生 > >JS根據動態生成的字串,驗證是否存在對應function並執行

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對應的變數,這樣才能進行判斷。