seaJs学习笔记之seaJs的异步加载和加载多个js文件
来源:互联网 发布:golang面试题 编辑:程序博客网 时间:2024/04/30 16:00
到目前为止,seaJs的大部分使用方法已经为大家介绍完了,有关javascript的模块化大部分功能也已经向大家介绍完了。下面再向大家深入的介绍一下seaJs。
Define除了可以对回调函数进行操作之外,还可以对数据进行加载。Define中的第三个参数module主要是辅助调试的作用,它是对模块内部进行调试作用。可以通过module可以获得这个模块的id,可以获取到这个模块依赖哪些模块的数组等辅助性的功能在这里不做过多介绍。
在require的接口也提供了异步的接口(require.async())。那么这种异步的接口和同步的接口有什么区别呢?比如同步的接口要是想继续执行下面的函数方法,必须得需要同步的js文件加载好了才可以往下进行。那么异步的形式,有可能没加载完成就继续执行下面的代码了,是个异步的形式。所以模块化提供了两种依赖方式,一种是同步的(require()),一种是异步的(require.async())。异步的好处就是可以不用去等待更长的时间。就像之前做过的webQQ的一些依赖就可以用异步的来进行。代码还是之前的在这里就不粘贴了,想了解代码的小伙伴儿去前面翻一翻就能找到了。只看网络加载js的情况。如下图(图1-1)
图1-1
从上图不难看出scale2.js已经加载好了。这个js就可以异步的来做。因为我们点击按钮的时候才会出来。到这个页面的时候不一定会点击,所以scale2.js就可以异步的去加载。所以就可以改成异步的。
异步加载scale2.js的main7.js的javascript代码
//A小伙伴儿开发的模块define(function (require, exports, module) {var oInp = document.getElementById("inp1");var oDiv1 = document.getElementById("div1");var oDiv2 = document.getElementById("div2");var oDiv3 = document.getElementById("div3");//A小伙伴儿通过依赖require进行调用,依赖B小伙伴儿开发的drag.jsrequire("./drag3.js").drag(oDiv3);//A小伙伴儿开发的弹层oInp.onclick = function () {oDiv1.style.display = "block";//调取C小伙伴儿的拖拽改变层大小模块//require("./scale2.js").scale(oDiv1, oDiv2);//异步进行加载scale2.js,不点击不加载require.async("./scale2.js", function (ex) {ex.scale(oDiv1, oDiv2);})}})
异步加载scale2.js的HTML代码
<!doctype html><html dir="ltr" lang="zh-CN"><head><meta charset="utf-8"><title>梦龙小站</title><style type="text/css">#div1 {width:200px;height:200px;background:red;position:absolute;display:none;}#div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;}#div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;}</style><!-- 引入seaJs --><script type="text/javascript" src="sea/sea.js"></script><!-- 引入主程序 --><script type="text/javascript">seajs.use("./js/main7.js")</script></head><body><input type="button" value="点击" id="inp1" /><div id="div1"><div id="div2"></div></div><div id="div3"></div></body></html>
异步加载scale2.js的预览地址
http://localhost/seaJs/j/ex/g.html
异步加载scale2.js的网络加载js图
刷新不难看出,刚刷新完已经看不到scale2.js的加载了。只有点击之后才能看到。这样我们可以看做是按需载入。这样对一些大型的开发,有些开始不用就可以稍后加载进来,让加载的时间缩短很多。
接下来再说说seajs.use。Seajs.use不仅可以加载js文件,加载css 文件也是可以的,包括也可以加载多个js文件。小例子如下
加载多个js的oA.js的javascript代码
define(function (require, exports, module) {function oA () {console.log(1)}exports.oA = oA;})
加载多个js的oB.js的javascript代码
define(function (require, exports, module) {function oB () {console.log(2)}exports.oB = oB;})
加载多个js的HTML代码
<!doctype html><html dir="ltr" lang="zh-CN"><head><meta charset="utf-8"><title>梦龙小站</title><!-- 引入seaJs --><script type="text/javascript" src="sea/sea.js"></script><!-- 引入主程序 --><script type="text/javascript">seajs.use(["./js/oA.js", "./js/oB.js"], function (ex1, ex2) {ex1.oA();ex2.oB();})</script></head><body></body></html>
加载多个js的预览地址
http://www.leemagnum.com/seaJs/j/ex/h.html
加载多个js的预览效果
刷新不难看出,已经分别调到oA和oB的函数了。seaJs学习笔记之seaJs的异步加载和加载多个js文件就为大家介绍到这里。感谢大家对梦龙小站的支持,更多有关seaJs的相关内容敬请关注seaJs学习笔记的更新。
- seaJs学习笔记之seaJs的异步加载和加载多个js文件
- seaJs学习笔记之seaJs的准备
- 异步加载之seajs,同样值得拥有
- js模块加载seajs
- seaJs学习笔记之seaJs配置方法
- requireJS&seaJS模块加载器原理:<script>标签加载外部js文件用到的onload、onerror和onreadystatechange事件
- seajs模块的加载启动
- SeaJS 按需加载js模块
- seaJs 加载器简介
- SeaJS 模块加载器
- seajs加载流程图
- seajs加载jquery
- seajs模块加载
- seaJs的模块定义和模块加载浅析
- SeaJS 中的 exports 和模块加载
- SeaJS 中的 exports 和模块加载
- seaJs学习笔记之seaJs实现webQQ部分功能1
- seaJs学习笔记之seaJs实现webQQ部分功能2
- mac上的键盘生活——快捷键列表
- 阅读人生
- 做最好的自己——小笔记一枚
- Makefile
- 2013年08月03日日志
- seaJs学习笔记之seaJs的异步加载和加载多个js文件
- 关于cocos2d和cocos2dx,还有iOS上的cocos2d的ARC问题
- oracle分析函数之windowing_clause--rows
- 2013年08月04日日志
- 关于某控件的delegate
- 感觉关于cocos,我还可以有更多的方法去长进
- 2013年08月05日日志
- 2013年08月06日日志
- mac上的键盘生活——输入法键位设置小技巧以及去掉自带输入法