SeaJS模块化基础

最新推荐文章于 2020-06-12 11:37:08 发布

原创最新推荐文章于 2020-06-12 11:37:08 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

SeaJS 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
测试SEA.JS
<input type="button" value="按钮" id="btn" />
<script src="js/sea.js"></script>
<script>
seajs.config({
	base : './js/',		//基础路径
	alias : {
		'jquery' : 'jquery-2.0.3.min.js'	//别名配置（注意路径是建立在基础路径base之上的）
	}
})
//加载一个模块，加载完毕执行回调，回调函数的参数可以理解为js模块文件中的对外接口exports
//也可以加载多个模块seajs.use(['main1.js','main2.js'],function(a,b){...})
seajs.use('main.js',function(obj){
	obj.a();
	obj.b();
	alert(obj.name);
})
</script>
</body>
</html>

//main.js文件
define(function(require,exports,module){
	//引入配置文件中的jquery
	require('jquery');
	//引入common.js文件（common模块）
	var common = require('common.js');
	exports.a = function(){
		alert("我是a方法");
	}
	exports.b = function(){
		//执行common模块中的方法
		common.init();
	}
	$('#btn').on('click',function(){
		alert("因为加载了jquery模块，所以可以执行");
	})
	//对外属性，也可以通过return语句直接返回接口，甚至简化为define({name:"Jack",age:"19"})
	module.exports = {
		name : "Jack",
		age : "19"
	}
})

//common.js文件
define(function(require,exports,module){
	exports.init = function(){
		alert("我是common模块中的方法");
	}
})

文档结构：

index.html

js -- jquery.2.0.3.min.js

--main.js

--common.js

AMD（异步模块定义）和CMD（通用模块定义）的区别：

1、对于依赖的模块，AMD是提前执行，CMD是延迟执行

2、CMD推崇依赖就近，AMD推崇依赖前置

3、AMD是RequireJS在推广过程中对模块定义的规范化产出，CMD是SeaJS在推广过程中对模块定义的规范化产出

更多关于AMD和CMD的规范介绍

http://blog.chinaunix.net/uid-26672038-id-4112229.html

SeaJS官方文档

http://seajs.org/docs/#docs

API

https://github.com/seajs/seajs/issues/266