模塊
1.模塊管理引擎
AMD CMD UMD
開發一個模塊管理引擎
有定義模塊的module中的define,定義的模塊的方法可以被其他模塊使用。hd的兩個方法被lesson使用,hd的return是導出,lesson的生成方法的第二個參數是導入,第三個回調函數參數hd是hd的方法對象。
let module = (function () {
const moduleList = {}; //模塊容器,是個對象,key是模塊名字,value是模塊導出的方法。按名取用。
function define(name, modules, action) { //名字,依賴的參數,動作
modules.map((m, i) => { //m是依賴的模塊的名字,i是模塊的下標
// console.log(2);
// console.log(moduleList[m]);
modules[i] = moduleList[m];
// console.log(3);
// console.log(modules[i]); //此時的modules[i]存儲的是依賴模塊的方法
})
moduleList[name] = action.apply(null, modules); //modules是存儲的是依賴模塊的方法,作爲參數傳遞給42行module.define('lesson', ["hd"], function (hd) 的 hd
//把模塊導出的方法放到模塊容器中
// console.log(1);
// console.log(moduleList);
}
console.log({define});
return {define};
})();
module.define('hd', [], function () { //聲明模塊
return {
first(arr) {
return arr[0];
},
max(arr, key) {
return arr.sort((a, b) => b[key] - a[key])[0];
}
}
});
module.define('lesson', ["hd"], function (hd) { //聲明模塊,導入hd的方法。即hd。hd:hd模塊所導出的方法。moduleList[name] = action.apply(null, modules);中modules所傳遞。
let data = [
{
name: 'js', price: 199
},
{
name: 'mysql', price: 79
}
]
console.log(hd.max(data, "price")
)
});
</script>
2模塊基本使用:js模塊的內容經導出在其他文件中使用,而不是全部引入。
js文件的導出export:
let title = 'lxj';
let url = 'biliibli';
function show() {
console.log("ixzngjia");
}
export {title, show};
html文件的導入import、script標籤的類型聲明type=“module”、路徑完整./不可省略:
<script type="module">
import {title, show} from "./hd.js";
console.log(title);
show();
</script>
3模塊延遲解析,嚴格模式
1.因爲模塊,多個模塊之間可能存在依賴,所以執行時間晚一些,放在body前的模塊中的執行語句要比body晚執行。
2.模塊中的語句默認就是在嚴格模式下,注意語法規範
4作用域
就像是兩個函數中的局部變量一樣:
模塊裏的 屬性的作用域只在自己的模塊中,不可在模塊外訪問,作用域獨立。要想使用只能導出後使用。
模塊可訪問全局變量
5模塊預解析
模塊只解析一次
6導出
模塊中要導出的數據要有名字,沒有名字不能導出。
7.批量導入用 *,全部導入,但使用時要用 名字.
import * as api from “./hd.js”;
api.title
但是這樣寫的話打包工具會將不使用數據的也全部打包,影響效率,體積,清晰
8導入,導出模塊別名使用
import {title as t } from “./hd.js”;
export {title as t, show};
可以多個元素都起別名
9默認導出export default,就一個需要導出,接受變量可任意名字(最好和js文件的文件名相同)且不用花括號
具名導出和默認導出可以寫在一起,混合使用
export default class s {
show() {
console.log(“ixzngjia”);
}
}
10模塊的合併導出
1.1.1.js,1.1.2.js.1.1.js
文件導入1.1.1 1.1.2時,可以先把1.1.1 1.1.2在1.1中合併,再導入文件,這樣可以避免模塊變量重名帶來的錯誤,更能方便實用和管理
1.1.js:
import * as m11 from “./1.1.1.js”
import * as m12 from “./1.1.2.js”
export {m11,m12}
hd.html:
import * as api from “./1.1.js”
;api.m11.url
11按需動態加載導入 import().then()
let xj = "lxj";
let site = "www.baidu.com";
function action() {
}
export {xj, site, action};
<script type="module">
document.querySelector("button").addEventListener("click",function () {
import("./1.2.js").then( ({site, xj}) => console.log(site, xj)
)
})
</script>
12webpack構建項目的軟件安裝
1在官網下載node.js。
2在webstorm(重啓)的終端上輸入npm -v 測試是否安裝成功,成功則出現版本號
3安裝webpack工具使用此命令 npm install --save-dev webpack
如果安裝不順利卡在
則點擊這裏查看
生成了一個叫node_module的文件夾
13用webpack完成項目的打包編譯,即可順利在普遍的低版本瀏覽器運行代碼。
4使用命令npm init -y 當前15文件夾下出現一個package.json文件,修改這個文件的內容,增加dev這一行,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev” : “webpack --mode development --watch”
},
5在15文件夾下新建文件夾dist、src。
6在src下寫兩個js文件
7.執行命令npm run dev
在dist下自動生成了main.js文件