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

忘是亡心i 2022-09-18 00:52 420阅读 0赞

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

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

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

![seaJs学习笔记之seaJs的深入了解][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>
    
    <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图*

![seaJs学习笔记之seaJs的深入了解][seaJs_seaJs 1]

刷新不难看出，刚刷新完已经看不到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>
    
    <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的预览效果*

![seaJs学习笔记之seaJs的深入了解][seaJs_seaJs 2]

刷新不难看出，已经分别调到oA和oB的函数了。seaJs学习笔记之seaJs的异步加载和加载多个js文件就为大家介绍到这里。感谢大家对梦龙小站的支持，更多有关seaJs的相关内容敬请关注seaJs学习笔记的更新。

[seaJs_seaJs]: /images/20220828/ca5c0665858b466bac2b260859d30552.png
[seaJs_seaJs 1]: /images/20220828/c7e5800d606d44859367fe7ba27b2643.png
[seaJs_seaJs 2]: /images/20220828/de3a24acb261436f9aecd610c5c818d0.png