如何用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 框架的擴(kuò)充性，讓后面的開發(fā)人員，可以根據(jù)每只程式的特性，在額外編寫代碼來擴(kuò)充原有JS 框架的功能。
下面 就來介紹一下，動態(tài)呼叫函數(shù) 目前就一條小龍所知應(yīng)該有下面 兩種方式
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)該比較能了解其中差異。
范例程式如下
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");
}
}
雖然這種方式會犧牲一些彈性，但相反卻可以用這種方式，來限制后續(xù)開發(fā)人員的命名原則，例如像是框架中的 Init() Load() 等等，皆可用如此方式則可以將使用方式固定下來，不至于發(fā)散出去，也方便后續(xù)的維護(hù)成本。
像是最近很熱門的 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 框架的擴(kuò)充性，讓后面的開發(fā)人員，可以根據(jù)每只程式的特性，在額外編寫代碼來擴(kuò)充原有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ù)成本。
您可能感興趣的文章:
- 基于js里調(diào)用函數(shù)時,函數(shù)名帶括號和不帶括號的區(qū)別
- javascript獲取函數(shù)名稱、函數(shù)參數(shù)、對象屬性名稱的代碼實例
- js函數(shù)名與form表單元素同名沖突的問題
- js類中獲取外部函數(shù)名的方法與代碼
- js類中獲取外部函數(shù)名的方法
- 關(guān)于動態(tài)執(zhí)行代碼(js的Eval)實例詳解
- javascript中動態(tài)函數(shù)用法實例分析
- JS函數(shù)實現(xiàn)動態(tài)添加CSS樣式表文件
- JavaScript動態(tài)插入script的基本思路及實現(xiàn)函數(shù)
- 如何實現(xiàn)動態(tài)刪除javascript函數(shù)
- JavaScript 動態(tài)添加腳本，并觸發(fā)回調(diào)函數(shù)的實現(xiàn)代碼
- JS動態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法
- 詳解js的事件處理函數(shù)和動態(tài)創(chuàng)建html標(biāo)記方法
- javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法示例
相關(guān)文章
Javascript實現(xiàn)的Map集合工具類完整實例
這篇文章主要介紹了Javascript實現(xiàn)的Map集合工具類,以完整實例形式分析了javascript實現(xiàn)map集合的構(gòu)造、查找、刪除、判斷等相關(guān)技巧,需要的朋友可以參考下2015-07-07
當(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
本文給大家匯總分享了幾種使用javascript實現(xiàn)判斷圖片路徑是否存在的代碼，都是平時項目中用到過的，這里總結(jié)一下，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)身份證取景框拍攝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JS原型與繼承操作,涉及javascript面向?qū)ο蟪绦蛟O(shè)計中原形與繼承的相關(guān)定義、實例化操作技巧,需要的朋友可以參考下2019-05-05
本文主要介紹了原生js實現(xiàn)可愛糖果數(shù)字時間特效的實例代碼，附效果展示和代碼演示。具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要給大家介紹了如何通過一篇文章讓你輕松記住js的隱式轉(zhuǎn)化的相關(guān)資料,通過在各種情況下發(fā)生的隱式類型的例子,來詳細(xì)的了解隱式類型轉(zhuǎn)換的過程,需要的朋友可以參考下2022-01-01