JS根據動態生成的字串,驗證是否存在對應function並執行
阿新 • • 發佈:2018-12-23
這個需求是在我搭建前端專案框架的時候遇到的:
由於我走的是前後端完全分離的路線,那前端部分少了後端的支援,所以就少不了要做點路由、分發之類的工作,而在用路由跳轉到新的“頁面”後,我需要執行相應的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對應的變數,這樣才能進行判斷。