快捷搜索:

JavaScript中的对象动态加载技术

什么是JavaScript工具动态加载

JavaScript动态加载(JavaScript Object Dynamic Loading) - 之以是叫做动态,是应为其有别与平日的静态加载形式。

范例的JavaScript静态加载要领,是经由过程标签将我们可能必要的所有JS文件依次嵌入到一个HTML页面中,当浏览器履行到 标签,就会到我们指定的地方去加载JavaScript并运行,这时,文件中定义的无论措施、类、工具等,已经存在与浏览器,等待被应用。除非HTML页面被Unload,否则这些器械就不停存在。

而范例的动态加载要领,是不必要任何提前的筹备,只有当必要一个JavaScript工具来为我们办事时,我们就临时去加载它所属的JS文件,然后应用它,应用完毕,销毁即可。正所谓“呼之即来,挥之即去”。

就由于这“呼之即来,挥之即去”的能力,使得JavaScript真正的活了起来。

JS动态加载办理了什么问题

给系统减了肥:可以将不需要的JavaScript代码延迟加载,未用到的功能不加载。

模块化得以实现:可以将底今大年夜块的功能或类,分化成合理的小块,便于治理与掩护。

方便的值通报:双向传值,无拘束。基于JSON,可以通报大年夜工具。

可以实现Service:可以基于Service理念,经由过程核心JavaScript工具应用其他的办事功能工具,完成营业的组装。

JS动态加载应该有什么能力

可以异步的,或同步的,随心所遇加载外部JS文件。

加载进来的JS文件的内容可以有效治理,包括感化域,开放性,生命周期。

可以支持面向工具,以工具为基础点而不是措施或变量等。

有好的封装,可以经由过程一个句柄操作全部被加载的JS。

传统JS动态加载的实现

关于JS动态加载的实现,我见过很多种措施。早期的时刻,人们想过很多法子。这些法子有自己发挥的空间,可以办理一些问题。然则都或多或少的存在弊端,以及实现上的繁琐,最大年夜的问题便是,它们基础都不是面向工具的。下面就枚举主要的2类:

用嵌套iFrame的要领来加载JS文件:这种要领早期最多,经由过程在页面中包孕一个iFrame,来调用一个另一个包孕了标签的HTML页面,实现JS的动态加载。最大年夜的弊端便是无法通报参数,实现较繁琐。

临时创建标签:这种要领有很多人用。使用JavaScript操作页面Dom模型,临时创建一个标签,然后appendChild到上,或者动态改变已存在标签的 src属性。弊端是只能同步加载,必须等待JS文件被读取完毕,才能进行下一步事情。且传值是经由过程调用被加载的JS内的变量实现,双向传值艰苦,感化域弱化。

可以看出以上两种常见要领,都无法满意我们的要求。

更优秀的办理规划

得益于神奇如阿拉丁神灯般的 eval() ,我们就可以实现以上所有的希望 :) 。

绕了那么大年夜圈子,想了那么多法子。着实最简单的措施就在眼皮底下.

第一部分-调用方 main.js文件:

//动态读取JS工具的措施

//@FileName:要读取的JS工具URL,可所以本地路径。

//@TheParameters:必要通报给被加载工具的参数,可所以任何工具。

function loadJSObj(FileName,TheParameters){

Ext.Ajax.request({//异步调用措施

url: FileName,//调用URL

scope: this,

success: function(response){//成功后的回调措施response为返回内容

var remoteObj = eval(response.responseText);

var mod = null;

mod = new remoteObj(TheParameters);

return mod;

},

failure:function(){//掉败后的回调措施

alert(name+' - 读取掉败,请反省收集或文件。');

return null;

}

});

}

这段代码应用Extjs类库封装的异步读取措施Ext.Ajax.request()。只是为了方便。假如你应用未封装的XMLHttpRequest工具也没什么问题。

先大年夜概说下loadJSObj措施干的工作是:

用XMLHttpRequest来了一次Ajax哀求,将想要加载的JS文件源代码读过来。

使用eval函数将刚才读到的远程JavaScript类实例化成为本地的工具(时代通报了构造参数)。

返回这个工具,供应用。

此处关键的代码在于

var remoteObj = eval(response.responseText);

var mod = null;

mod = new remoteObj(TheParameters);

return mod;

可以看到,我们直接将被读取的JS文件传进eval 函数履行。并返回一个叫做 remoteObj的器械,这个器械着实便是被读取的JS的句柄(一个类,定义在被读取JS中的类,后面会具体说到),经由过程将remoteObj实例化,即mod = new remoteObj(参数) 就可以经由过程 mod 工具对被读取的JS为所欲为了操作了。

如斯一来,远程的JS就被我们按照参数中指定的要求实例化成本地工具了,可以应用了。然则…这只是一相甘愿宁肯。由于被读取的JS得相符我们的要求,才能“两厢甘愿宁肯”,终极获得结果…

第二部分 - 被调用方 login.js文件:

要想相符要求,被读取的JS文件也必须按照必然的规则来写。

//用户登录类

Ext.extend(eueuy.module,{

init:function(){

//==Variables==//

var userName = this.parameters.un;//获取通报进来的参数un

var passWord = this.parameters.pwd;//获取通报进来的参数pwd

//==Methods==//

//登录措施

function loginOn(){

if (userName=='eueuy' || passWord=='123'){

return true;

}else{

return false;

}

}

//登出措施

function loginOff(){

alert('迎接再来');

}

}

});

我们先看看这个登录类干了什么:

承袭自eueuy.moudle,并重写了构造函数。

接管了2个通报进来的初始化参数,un 和 pwd。

定义了2个成员措施和一个成员变量。

没有任何特其余器械,便是Ext.extend措施用的有点怪,差别于寻常的 XXX = Ext.extend();

没有赋值符号和类名。这恰好是一个关键点:

类的名字必须留空

为什么这样写?由于这样一来,这个没有类名的类, 就可以在eval()函数履行他的时刻,再给他定义类名,这样就将类名的定义留在了调用的时刻,也便是main.js文件中。这个小技术也将使调用方(main.js)可以直接节制被调用方(login.js)的类。

着末,就可以在main.js顶用下面的代码,经由过程动态加载用户登录类,进行用户登录验证的事情:

var loginModel = loadJSObj('http://www.eueuy.name/project1/js/login.js',{un:’eueuy’,pwd:’123’});

if (loginModel.loginOn()){

alert('登录成功,迎接'+loginModel.userName);

}else{

alert('登录掉败,差错的用户名密码');

}

可以看到,在上面的代码中,我们经由过程loginModel这个变量,节制了login.js中的登录类,可以造访此中的措施loginOn() ,还可以造访此中的变量 userName。

结尾

至此,工具动态加载技巧的理论已经解说的差不多了。

转自:http://www.cnblogs.com/yueue/archive/2010/04/28/1723014.html

您可能还会对下面的文章感兴趣: