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

近來的使用者，越來越強調 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() 等等，皆可用如此方式則可以將使用方式固定下來，不至於發散出去，也方便後續的維護成本。