如何用JavaScript动态呼叫函数(两种方式)
更新时间：2013年05月03日 16:07:46 作者：
下面介绍一下动态呼叫函数目前应该有下面两种方式，它们之间的使用及对比，感兴趣的朋友可以研究下，希望可以帮助到你
近来的使用者，越来越强调 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() 等等，皆可用如此方式则可以将使用方式固定下来，不至于发散出去，也方便后续的维护成本。
像是最近很热门的 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() 等等，皆可用如此方式则可以将使用方式固定下来，不至于发散出去，也方便后续的维护成本。
您可能感兴趣的文章:
- 基于js里调用函数时,函数名带括号和不带括号的区别
- javascript获取函数名称、函数参数、对象属性名称的代码实例
- js函数名与form表单元素同名冲突的问题
- js类中获取外部函数名的方法与代码
- js类中获取外部函数名的方法
- 关于动态执行代码(js的Eval)实例详解
- javascript中动态函数用法实例分析
- JS函数实现动态添加CSS样式表文件
- JavaScript动态插入script的基本思路及实现函数
- 如何实现动态删除javascript函数
- JavaScript 动态添加脚本，并触发回调函数的实现代码
- JS动态插入并立即执行回调函数的方法
- 详解js的事件处理函数和动态创建html标记方法
- javascript实现根据函数名称字符串动态执行函数的方法示例
相关文章
这篇文章主要介绍了Javascript实现的Map集合工具类,以完整实例形式分析了javascript实现map集合的构造、查找、删除、判断等相关技巧,需要的朋友可以参考下2015-07-07
当大家使用window.onload执行一个函数时，必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多，所以需要很多时间下载。更令人尴尬的是，当网页文档（或者说Dom）已经加载完毕,而图片尚未加载完毕，很多用户已经开始浏览网页，但这时很多由window.onload所触发的函数不能执行，这就导致一部分功能不能完美地给用户使用，更严重的是会给用户留下不好的印象！2008-05-05
这篇文章主要介绍了微信小程序实现蓝牙设备搜索及连接功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法,涉及javascript针对页面元素及样式属性的相关操作技巧,需要的朋友可以参考下2015-08-08
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
在阅读本博文之前，请先阅读《理解Javascript_13_执行模型详解》 在'执行模型详解'中讲到了关于作用域分配的问题，这一篇博文将详细的说明函数对象、作用域链与执行上下文的关系。2010-10-10
本文给大家汇总分享了几种使用javascript实现判断图片路径是否存在的代码，都是平时项目中用到过的，这里总结一下，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了微信小程序实现身份证取景框拍摄，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了JS原型与继承操作,涉及javascript面向对象程序设计中原形与继承的相关定义、实例化操作技巧,需要的朋友可以参考下2019-05-05
本文主要介绍了原生js实现可爱糖果数字时间特效的实例代码，附效果展示和代码演示。具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
这篇文章主要给大家介绍了如何通过一篇文章让你轻松记住js的隐式转化的相关资料,通过在各种情况下发生的隐式类型的例子,来详细的了解隐式类型转换的过程,需要的朋友可以参考下2022-01-01
最新评论