javascript动态加载二_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的体积,更重要的是做了一件重复的事情。不知道这样理解对不对。

时间: 2024-07-28 23:05:46

javascript动态加载二_javascript技巧的相关文章

JavaScript异步加载浅析_javascript技巧

前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点-- 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 深入理解脚本加载相关的方方面面问题,不仅利于解决实际问题,更加利于对性能优化的把握并执行.   先看随便一个script标签代码-- 复制代码 代码如下: <script src="js/myApp.js"></script> 如果放在<head>上面

学习javascript文件加载优化_javascript技巧

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

Javascript 异步加载详解(浏览器在javascript的加载方式)_javascript技巧

一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. js 之所以要同步执行,是因为 js 中可能有输出 document 内容.修改dom.重定向等行为,所以默认同步执行才是安全的. 以前的一般建议

如何实现JavaScript动态加载CSS和JS文件_javascript技巧

项目中需要用到动态加载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技巧

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

JavaScript模仿Pinterest实现图片预加载功能_javascript技巧

前言 对于Pinterest网站,从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局.但是今天,给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节. 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果. 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会

用headjs来管理和加载js 提高网站加载速度_javascript技巧

现在有许多成熟的js模块加载器,比如requirejs和seajs等,但是对一些小的项目来说,它们的功能可能太过于"强大",也许我们只是想要有一个能动态加载js的功能,或许我们只是想装B一下,让自己写出的页面没有一大堆的<script src="a.js"></script>这样的东西.前面说的两种js加载器都是更强调模块性,也就是更强调js文件的组织和管理,更适用于大的项目. 就像刚刚说的,我只想有一个js文件加载器,我只需提供给它一个js

JavaScript动态加载js文件

/********************************************************************* * JavaScript动态加载js文件 * 说明: * 之前没有使用require来动态加载js文件,自己模仿实现了一个,参考文档2中 * 有jQuery的方法,以及等效原型. * * 2017-8-28 深圳 龙华樟坑村 曾剑锋 **************************************************************

JavaScript动态加载CSS的三种方法

css|javascript|动态|加载 如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助. 第一种:一般用在外部CSS文件中加载必须的文件 程序代码@import url(style.css);/*只能用在CSS文件中或者style标签中*/ 第二种:简单的在页面中加载一个外部CSS文件  程序代码document.createStyleSheet(cssFile); 第三种:用createElement方法创建CSS的Link标签  程