筆記05-前端模塊化

模塊化開發(fā)王紅元微博：coderwhy微信：372623326JavaScript原始功能在網(wǎng)頁開發(fā)的早期，js制作作為一種腳本語言，做一些簡單的表單驗證或動畫實現(xiàn)等，那個時候代碼還是很少的。那個時候的代碼是怎么寫的呢？直接將代碼寫在<script>標簽中即可隨著ajax異步請求的出現(xiàn)，慢慢形成了前后端的分離客戶端需要完成的事情越來越多，代碼量也是與日俱增。為了應(yīng)對代碼量的劇增，我們通常會將代碼組織在多個js文件中，進行維護。但是這種維護方式，依然不能避免一些災(zāi)難性的問題。比如全局變量同名問題：看右邊的例子另外，這種代碼的編寫方式對js文件的依賴順序幾乎是強制性的但是當js文件過多，比如有幾十個的時候，弄清楚它們的順序是一件比較同時的事情。而且即使你弄清楚順序了，也不能避免上面出現(xiàn)的這種尷尬問題的發(fā)生。小明后來發(fā)現(xiàn)代碼不能正常運行，去檢查自己的變量，發(fā)現(xiàn)確實true最后杯具發(fā)生了，小明加班到2點還是沒有找到問題出在哪里(所以，某些加班真的是無意義的)匿名函數(shù)的解決方案我們可以使用匿名函數(shù)來解決方面的重名問題在aaa.js文件中，我們使用匿名函數(shù)但是如果我們希望在main.js文件中，用到flag，應(yīng)該如何處理呢？顯然，另外一個文件中不容易使用，因為flag是一個局部變量。使用模塊作為出口我們可以使用將需要暴露到外面的變量，使用一個模塊作為出口，什么意思呢？來看下對應(yīng)的代碼：我們做了什么事情呢？非常簡單，在匿名函數(shù)內(nèi)部，定義一個對象。給對象添加各種需要暴露到外面的屬性和方法(不需要暴露的直接定義即可)。最后將這個對象返回，并且在外面使用了一個MoudleA接受。接下來，我們在man.js中怎么使用呢？我們只需要使用屬于自己模塊的屬性和方法即可這就是模塊最基礎(chǔ)的封裝，事實上模塊的封裝還有很多高級的話題：但是我們這里就是要認識一下為什么需要模塊，以及模塊的原始雛形。幸運的是，前端模塊化開發(fā)已經(jīng)有了很多既有的規(guī)范，以及對應(yīng)的實現(xiàn)方案。常見的模塊化規(guī)范：CommonJS、AMD、CMD，也有ES6的ModulesCommonJS（了解）模塊化有兩個核心：導(dǎo)出和導(dǎo)入CommonJS的導(dǎo)出：CommonJS的導(dǎo)入export基本使用export指令用于導(dǎo)出變量，比如下面的代碼：上面的代碼還有另外一種寫法：導(dǎo)出函數(shù)或類上面我們主要是輸出變量，也可以輸出函數(shù)或者輸出類上面的代碼也可以寫成這種形式：export

default某些情況下，一個模塊中包含某個的功能，我們并不希望給這個功能命名，而且讓導(dǎo)入者可以自己來命名這個時候就可以使用exportdefault我們來到main.js中，這樣使用就可以了這里的myFunc是我自己命名的，你可以根據(jù)需要命名它對應(yīng)的名字另外，需要注意：exportdefault在同一個模塊中，不允許同時存在多個。import使用我們使用export指令導(dǎo)出了模塊對外提供的接口，下面我們就可以通過import命令來加載對應(yīng)的這個模塊了首先，我們需要在HTML代碼中引入兩個js文件，并且類型需要設(shè)置為moduleimport指令用于導(dǎo)入模塊中的內(nèi)容，比如main.js的代碼如果我們希望某個