如何用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 24 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JS常用知识点整理
2017/01/21 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python Xpath语法的使用
2020/11/26 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
广告设计应届生求职信
2014/03/01 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
负责培养人意见
2015/06/05 职场文书
恰同学少年观后感
2015/06/08 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python