如何用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 相关文章推荐
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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列出MySQL中所有数据库的方法
2015/03/12 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
scrapy爬虫完整实例
2018/01/25 Python
浅析Python数据处理
2018/05/02 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Selenium的使用详解
2018/10/19 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
python实现简单文件读写函数
2021/02/25 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
学校节能减排倡议书
2014/05/16 职场文书
市场推广策划方案
2014/06/02 职场文书
宣传普通话标语
2014/06/27 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
史上最牛辞职信
2015/05/13 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书