如何用JavaScript動態呼叫函數(兩種方式)_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 "
");
}
$(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 "
"); } $( function () {

var fnName = "myAlert";

var fn = window[fnName];
if (typeof fn == "function") {
fn.apply(window, [" window - test"]);
}
}


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

複製程式碼

程式碼如下: function myAlert(value) { document.write("myAlert - " value "
" ); } $(function () {

if (typeof (myAlert) == 'function') {

myAlert("typeof - test");
}
}


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