一、遠(yuǎn)古時(shí)期
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
知識(shí)點(diǎn)<script>是js中訪問(wèn)其它文件的唯一途徑：本地的笼蛛，src- 靜態(tài)<script>是
同步加載，然后再蛉鹿，順序執(zhí)行：保證了執(zhí)行依賴- 動(dòng)態(tài)<script>是
異步加載,但執(zhí)行無(wú)序滨砍。此時(shí)，
依賴關(guān)系：通過(guò)script的onload的回調(diào)去加載其它script
執(zhí)行：異步執(zhí)行妖异，通過(guò)onload回調(diào)執(zhí)行回調(diào)函數(shù)
思路：- 即通過(guò)惨好，<script>腳本的加載，來(lái)實(shí)現(xiàn) "模塊化加載"
缺點(diǎn)：- 靜態(tài)script會(huì)阻塞頁(yè)面渲染随闺，動(dòng)態(tài)script要手動(dòng)控制依賴關(guān)系及執(zhí)行
- 會(huì)污染全局(自執(zhí)行函數(shù)可以優(yōu)化)；較多script時(shí)蔓腐，可能會(huì)同名變量矩乐。
- 依賴關(guān)系不明確；不明確某script需要依賴什么
二、AMD和CMD規(guī)范
這邊介紹require.js的實(shí)現(xiàn)原理
原理- 采用
動(dòng)態(tài)script：相對(duì)于靜態(tài)script散罕，需要控制依賴關(guān)系及執(zhí)行分歇，但避免了阻塞及按需加載依賴關(guān)系：進(jìn)行了封裝。執(zhí)行：進(jìn)行了封裝欧漱。不污染全局：采用命名空間依賴關(guān)系明確
1职抡、首先，引入require.js及標(biāo)明依賴入口
<script data-main="main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<!--data-main：標(biāo)明入口误甚，在其script加載及執(zhí)行完后會(huì)執(zhí)行main.js-->
2缚甩、定義模塊
define([module1,module2],function () {//這里也可以定義，定義這個(gè)模塊需要的依賴
//加載模塊的思路：動(dòng)態(tài)script窑邦，包裝順序擅威，就是利用回調(diào)
return {};
});
3、引入模塊
//main.js
require.config({
baseUrl: "/",
paths: {}
});
require(['jquery','one'], function (res1,res2) {//這里定義：依賴jquery及one冈钦，都加載完之后郊丛，執(zhí)行回調(diào)函數(shù)
//res1,res2分別代表'jquery'和'one'的返回值
});
4、總結(jié)
require.js其實(shí)瞧筛，就是利用動(dòng)態(tài)script及一些列封裝厉熟，來(lái)實(shí)現(xiàn)模塊化加載
- 優(yōu)點(diǎn)：
- 模塊化初具雛形
- 特定：
- 異步加載，回調(diào)執(zhí)行
- AMD推崇依賴前置较幌、CMD推崇就近依賴
三揍瑟、commonJs規(guī)范：如Node
特點(diǎn)：同步加載導(dǎo)出：module.exports 或 exports導(dǎo)入：require
1、定義模塊
...
module.exports={};//或exports.xx=...;
2绅络、引入模塊
let a=require('...');
四月培、Es6規(guī)范：
特點(diǎn)：結(jié)合Node及commonJs優(yōu)點(diǎn)優(yōu)點(diǎn)：詞法分析+靜態(tài)Node+動(dòng)態(tài)script+現(xiàn)代版(promise,解析結(jié)構(gòu)等等)導(dǎo)出：export導(dǎo)入：import
五、對(duì)比總結(jié)
| 對(duì)比項(xiàng) | Node | es6 |
|---|---|---|
時(shí)機(jī) |
運(yùn)行加載 |
靜態(tài)加載(編譯詞法分析時(shí)加載) |
采集(可以多次) |
exports |
export |
采集風(fēng)格 |
exports.xx=... module.exports={a,b} 導(dǎo)出一個(gè)對(duì)象：module.exports |
export {a,b} export let a=3export default a導(dǎo)出兩個(gè)對(duì)象：匿名采集器容器恩急，及default對(duì)象 |
導(dǎo)入方式 |
導(dǎo)入是淺拷貝基本類型不會(huì)同步 對(duì)象會(huì)同步 |
導(dǎo)入是賦值所有都會(huì)同步 |
導(dǎo)入對(duì)象個(gè)數(shù) |
一個(gè)module.exports
|
兩個(gè)匿名采集器容器default
|
