seaJs学习笔记之seaJs的异步加载和加载多个js文件

最新推荐文章于 2024-08-27 01:05:41 发布

云圣天

最新推荐文章于 2024-08-27 01:05:41 发布

阅读量1w

点赞数 3

分类专栏： seaJs学习笔记 seaJs学习笔记文章标签： seaJs学习笔记 seaJs seaJs加载多个js文件 seaJs的异步加载 javascript模块化

本文链接：https://blog.csdn.net/lee_magnum/article/details/13621215

版权

seaJs学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

seaJs学习笔记

11 篇文章 5 订阅

订阅专栏

　　到目前为止，seaJs的大部分使用方法已经为大家介绍完了，有关javascript的模块化大部分功能也已经向大家介绍完了。下面再向大家深入的介绍一下seaJs。

　　Define除了可以对回调函数进行操作之外，还可以对数据进行加载。Define中的第三个参数module主要是辅助调试的作用，它是对模块内部进行调试作用。可以通过module可以获得这个模块的id，可以获取到这个模块依赖哪些模块的数组等辅助性的功能在这里不做过多介绍。

　　在require的接口也提供了异步的接口(require.async())。那么这种异步的接口和同步的接口有什么区别呢?比如同步的接口要是想继续执行下面的函数方法，必须得需要同步的js文件加载好了才可以往下进行。那么异步的形式，有可能没加载完成就继续执行下面的代码了，是个异步的形式。所以模块化提供了两种依赖方式，一种是同步的(require())，一种是异步的(require.async())。异步的好处就是可以不用去等待更长的时间。就像之前做过的webQQ的一些依赖就可以用异步的来进行。代码还是之前的在这里就不粘贴了，想了解代码的小伙伴儿去前面翻一翻就能找到了。只看网络加载js的情况。如下图(图1-1)

seaJs学习笔记之seaJs的深入了解

图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.js
	require("./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>