如何用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 ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
js命名空间写法示例
Dec 18 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
js操作二进制数据方法
Mar 03 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
基于javascript的无缝滚动动画1
Aug 07 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python将unicode转为str的方法
2017/06/21 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
物业管理求职自荐信
2013/09/25 职场文书
大学生专科毕业生自我评价
2013/11/17 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
说明书范文
2014/05/07 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
2019各种保证书范文
2019/06/24 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python