JavaScript是目前web前端開發中的核心語言，隨著我們前端頁面功能複雜化之後，前端也進入了工程化開發。今天我和大家談談如何在JavaScript中實現模塊化。
首先我們來談談為何要在JavaScript中模塊化？因為我們的頁面功能變得越來越複雜，頁面的每個部分可能都要進行組件化開發，多人協作才能使我們的項目進展得更快。多人協作就會帶來很多問題，比如說變量名、函數名，大家一起開發避免不了重名的問題，還有作用域的問題。那麼如何解決這些問題呢？早期JavaScript採取自執行函數來封裝代碼，但是又會出現文件依賴的問題，所以就是一大堆的問題。JavaScript模塊化就是來解決重名、作用域、文件依賴這些問題的。什麼才是JavaScript的模塊化？相信很多人肯定會說，AMD模塊化、CMD模塊化、CommJS模塊化，對這些都是JavaScript的模塊化，不過這都是歷史了，對還有UMD模塊化這個還是不錯的。如若你還沒了解過的，請搜索相應的關鍵字自己看看，對了解我們JavaScript模塊化還是很有幫助的。但是今天我要和大家討論的是ES6這個JavaScript原生自帶的模塊化。如何學習ES6的模塊化？一般我們開發頁面都是先寫一個html頁面，然後才開始寫js得，那麼我今天就和大家說說這個傳統開發中如何使用模塊化（工程化開發又是另一種寫法）。step1：建立一個html頁面保存好，然後在頁面中插入如下代碼：<script type="module" src="a.js"></script>注意這裡的type="module"就是告訴瀏覽器，我們是採取模塊化的方式來加載a.js這個模塊的。step2：編寫a.js這個模塊要想真正的編寫一個ES6的模塊文件，我們還是要弄懂三個關鍵字：export、default、import。這三個關鍵字是用來編寫模塊的導入導出的，export導出的意思，export default默認導出，import導入的意思。a.js這個模塊應該怎麼寫呢？首先我們要搞清楚，這個模塊現在已經被加載進入html頁面了，其實我們就大可不必寫export導出了，因為導出是要給另外的模塊使用的，而我們現在已經在頁面中使用了這個模塊，當然你要導出給別的模塊使用也是可以的。那麼我們就考慮導入了，因為我們a.js這個模塊可能要使用其他模塊中的東西（變量、函數、類）。那麼如何導入呢？import {var function class} from './b.js';這段代碼就是編寫導入的基本寫法，當然還有其他寫法，暫時不一一介紹了。注意這的var代表你要填寫的變量名，function代表你要填寫的函數名，class代表你要填寫的類名。特別要提醒的是'./b.js'這裡的寫法不能隨便寫（有時間下次再解釋）。step3：編寫b.js模塊因為a.js模塊中想使用b.js模塊中的變量和函數及類，那麼我們在編寫b.js模塊的時候就要導出這些東西。所以為了簡單期間我不做解釋，直接寫點代碼如下：export var a=10;export function fn(){ console.log('我是b模塊中的函數'); }export class Myclass{省略……}step4：修改a.js中的代碼如下import { a ， fn ， Myclass } from './b.js';console.log(a);fn();這樣我們就簡單地實現了ES6的模塊化了。如果想詳細了解還是要多看資料。