如何用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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
Cookie 小记
Apr 01 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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
Zerg基本策略
2020/03/14 星际争霸
php笔记之常用文件操作
2010/10/12 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
js获取input标签的输入值实现代码
2013/08/05 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python 列表list使用介绍
2014/11/30 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
小小聊天室Python代码实现
2016/08/17 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python邮件发送smtplib使用详解
2020/06/16 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
实体的生命周期
2013/08/31 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
英文导游欢迎词
2014/01/11 职场文书
经理聘任证明
2015/03/02 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
React实现动效弹窗组件
2021/06/21 Javascript