javascript动态加载二

在上一篇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的体积，更重要的是做了一件重复的事情。不知道这样理解对不对。

赞 (0)

相关推荐

  • javascript开发随笔二 动态加载js和文件

    这时候最好的做法就是按需引入,动态引入组件js和样式,文件load完成后调用callback,运行js.代码还是很简便的 1. 判断文件load完成.加载状态ie为onreadystatechange,其他为onload.onerror 复制代码 代码如下: if(isie){ Res.onreadystatechange = function(){ if(Res.readyState == 'complete' || Res.readyState == 'loaded'){ Res.onrea

  • 非阻塞动态加载javascript广告实现代码

    复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

  • JS 动态加载脚本的4种方法

    如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4种比较常用的方法,大家可以根据情况选择,最后我们 将会给推荐一个.1.直接document.write 复制代码 代码如下: <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 复

  • jquery动态加载图片数据练习代码

    jquery动态加载图片数据练习代码

    这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片. 思路: 1.首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片. 2.建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求. 3.然后当然要用到数据库啦,包括图片的路径,描述等信息.每张小图片路径应该对应一张大图

  • javascript动态加载三

    之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现. 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离. 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件.先接一下上一篇遗留下来的问题 1.页面Ready之后进行加载 2.随意添加模块 进行加载 看第一个问题,这个问题其实还是比较简单的,主要是监听页面的DOMContentLoaded事件,这里就不多讲解

  • javascript 动态加载 css 方法总结

    1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'

  • js动态加载以及确定加载完成的代码

    代码如下: 复制代码 代码如下: var otherJScipt = document.createElement("script"); otherJScipt = document.createElement("script"); otherJScipt.setAttribute("type", "text/javascript"); otherJScipt.setAttribute("src", &qu

  • javascript动态加载实现方法一

    现在也有很多JS动态加载的框架,比如In.js.但是这种并不是我想要的编写方式,我来说说我的想法. 先来一段java代码 复制代码 代码如下: import Biz.User; User u = new User(); u.show(); 按流程就是导包.实例化.调用. JS是做不了导包的,或者说代码意义上的导包,一般只是在页面上进行script标签的引入. 那么 先假设需要写成这样 复制代码 代码如下: Using("User"); var u = new User(); u.sho

  • javascript动态加载二

    在上一篇javascript动态加载中,提到了使用同步加载策略这一个方式来实现如 复制代码 代码如下: Using("jquery"); Using("User"); $("#ID").click(function(){ var user = new User(); user.name = "xx"; user.show(); }); 由于JS是单线程的,所以同步策略带来的坏处不少,比如阻止之后的代码运行.造成浏览器假死等问题

  • 使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明. 希望下面的方法对你有帮助. (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ documen

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • 如何实现JavaScript动态加载CSS和JS文件

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =

  • JavaScript动态加载重复绑定问题

    JavaScript动态加载重复绑定问题

    前言 在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图: 但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除. 经过排查,终于发现问题所在. 正文 当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等.还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,

  • Android 动态加载二维码视图生成快照的示例

    Android 动态加载二维码视图生成快照的示例

    1.需求背景 需要实现一个动态加载但不显示出来的视图,且该视图上有个动态生成的二维码,最后用其去生成一张快照(也就是图片). (常见这种情况是来源于"图片分享"的功能需求,与普通图片分享不同在于,该快照图片是动态加载不显示的.) 2.需求功能拆解 动态二维码的实现 动态视图生成快照的实现 3.踩坑点提要 获取不到动态视图的bitmap 无法获取最新动态视图的bitmap 4.开发实现 动态加载的视图的布局文件代码: <?xml version="1.0" en

  • JavaScript 动态加载脚本和样式的方法

    一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script = document.createElement('script'); // 创建script

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

随机推荐