如何用JavaScript動態(tài)呼叫函數(shù)(兩種方式)

2019-11-20 22:45:04

字體：大中小

供稿：網(wǎng)友

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

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

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

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

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

下面就來介紹一下，動態(tài)呼叫函數(shù) 目前就一條小龍所知應(yīng)該有下面兩種方式

復(fù)制代碼代碼如下:

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

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

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

復(fù)制代碼代碼如下:

 
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"]); 
} 
} 

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

復(fù)制代碼代碼如下:

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

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

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

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