seaJs学习笔记之如何依赖模块

最新推荐文章于 2022-10-26 11:44:31 发布

云圣天

最新推荐文章于 2022-10-26 11:44:31 发布

阅读量3.1k

点赞数 3

分类专栏： seaJs学习笔记 seaJs学习笔记文章标签： seaJs学习笔记 seaJs 如何依赖模块 javascript模块化 javascript

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

版权

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

11 篇文章 0 订阅

订阅专栏

seaJs学习笔记

11 篇文章 5 订阅

订阅专栏

　　前几天我们已经为大家介绍了seaJs解决冲突问题的方法了。那么seaJs可以不可以帮大家避免javascript中的依赖问题呢?可以的，下面我们将为大家为大家seaJs解决依赖的方法。

　　如果页面当中有很多个js文件，他们之间要依赖。比如c.js依赖b.js。

　　依赖页面的HTML代码如下

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<script type="text/javascript" src="js/a.js"></script>
<!-- b.js依赖a.js -->
<script type="text/javascript" src="js/b.js"></script>
</head>
<body>
</body>
</html>

　　那么用seaJs怎么实现依赖关系呢?我们可以直接把a.js写到b.js文件当中进行依赖。这样我们只需要再页面中引入一个b.js就可以了，依赖a.js在b.js中已经完成。

　　我们具体来看一个小例子，让大家更加明白seaJs的依赖使用。下面有个js文件叫“m.js”。在m.js中只写一个变量“m=20;”，不是一个模块，但只有一个变量。现在现在“k.js”中弹出变量m，就要依赖m.js。

　　m.js的javascript代码

var m = 20;

　　用seaJs依赖m.js 的k.js的javascript代码

/*
	用seaJs依赖m.js 的k.js的javascript代码
*/
define(function(require, exports, module) {

	//exports是对外的接口
	//require是依赖的接口

	require("./m.js");
	//m.js加载好了，相当于在页面中写入了m=20;

	function tab () {
		alert(m)
	}

	exports.tab = tab;
	
});

　　用seaJs依赖的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>
<!-- 用seaJs引入k.js -->
<script type="text/javascript">
seajs.use("./js/k.js", function  (ex) {
	ex.tab();
})
</script>
</head>
<body>
</body>
</html>

　　预览效果

　　我们刷新一下，结果还是能找到变量m的值的。也可以看下下面js加载情况，也是ok的。现在我们写的并不是一个模块。那么如果要是依赖一个模块应该怎么办呢?比如p.js依赖q.js中的模块。

　　p.js（依赖q模块）中的javascript代码

/*
	用seaJs依赖q.js 的p.js的javascript代码
*/
define(function(require, exports, module) {

	//exports是对外的接口
	//require是依赖的接口

	//如果地址是一个模块的话
	//那么require函数的返回值
	//就是 这个模块中的对外的接口(exports)

	//require("./q.js");


	function tab () {
		alert( require("./q.js").q )
	}

	exports.tab = tab;
	
});

　　q.js（被p依赖的模块）中的javascript代码

/*
	被p.js依赖的模块
*/
define(function(require, exports, module) {

	var q = 10;
	
	exports.q = q;

});

　　用seaJs依赖模块的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>
<!-- 用seaJs引入p.js -->
<script type="text/javascript">
seajs.use("./js/p.js", function  (ex) {
	ex.tab();
})
</script>
</head>
<body>
</body>
</html>

　　预览效果