模塊化開發一之ES6的模塊化
javascript 原始功能
- 在網頁開發早起，js制作作為一種腳本語言，做一些簡單的表單驗證或動畫實現等。那個時候代碼還很少的。
- 那個時候的代碼是怎么寫的呢？ 直接將代碼寫在script標簽中
- 隨着ajax 異步請求額出現，慢慢形成了前后端分離：
- 客戶端需要完成的事情越來越多，代碼量也與日俱增
- 為了應對代碼量的劇增，我們通常會見代碼組織在多個js文件中，進行維護
- 但是這種維護方式，依然不能避免一些災難性問題
- 比如說：全局 變量的同名的問題
- 雖然匿名閉包函數解決了變量名沖突的問題，到時同事帶來了函數不可復用的問題。
- 比如說：全局 變量的同名的問題
//匿名閉包函數
(function(){
var flag = true
})
- 模塊化思維解決沖突：
- 在匿名函數中定義一個對象
- 給對象添加各種需要暴露到外部的屬性和方法(不需要暴露的直接定義即可)
- 最后將這個對象返回，並且在外部使用MoudleA 接收。
- 上述方法：是實現模塊化雛形：
- 常規的模塊化規范：
- CommonJS
- AMD
- CMD
- 也有ES6的Modules
- 模塊化有兩個核心：
- 導入模塊
- 導出模塊
CommonJS導入和導出
- 導出模塊中的屬性或方法
flag = true
module.exports = {
flag:flag,
test(a,b){
return a+b
},
demo(a,b){
return a*b
}
}
- 導入模塊中的屬性或方法
// commonjs 模塊
let { test，demo，flag} = require('moduleA')
// 等同於
let _mA = require('moduleA')
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;
ES6的模塊化實現（重點）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script>
</script>
</body>
</html>
Aaa.js
var name='qzk';
var age = 18;
var flag = true;
function sum(a,b) {
return a+b
}
// 導出變量
export {
flag,name,age,sum
}
// 導出變量方式二
export var test1 = 'hahah';
// 直接導出函數
export function mul(num1,num2) {
return num1+num2
}
// 直接導出類
export class Person {
run(){
console.log('在running');
}
}
// 使用default 默認導出
// 在某些情況下，一個模塊中包含某個功能，我們並不希望給這個功能命名，erqie可以讓使用者自己命名 可以使用default
const address = 'shanghai';
export default address
Bbb.js
import {name,flag,age,sum} from "./aaa.js";
if (flag){
console.log("小明是天才");
console.log(sum(10, 20));
}
// 直接導入 export 定義的變量
import {test1} from "./aaa.js";
console.log(test1);
// 導入export 定義的函數
import {mul,Person} from "./aaa.js";
console.log(mul(10, 100));
const p = new Person();
p.run();
// 導入 默認變量或方法：此時可以自己命名這個變量或方法
import addr from "./aaa";
console.log(addr);
// 統一對某個js中的變量全部導出
import * as aaa from "./aaa.js"
console.log(aaa.mul(10, 20));