javascript动态加载二


Posted in Javascript onAugust 22, 2012

在上一篇javascript动态加载中,提到了使用同步加载策略这一个方式来实现如

Using("jquery"); 
Using("User"); $("#ID").click(function(){ 
var user = new User(); 
user.name = "xx"; 
user.show(); 
});

由于JS是单线程的,所以同步策略带来的坏处不少,比如阻止之后的代码运行、造成浏览器假死等问题。
使用异步策略又难以实现先导包 后使用的效果。只能采用callback的形式来进行,这又不是UsingJS想要实现的,毕竟jQuery的getScript函数就可以实现这一方式。

经过一番思考,到底怎么解决导包而且是异步的方式,最后得出一个解决方案。先来看一下采用这个方案后的编程方式。

<div id="panel"></div> <script type="text/javascript" src="js/using-0.4.js"></script> 
<script type="text/javascript"> 
Using("jq"); 
Using("jq"); 
Using("Http"); 
Using.asyn(function(){ 
$("#panel").click(function(){ 
alert("Using jquery object"); 
}); 
Using.fetch("Http",function(){ 
var http = new Using.Modules.Http(); 
http.set("xxx"); 
http.show(); 
}); 
}); 
</script>

如上代码所示,总体来说与同步策略没有太大的修改,只是导入了两次jquery,这里显然是需要处理成只导包一次,并且里面增加了一个Using.asyn函数,具体这个函数做什么用,之后会分析。
都知道,异步策略,是不影响当前运行的,那么,我导入的包,假如正在加载,而其后的代码也正在运行,两者之间也刚好存在依赖关系,那么就会出现异常,怎么解决这两者之间的关系,目前唯一的解决办法就是回调函数。

按照Using的思想,必须是先导包后使用。异步的解决办法就是在模块使用之前,并不真的去进行文件拉取,而是将需要的JS文件放置到一个对象当中,比如Array,当有真正需求的时候,再逐个进行加载。来看看

Using("jq"); 
Using("jq"); 
Using("Http");

是怎么工作的。上一段代码
var moduleList = []; Using.fn = Using.prototype; 
Using.fn.initialize= function(module){ 
!this.exist(moduleList,module) ? moduleList.push(module) : null; 
}

这段代码是略去上下文,截取的Using的原型中的一个初始化方法,从代码得知,其主要的职责就是将需要加载的模块放置到moduleList中,并且进行判断,假如moduleList中含有当前需要加载的模块,那么,不进行任何操作。

那么,什么时候进行加载呢?这个就用到了之前提到的Using.asyn方法,也就是通知Using,现在需要异步加载文件了,并且,在加载完毕之后调用Using.asyn函数的回调函数。同样上一段代码

Using.asyn = function(callback){ 
Using.fn.script(callback); 
}

从代码只能简要的看出,Using.asyn函数调用了Using.fn.script函数,并且将回调函数传给了它。自然,就需要看看其又是怎么工作的。
Using.fn.script = function(callback){ 
var _this = this, 
complete = 0, 
count = moduleList.length, 
len = 0; 
if(count < 1){ 
return; 
} var loadScript = function(){ 
while(len < count){ 
_this.ajax(Using.Config[moduleList[len]],function(){ 
complete++; 
if(complete >= count){ 
callback(); 
} 
}); 
len++; 
} 
} 
!Using.Config ? _this.ajax("/js/config",function(){ 
loadScript(); 
}) : loadScript(); 
}

首先看Using.Config,就是上一篇提到的模块配置文件,以通知Using通过模块名来加载相应的模块文件。

其次就是通过内部函数loadScript来做模块文件的加载,通过一个计数器complete来判断当前已经加载了几个模块,当所有模块加载完毕,则调用回调函数。

整合以上代码,整个思路就是说,通过Using对象来导包,并记录,通过Using.asyn来通知Using进行异步加载,最后由Using.fn.script来实现异步加载并执行回调函数。

还注意到Using.fetch函数,整个函数主要是为了解决当代码运行到一定程度或者某一个需求才要加载的文件,类似于$.getScript文件,在加载之前会进行判断,判断当前需要的模块是否已经加载过,如果加载过则直接执行回调函数。

这一次UsingJS的改动,主要是为了将同步策略改为异步策略,但是同样遗留有很多问题,比如要进行类似$(document).ready,只在文档加载完毕的时候才执行,本身来说,实现这个一个效果并不难,而是编写代码时,脑子凌乱了,一时没办法解决Using.asyn多次调用时,由于异步而产生的多次加载同一个模块,又或者各种莫名其妙的问题,一时没有了头绪,故,将此问题后延,一步一步的解决之。

还有便是导包的顺序,不能任意顺序,当时也想做成任意导包,通过添加依赖关系,来做到由代码解决加载顺序,但是又想到,这个做法没有什么很大的实际意义,编码人员肯定知道文件之间的依赖关系的,如果编码的人不知道文件的加载顺序,就是使用<script>标签形式,照样会出错,而做成依赖关系不仅增加了Using的体积,更重要的是做了一件重复的事情。不知道这样理解对不对。

Javascript 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
javascript动态加载实现方法一
Aug 22 #Javascript
原生js写的放大镜效果
Aug 22 #Javascript
window.open不被拦截的实现代码
Aug 22 #Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 #Javascript
网页打开自动最大化的js代码
Aug 22 #Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 #Javascript
eval的两组性能测试数据
Aug 17 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php长字符串定义方法
2012/07/12 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php查询whois信息的方法
2015/06/08 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
深入php内核之php in array
2015/11/10 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php和html的区别点详细总结
2019/09/24 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python 基础教程之Map使用方法
2017/01/17 Python
python读写LMDB文件的方法
2018/07/02 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
Python实现随机爬山算法
2021/01/29 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
中层干部岗位职责
2013/12/18 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
网站美工岗位职责
2014/04/02 职场文书
创意婚礼策划方案
2014/05/18 职场文书
机关保密承诺书
2014/06/03 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
检讨书模板
2015/01/29 职场文书