如何用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 相关文章推荐
js中widow.open()方法使用详解
Jul 30 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
js实现无缝循环滚动
Jun 23 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
jQuery实现购物车全功能
Jan 11 jQuery
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
js 格式化时间日期函数小结
2010/03/20 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python第三方库的安装方法总结
2016/06/06 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
自我鉴定怎么写
2014/01/12 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
运动会报道稿300字
2014/10/02 职场文书
专家推荐信怎么写
2015/03/25 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书