模塊化開發(fā)思想

• 本質(zhì)為了解決 JS 文件之間相互引用， 用來開發(fā)大型的 web 應(yīng)用
• 將項(xiàng)目的各個(gè)功能，封裝成很多個(gè)JS組件 ，開發(fā)時(shí)，分開去研發(fā)各個(gè)組件，
• 最后利用 es6 提供的模塊系統(tǒng) 將各個(gè)組件導(dǎo)入到一個(gè)指定的 主JS 組件中。
• 模塊化開發(fā)依托于兩個(gè)關(guān)鍵字：
  export{ } ? ? ? ? ? ? ? ? 導(dǎo)出
  import {解構(gòu)} from '路徑' ? ? ?導(dǎo)入

1. 導(dǎo)出 export

• 一個(gè)文件只能有一個(gè) export default
• 在這里可以將這個(gè)文件里面的所有方法一起導(dǎo)出

// 1. 導(dǎo)出普通變量
export let a = 12;      // 寫法一

let a1 = 1;
export {                // 寫法二
    a1 as a2,  // 別名導(dǎo)出(命名沖突)
}

// 2. 導(dǎo)出方法
export let fn1 = () => {            // 寫法一
    console.log('這是方法一');
}

let fna1 = () => {                  
    console.log('這是方法一');
}
export {                            // 寫法二
    fn1,
}


// 3. 導(dǎo)出一個(gè)類
export class Man{       // 寫法一
    name = '男人';
}
class Woman{           // 寫法二
    name = '女人';
}
export {    
    Woman,
}

// 寫法三
export default {
    // 一個(gè)文件只能有一個(gè) export  default
    // 在這里可以將這個(gè)文件里面的所有方法一起導(dǎo)出
    Woman,
    Man,
    a,
    a1,
    // 由于這個(gè)文件 是將一個(gè)文件整體導(dǎo)出 所以導(dǎo)入時(shí)也不一樣。不能使用 解構(gòu) 來接。 
    // import 變量 from '路徑'。 
}

2. 導(dǎo)入 import

// import 變量 from '路徑'。  使用 export default 導(dǎo)出時(shí)使用。

import {
    a as a1,  // 更改名字(命名沖突)
    Man,
} from "./7. export";