javascript
五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一、JavaScript原始功能
-在網頁開發的早期，js制作作為一種腳本語言，做一些簡單的表單驗證或動畫實現等，那個時候代碼還是很少的。 那個時候的代碼是怎么寫的呢？
直接將代碼寫在<script>標簽中即可
隨著ajax異步請求的出現，慢慢形成了前后端的分離 客戶端需要完成的事情越來越多，代碼量也是與日俱增。
為了應對代碼量的劇增，我們通常會將代碼組織在多個js文件中，進行維護。 但是這種維護方式，依然不能避免一些災難性的問題。
比如全局變量同名問題：看下邊的例子
另外，這種代碼的編寫方式對js文件的依賴順序幾乎是強制性的
但是當js文件過多，比如有幾十個的時候，弄清楚它們的順序是一件比較同時的事情。
而且即使你弄清楚順序了，也不能避免上面出現的這種尷尬問題的發生。
二、匿名函數的解決方案
我們可以使用匿名函數來解決方面的重名問題
在aaa.js文件中，我們使用匿名函數
但是如果我們希望在main.js文件中，用到flag，應該如何處理呢？
顯然，另外一個文件中不容易使用，因為flag是一個局部變量。
三、使用模塊作為出口
我們可以使用將需要暴露到外面的變量，使用一個模塊作為出口，什么意思呢？
來看下對應的代碼：
我們做了什么事情呢？
非常簡單，在匿名函數內部，定義一個對象。
給對象添加各種需要暴露到外面的屬性和方法(不需要暴露的直接定義即可)。
最后將這個對象返回，并且在外面使用了一個MoudleA接受。
接下來，我們在man.js中怎么使用呢？
我們只需要使用屬于自己模塊的屬性和方法即可
這就是模塊最基礎的封裝，事實上模塊的封裝還有很多高級的話題：
- 但是我們這里就是要認識一下為什么需要模塊，以及模塊的原始雛形。
- 幸運的是，前端模塊化開發已經有了很多既有的規范，以及對應的實現方案。
- 常見的模塊化規范：
CommonJS、AMD、CMD，也有ES6的Modules
四、CommonJS（了解）
模塊化有兩個核心：導出和導入
- CommonJS的導出：
- CommonJS的導入：
五、ES6 export基本使用
上面的代碼還有另外一種寫法：
上面的代碼也可以寫成這種形式：
某些情況下，一個模塊中包含某個的功能，我們并不希望給這個功能命名，而且讓導入者可以自己來命名
- 這個時候就可以使用export default
我們來到main.js中，這樣使用就可以了
這里的myFunc是我自己命名的，你可以根據需要命名它對應的名字
另外，需要注意：
export default在同一個模塊中，不允許同時存在多個。
六、ES6 import使用
我們使用export指令導出了模塊對外提供的接口，下面我們就可以通過import命令來加載對應的這個模塊了
- 首先，我們需要在HTML代碼中引入兩個js文件，并且類型需要設置為module
- import指令用于導入模塊中的內容，比如main.js的代碼：
- 如果我們希望某個模塊中所有的信息都導入，一個個導入顯然有些麻煩：
總結
以上是生活随笔為你收集整理的五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一、mongodb数据库系列——介绍和安
- 下一篇： 四、Web服务器——Session C