前段模塊化sea.js（1）

1、前端模塊化-seajs
https://www.zhangxinxu.com/sp/seajs/#intro
1.提出問題
1）.全局變量污染，重名
2）當引入工具庫時，工具庫中的變量名與咱們的變量名或方法衝突
3）使用工具庫時，咱們須要手動引入工具庫到文件中，
4）通用組更新了前段的基礎類庫，可是很難作到全棧更新
5）業務組想使用通用組件，可是發現沒法使用簡單的幾行代碼就實現
6）老產品上線更新功能，就只能在老的類庫上進行修改開發
7）業務合併時，容易出現前端代碼衝突
、、、、、
解決方法：
前端模塊化--seajs
2.seajs簡介：
SeaJS是一個適用於WEB瀏覽器的模塊加載器，使用SeaJS能夠更好的組織Javascript代碼，，
seajs是一個純粹的模塊加載器，他只解決一個問題：前端代碼模塊化，經過seajs，能夠將大量的js代碼封裝成一個個小模塊。而後輕鬆的實現模塊的加載重用和依賴的管理
3.seajs的獲取與安裝
1）.終端安裝
npm i spm -g
npm i seajs
2)頁面直接引入
github上面獲取seajs文件：https://github.com/seajs/seajs
引入：<script src='./lib.sea,js'></script>
調用：<script>
console.log(seajs.version);
</script>

4.定義模塊
define()用於定義模塊,一個js文件就是一個模塊，只能使用一個define()來定義，若是使用多個，只會認最後一個
模塊管理：在html文件中調用主模塊：
seajs.use('main',function(data){
//data是主模塊返回的內容
})

語法：
define()只有一個參數，
參數是字符串：就是一個字符串模塊
參數是數字：就是一個數字模塊
參數是對象：就是一個對象模塊
參數是函數（最經常使用）：
這個函數中能夠有三個參數：
Require：用於引入其餘子模塊
Exports:用於返回接口對象
Module：模塊的module屬性
define()有兩個參數
第一個參數：數組 模塊所依賴的子模塊數組集合
第二個參數：define([],function(Require,Exports,Module){})

define()有三個參數：
第一個參數：表示該模塊的別名
第二個參數：數組 模塊所依賴的額子模塊數組集合
第三個參數： 是define([],function(Require,Exports,Module){})
注意：
1）當傳遞模塊別名時，該模塊的別名應該與該模塊的文件名字同樣，可使用別名調用模塊，建議別名與文件名同樣
2）當不傳遞別名時，該模塊的名稱與文件名字同樣。路徑爲相對sea.js文件所在文件夾的相對路徑
3）使用define()定義模塊時，當一個文件中出現多個define時，只有最後一個有效，其餘的都將被覆蓋
5.引用模塊 require()
html引入主模塊使用seajs.use，模塊引入其餘模塊使用require()
規則：
1）require()不能被簡寫，重寫
2）require()不能被重定義】
var req=require;
function require(){}
function fun(){
var require=1233;
}
function fun(require){}
//以上四種狀況都是不合法的

3)require的參數只能是完整的字符串，不能拼接，好比：
var a='ma';
require(a+'in');不容許

注意：
1）require的參數表示模塊的路徑，路徑是相對於sea.js文件所在文件夾爲根目錄的相對路徑，引入的是模塊，.js是文件的後綴，能夠省略
2）當require引入一個已經定義了模塊名稱(別名，三個參數)的模塊時，在引入時，首先在該模塊的依賴模塊集合中將該模塊的路徑引入進來，而後使用require(name)引入模塊
總結：
1）若是有別名，所有加別名，用別名調用，路徑都要寫在父模塊的依賴集合，子模塊調用時直接調用別名
2）若是沒有別名，所有不要加別名，引入直接使用require（src）引入便可，模塊定義只能有一個參數
3）不要陰陽調用(有別名和沒有別名的同時調用)
6.模塊接口返回 exports
模塊的接口，當模塊執行結束後向上級返回內容(暴露接口)時使用
四種返回方式：
1）直接對exports添加屬性：
exports.color=‘red’
2）使用module定義：module.exports={color:'blue'}
3)使用module定義：module.exports.color='green'
4)使用return：return{color:'purple'}

須要注意的是：
1）一個模塊只能使用一個接口返回方式。只能返回一個內容
2）不能對exports對象直接賦值，能夠增長屬性和值：
exports.name='lisi';exports.age=23;

或者給module.exports賦值對象
module.exports={}

7.module 模塊屬性
module中有不少屬性。都是模塊的屬性
1）dependencies:['header/skin/skin']
表示當前模塊所引用的依賴集合
2）deps：{}
也表示依賴集合（對象集合）
3）exports：{color:"cyan"}
模塊返回接口內容
4）id：「hahah」
模塊別名
5）uri：「file:///Applications/XAMPP/xamp......」
若是模塊沒有別名，id=uri
若是沒有別名，uri表示該模塊文件的絕對路徑，若是有別名，想要引入模塊，就要引入路徑（uri），在調用別名（id）
8.異步加載 require.async
require方法的異步加載與use是比較相似的，在頁面初始化時，使用use異步加載主模塊，若是在模塊中想要使用異步加載子模塊，可使用require.async()
語法：
require.async(path,fn);

path:字符串或者數組，表示須要加載的依賴的路徑
fn：模塊加載結束的回調函數，該函數的參數表示前邊加載模塊的回調函數內容，若是第一個參數是數組，那麼回調函數的參數順序就是數組的順序
注意：
若是有if語句判斷加載那個模塊
同步：多個模塊都會被加載，可是執行爲真的分支，這個分支內容被加載，另外一個分支不被引用
異步：哪一個分支爲真，加載那個分支，並引用，另外一個分支不會被加載也不會被引用
加載：就是瀏覽器經文件下載下來