如何用JavaScript动态呼叫函数(两种方式)

近来的使用者,越来越强调 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() 等等,皆可用如此方式则可以将使用方式固定下来,不至于发散出去,也方便后续的维护成本。

(0)

相关推荐

  • 如何实现动态删除javascript函数

    我现在通过下面:                 o=oDOM.createElement("script");                 o.text=document.all.checkrule.value;                 oDOM.body.appendChild(o); 可以增加一个checkrule函数, 但我多次执行这段代码会多次插入这个checkrule函数,请问我怎样先删除该新增的函数. ps:oDOM表示的是另一个页面的document对象,不

  • javascript实现根据函数名称字符串动态执行函数的方法示例

    本文实例讲述了javascript实现根据函数名称字符串动态执行函数的方法.分享给大家供大家参考,具体如下: <script> //动态函数调用,调用者使用"targetFunction" function targetFunction() { alert(11111); return 9; } test("myFunc"); function test(funcName) { if(typeof(eval(funcName)) == "fun

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

  • js类中获取外部函数名的方法

    比如我们要在一个类中设定一个方法可以根据调入一个方法保存在类变量中,等需要的时候可以通过访问类变量来得到. 通常如果我们生成一个实例 如:var temp=new TopnetTree(); 如果我们通过设定属性的方式来传入一个方法,会发现传入的是一个函数的内容,而非函数名. 如temp.fileAction=fnTest; //fnTest是一个函数 于是偶就写了一个方法来实现此功能. 通过arguments来判断判断传入内容: 实现如下功能: 传入内容为空,不执行任何内容 传入一个参数,则表

  • JavaScript动态插入script的基本思路及实现函数

    在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是: 1.动态创建一个script标签,设置其src属性,type属性等 2.将script节点插入页面,加载js文件 即相当于将<script type="text/javascript" src="xxx.js"></script>添加到了页面,只不过这个过程是动态完成的,为此特意封装了一个函数来实现: 复制代码 代码如下: // 动态插入script标签 fu

  • 关于动态执行代码(js的Eval)实例详解

    熟悉javascript的朋友对Eval()函数可能都不会陌生,我们可以用它来实现动态代码的执行,我自己甚至写过一个网页专门用来计算算术表达式的,计算能力上比google.baidu的计算器还要好一些,至少精度要高,但是如果超出了四则运算的话,表达式的形式会复杂很,比如以百度给出的例子: log((5+5)^2)-3+pi需要写成Math.log(Math.pow(5+5,2))*Math.LOG10E-3+Math.PI才能用Eval进行计算,对于这一点我还没有想到理想的解决方案.好了,这不是

  • JS动态插入并立即执行回调函数的方法

    本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • js类中获取外部函数名的方法与代码

    比如我们要在一个类中设定一个方法可以根据调入一个方法保存在类变量中,等需要的时候可以通过访问类变量来得到. 通常如果我们生成一个实例 如:var temp=new TopnetTree(); 如果我们通过设定属性的方式来传入一个方法,会发现传入的是一个函数的内容,而非函数名. 如temp.fileAction=fnTest; //fnTest是一个函数 于是偶就写了一个方法来实现此功能. 通过arguments来判断判断传入内容: 实现如下功能: 传入内容为空,不执行任何内容 传入一个参数,则表

  • javascript获取函数名称、函数参数、对象属性名称的代码实例

    一.获取函数名称的3种实现方法实例1: 在js权威指南中看到的一个方法: Function.prototype.getName = function(){    return this.name || this.toString().match(/function\s*([^(]*)\(/)[1]} 实例2: 如果当前函数是有名函数,则返回其名字,如果是匿名函数则返回被赋值的函数变量名,如果是闭包中匿名函数则返回"anonymous". 复制代码 代码如下: var getFnName

  • JavaScript 动态添加脚本,并触发回调函数的实现代码

    function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || scri

  • 详解js的事件处理函数和动态创建html标记方法

    1 HTML的事件属性 全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发的事件(应用到 <body> 标签),常用的为onload. b. Form事件,由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):常用的为onblur.onfocus.onselect.onsubmit. c. keybord事件 d.Mouse

  • JS函数实现动态添加CSS样式表文件

    先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"

  • javascript中动态函数用法实例分析

    本文实例讲述了javascript中动态函数用法.分享给大家供大家参考.具体分析如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态函数</title> <script

  • js函数名与form表单元素同名冲突的问题

    今天在导出Excel的时候用了Form 表单的input hidden 来区分导出和搜索.开始的时候js中的onClick事件的函数名 和 hidden 中的 id 命名一样.结果导致报错:调用函数的那一行对象不支持此属性. 找了很长时间都找不出原因,开始的时候一直以为是写错了某个字母,才发现js函数根本没有执行.后来没有办法直接调用了别的函数,发现就有用了,认为是函数名的原因,改了函数名才有用了.然后再将input中的id改成很函数名一样,又出现报错了.在没有下例验证之前,还一直以为是Thin

随机推荐