SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS，可以更好地组织 JavaScript 代码。
核心特性
无论是中小型站点，还是大型复杂应用，使用 SeaJS，都可以让我们的工作变得更轻松愉悦。SeaJS 具有以下核心特性：
简单一致的模块格式。
依赖的自动管理。
脚本的异步并行加载。
丰富的插件。
友好的调试。
SeaJS 带来的最大好处是：提升代码的可维护性。上面的每一项特性，在使用文档中都会有详细阐述。如果一个网站的 JS 文件超过 3 个，就适合用 SeaJS 来组织和维护代码。涉及的 JS 文件越多，SeaJS 就越适合。
SeaJS 追求的是更简单、自然的代码书写和组织方式。
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ 上面都是从seajs官网上看到的，下来来点操作。
define(function(require, exports, module) {
var $ = require('jquery');
exports.sayHello = function() {
console.log($('.app').html());
};
});
将上面的代码保存为 a.js，然后就可以通过 SeaJS 来加载使用了：
seajs.config({
alias: {
'jquery': './dist/jquery-1.11.0.js' //根据自己的路径配置jq的别名
}
});
seajs.use(['./a', 'jquery'], function(a, $) {
$('.aBtn').click(a.sayHello);
});
上述代码会报错，
image.png
原因就是jquey.js中return jQuery全局对象，就是window.jQuery = window.给覆盖了。
形参改名，
define(function(require, exports, module) {
require('jquery');
exports.sayHello = function() {
console.log($('.app').html());
};
});
将上面的代码保存为 a.js，然后就可以通过 SeaJS 来加载使用了：
seajs.config({
alias: {
'jquery': './dist/jquery-1.11.0.js' //根据自己的路径配置jq的别名
}
});
seajs.use(['./a', 'jquery'], function(a, jq) {
$('.aBtn').click(a.sayHello);
});
完美解决
image.png
这时你会发现html中加载了一遍jquery,a.js也引入了一遍，是不是有点麻烦。
image.png
image.png
推荐干掉局部的a.js引入的jquery模块.这样不会影响seajs.use里回调函数里的使用。
下面介绍下requrie以及require.async的区别。
下面上三个4个文件 module.html,a.js,b.js,c.js
- 我是module.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="dist/sea.js"></script>
</head>
<body>
<div class="app">
我是a.js.sayHello方法(sayHello)
</div>
<button class="aBtn">点我出发a.js->sayHello方法</button>
</body>
<script type="text/javascript">
seajs.config({
alias: {
'jquery': './dist/jquery-1.11.0.js'
}
});
seajs.use(['./a','jquery'], function(a,jq) {
console.log('不用点击直接输出',$('.app').html(),"module.html")
$('.aBtn').click(a.sayHello);
});
</script>
</html>
- 我是a.js
define(function(require, exports, module) {
require.async('./c',function(c){
console.log('我是引入c.js之后输出的',c)
})
var b= require('./b');
console.log('a.js,不用点击直接输出')
exports.sayHello = function() {
console.log($('.app').html(),"a.js");
};
});
- 我是b.js
define(function(require, exports, module){
console.log('我是b.js,靠require方法引入的')
})
- 我是c.js
define(function(require, exports, module){
console.log('我是c.js,靠require.async方法引入的');
var uesername="return返回的username，c.js"
return {
uesername
};
})
image.png
看输出结果很显然，requrie是同步进行的，而 require.async()是异步加载，引入加载模块后，不用忘记在回调函数里用形参接收下，这样就可以用形参接收过来的模块调用加载模块里暴露出来的函数亦或是变量 。
暴露变量`函数有三种方式，return > module.exports > exports 优先级从左往右以此降低。return有阻断 返回作用，很显然优先级是最高的。module.exports={}=exports ； 看起来module.exports和exports 并没有什么却别，但其实不同。 module.exports ={}可以将函数，变量整体暴露出去，而exports只能exports.name=name ；
通俗点讲就是 exports 相当于是 module.exports 一个子集 是module.exports的引用，这点要抽象理解。
require引出的是module.exports 就是 {} 是一个整体，不是exports
再说一点吧，既然seajs是模块依赖。那肯定是一个对象啊，直接打出来看看，都有哪些神秘的东西、
image.png
通过 seajs.cache 可以查看到当前模块系统中所依赖的模块
image.png
通过seajs.data 可以查看到配置信息里的基本数据
image.png
...
接下来弄一些seajs.config({})常用的配置
seajs.config(options)
options={
alias:{"别名","文件路径加文件名"} //配置加载文件别名信息
paths:{"路径名"："文件存储目录"} //配置加载文件存储目录
vars：{"变量名":"变量值"} // 有需要的时候可以通过变量名 来加载对应的文件 {变量名}
map：[
["默认加载的.js文件","映射成加载可以调试的debug文件"] // 以前一个文件，映射后一个文件
]
}
网友评论