快捷導(dǎo)航

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

更新時間：2013年05月03日 16:07:46 作者：

下面介紹一下動態(tài)呼叫函數(shù)目前應(yī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ù)的維護(hù)成本。

您可能感興趣的文章:

相關(guān)文章

Javascript實現(xiàn)的Map集合工具類完整實例
這篇文章主要介紹了Javascript實現(xiàn)的Map集合工具類,以完整實例形式分析了javascript實現(xiàn)map集合的構(gòu)造、查找、刪除、判斷等相關(guān)技巧,需要的朋友可以參考下
2015-07-07
Dom加載讓圖片加載完再執(zhí)行的腳本代碼
當(dāng)大家使用window.onload執(zhí)行一個函數(shù)時，必須要等到頁面上的圖片等信息全部加載完畢之后才執(zhí)行的。但很多時候圖片的數(shù)量比較多，所以需要很多時間下載。更令人尷尬的是，當(dāng)網(wǎng)頁文檔（或者說Dom）已經(jīng)加載完畢,而圖片尚未加載完畢，很多用戶已經(jīng)開始瀏覽網(wǎng)頁，但這時很多由window.onload所觸發(fā)的函數(shù)不能執(zhí)行，這就導(dǎo)致一部分功能不能完美地給用戶使用，更嚴(yán)重的是會給用戶留下不好的印象！
2008-05-05
微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
js控制元素顯示在屏幕固定位置及監(jiān)聽屏幕高度變化的方法
這篇文章主要介紹了js控制元素顯示在屏幕固定位置及監(jiān)聽屏幕高度變化的方法,涉及javascript針對頁面元素及樣式屬性的相關(guān)操作技巧,需要的朋友可以參考下
2015-08-08
理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個閉包
在閱讀本博文之前，請先閱讀《理解Javascript_13_執(zhí)行模型詳解》在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問題，這一篇博文將詳細(xì)的說明函數(shù)對象、作用域鏈與執(zhí)行上下文的關(guān)系。
2010-10-10
完美兼容多瀏覽器的js判斷圖片路徑代碼匯總
本文給大家匯總分享了幾種使用javascript實現(xiàn)判斷圖片路徑是否存在的代碼，都是平時項目中用到過的，這里總結(jié)一下，有需要的小伙伴可以參考下。
2015-04-04
微信小程序?qū)崿F(xiàn)身份證取景框拍攝
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)身份證取景框拍攝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
JS原型與繼承操作示例
這篇文章主要介紹了JS原型與繼承操作,涉及javascript面向?qū)ο蟪绦蛟O(shè)計中原形與繼承的相關(guān)定義、實例化操作技巧,需要的朋友可以參考下
2019-05-05
原生js實現(xiàn)可愛糖果數(shù)字時間特效
本文主要介紹了原生js實現(xiàn)可愛糖果數(shù)字時間特效的實例代碼，附效果展示和代碼演示。具有一定的參考價值，下面跟著小編一起來看下吧
2016-12-12
一篇文章讓你輕松記住js的隱式轉(zhuǎn)化
這篇文章主要給大家介紹了如何通過一篇文章讓你輕松記住js的隱式轉(zhuǎn)化的相關(guān)資料,通過在各種情況下發(fā)生的隱式類型的例子,來詳細(xì)的了解隱式類型轉(zhuǎn)換的過程,需要的朋友可以參考下
2022-01-01