如何用JavaScript动态呼叫函数(两种方式)


Posted in Javascript onMay 03, 2013

近来的使用者,越来越强调 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() 等等,皆可用如此方式则可以将使用方式固定下来,不至于发散出去,也方便后续的维护成本。
Javascript 相关文章推荐
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
jquery移动listbox的值原理及代码
May 03 #Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 #Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 #Javascript
基于KMP算法JavaScript的实现方法分析
May 03 #Javascript
JS动态获取当前时间,并写到特定的区域
May 03 #Javascript
JS实现商品倒计时实现代码
May 03 #Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 #Javascript
You might like
PHP实现简单登录界面
2019/10/23 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
详细介绍Python的鸭子类型
2016/09/12 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python numpy数组中的复制知识解析
2020/02/03 Python
结束运行python的方法
2020/06/16 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
大学生入党思想汇报
2014/01/14 职场文书
新闻编辑求职信
2014/04/09 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
初中中等生评语
2014/12/29 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
党支部意见范文
2015/06/02 职场文书
老人院义工活动感想
2015/08/07 职场文书