如何用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 框架使用教程 AJAX篇
Oct 11 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 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
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python urllib爬虫模块使用解析
2019/09/05 Python
pymysql的简单封装代码实例
2020/01/08 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python导入库的具体方法
2020/06/18 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
大专生自荐信
2013/10/04 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
年度考核自我评价
2014/01/25 职场文书
不同意离婚答辩状
2015/05/22 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python