如何用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 文章截取部分无损html显示实现代码
May 04 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
javascript 节点排序 2
Jan 31 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
vue-model实现简易计算器
Aug 17 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中动态HTML的输出技术
2006/10/09 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python 统计代码行数简单实例
2017/05/04 Python
python连接数据库的方法
2017/10/19 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
清扬洗发水广告词
2014/03/14 职场文书
期中考试反思800字
2014/05/01 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
环卫工作汇报材料
2014/10/28 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
教你怎么用Python操作MySql数据库
2021/05/31 Python