如何用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 相关文章推荐
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
node中的session的具体使用
Sep 14 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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导入导出CSV文件
2014/11/03 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python判断操作系统类型代码分享
2014/11/22 Python
详解Django的CSRF认证实现
2018/10/09 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
Python定义一个Actor任务
2020/07/29 Python
致100米运动员广播稿
2014/02/14 职场文书
大三学习计划书范文
2014/05/02 职场文书
职业规划实施方案
2014/06/10 职场文书
学校献爱心活动总结
2014/07/08 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python