寫在前面
seajs是什么？
- Seajs是一個js文件加載器。
- 遵循 CMD 規范模塊化開發，依賴的自動加載、配置的簡潔清晰。
- 用於Web開發的模塊加載工具，提供簡單、極致的模塊化體驗
一：使用
文件目錄：
demo_1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="seajs/sea.js"></script>
<script src="seajs-config.js"></script>
</head>
<body>
<script>
//seajs.use(['./model.js','./model_2.js']) //沒有使用別名的寫法
seajs.use(['m','m_2']) //使用base路徑的寫法
</script>
</body>
</html>
**注解：
seajs.use:用來在頁面中加載一個或多個模塊。
seajs-config.js文件
seajs.config({ //兩種寫法，一個是paths，一個是base
/*paths:{ 'baseUrl':'.' }, alias:{ 'm':'baseUrl/model.js', 'm_2':'baseUrl/model_2.js' }*/ base:"./", alias:{ 'm':'model.js', 'm_2':'model_2.js' } })
**注解：
base:是sea.js的基礎路徑，也就是sea.js的路徑。
paths:當目錄比較深，或需要跨目錄調用模塊時，可以使用paths來簡化書寫。
如：
seajs.config({ paths: { 'gallery': 'https://a.alipayobjects.com/gallery', 'app': 'path/to/app', ... } }); //模塊中
define(function(require, exports, module) { var underscore = require('gallery/underscore'); // 加載的是 https://a.alipayobjects.com/gallery/underscore.js
var biz = require('app/biz'); // 加載的是 path/to/app/biz.js
});
paths 配置可以結合 alias 配置一起使用，讓模塊引用非常方便。
在使用中路徑問題出錯了。
路徑問題：https://github.com/seajs/seajs/issues/258 seajs都有相關解釋。
alias:別名配置，用變量表示文件，解決路徑層級過深和實現路徑映射
model.js文件：
define(function(){ alert("AAA") })
**注解：
define：用來定義一個模塊。
model_2.js文件：
define(function(){ alert("BBB") })
結果：根據兩個文件在seajs中的加載順序，分別彈出AAA與BBB。
二：使用
頁面：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="seajs/sea.js"></script>
<script src="seajs-config.js"></script>
</head>
<body>
<div></div>
</body>
<script> seajs.use(['jquery','m_3'],function($,m_3){ //這里是callback
//$對應jquery,在回調中使用的別名
//調用接口變量
alert(m_3.msg);
}) </script>
</html>
seajs-config.js文件
seajs.config({ /*paths:{ 'baseUrl':'.' }, alias:{ 'm':'baseUrl/model.js', 'm_2':'baseUrl/model_2.js' }*/ base:"./", alias:{ 'jquery':'jquery.js', 'm':'model.js', 'm_2':'model_2.js', 'm_3':'model_3.js' } })
model_3.js文件：
define(function(require, exports, module){ var $=require('jquery'); $("div").text("模塊中調用jquery操作dom"); exports.msg="對外接口，變量a"; })
結果：
**注解：
require：用來獲取指定模塊的接口。
exports：用來在模塊內部對為提供接口。
三：jQuery在seajs中的使用
需要使用seajs來定義一下，包裝成一個模塊。
define(function(){ //jquery源代碼
return $.noConflict(); });
四：有時候，我們添加前端框架的時候，需要引入css文件時。
以bootstrap為例：兩個文件，bootstrap.js與bootstrap.css文件。
bootstrap.js文件做一下的修改即可。
define(function(require, exports, module){ require('bootstrap.css'); //里面是bootstrap.js的源碼
})