如何用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的颜色选择插件实例代码
Oct 02 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
Vue实现简单计算器案例
Feb 25 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自动生成月历代码
2006/10/09 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
javascript实现yield的方法
2013/11/06 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
魅力教师事迹材料
2014/01/10 职场文书
九年级物理教学反思
2014/01/29 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
布达拉宫导游词
2015/02/02 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
收入证明申请书
2015/06/12 职场文书
python字符串常规操作大全
2021/05/02 Python
使用HttpSessionListener监听器实战
2022/03/17 Java/Android