如何用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 相关文章推荐
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
js+css实现导航效果实例
Feb 10 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
封装属于自己的JS组件
Jan 27 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
JS实现倒计时图文效果
Nov 17 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常用函数 推荐收藏保存
2010/02/21 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python基础教程之udp端口扫描
2014/02/10 Python
Python中super关键字用法实例分析
2015/05/28 Python
flask中的wtforms使用方法
2018/07/21 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
法律进社区实施方案
2014/03/21 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
综治宣传月活动总结
2014/04/28 职场文书
python实现监听键盘
2021/04/26 Python
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP