如何用JavaScript動態呼叫函數(兩種方式)

2019-11-20 22:45:04

字體：大中小

來源：轉載

供稿：網友

近來的使用者，越來越強調 UI 介面的互動，漸漸原本對一條小龍來說只是配角的 JavaScript (以下簡稱 JS) 變成的主角，占了很大一塊的用途。

像是最近很熱門的 ASP.NET 的 MVC 里面就直接Include JQuery 可見一般。

MVC 用了一陣子，一條小龍甚至感覺 MVC 中的 Controller 根本就是 JS 在控制的，這樣怎么把 UI 工作獨立，切給美工用，感覺也是蠻大的疑問。
看來后面的美工，只會繪圖、拉畫面是不行的，一定要會 JS、Flash 等等前端控制語言，才會吃香。

這邊，一條小龍介紹一下，如何用 JavaScript 動態呼叫函數，這個時候需要先介紹一下前提，這樣讀者才能了解，下面的技術能應用在哪里。
一般會使用到動態呼叫，基本上都是后端動態產生 JS的程式碼，在由前端的 JS 框架，來呼叫使用。

會需要這樣做的用途，不外乎，動態設定 UI 的欄位、樣式、資料等等，另外一種可能，就是保留 JS 框架的擴充性，讓后面的開發人員，可以根據每只程式的特性，在額外編寫代碼來擴充原有JS 框架的功能。

下面就來介紹一下，動態呼叫函數目前就一條小龍所知應該有下面兩種方式

復制代碼代碼如下:

 
function myAlert(value) { 
document.write("myAlert - " + value + "<br>"); 
} 
$(function () { 
eval("myAlert")("test"); 
window["myAlert"]("test"); 
} 

一般來說，比較正規還是要使用 window 這個object 來查詢 function 是否存在，用 eval 彈性太大比較有風險。

而且直接照上述來實作，會有蠻大風險，一但被呼叫的函數不存在，整個畫面就會出錯，所以在使用上，需再加上判斷式，從這角度這時eval 就無法使用了，因為使用 eval 就是要產生 function 這個 object 了，而 window 只是查詢有無 object，所以當 function 不存在，eval 就會直接報錯了，這樣讀者應該比較能了解其中差異。
范例程式如下

復制代碼代碼如下:

 
function myAlert(value) { 
document.write("myAlert - " + value + "<br>"); 
} 
$(function () { 
var fnName = "myAlert"; 
var fn = window[fnName]; 
if (typeof fn == "function") { 
fn.apply(window, ["window - test"]); 
} 
} 

最后，是我自己又另外想出的一種方式，如下

復制代碼代碼如下:

 
function myAlert(value) { 
document.write("myAlert - " + value + "<br>"); 
} 
$(function () { 
if (typeof (myAlert) == 'function') { 
myAlert("typeof - test"); 
} 
} 

雖然這種方式會犧牲一些彈性，但相反卻可以用這種方式，來限制后續開發人員的命名原則，例如像是框架中的 Init() Load() 等等，皆可用如此方式則可以將使用方式固定下來，不至于發散出去，也方便后續的維護成本。

上一篇：5秒后跳轉效果(setInterval/SetTimeOut)

下一篇：jquery移動listbox的值原理及代碼