【ES6】001---module模塊------【巷子】

00一、前言

什麼是模塊化開發？

 

爲了提升代碼的複用度，開發人員會按照功能把大量的js代碼分紅若干文件，這樣在多個頁面就可使用同一個文件了。，下面是某個網站的js引用狀況

怎麼會有這麼多js文件引入，嚇死寶寶了，那就是網站功能比較多嘍，但是咱們知道，

     一、網站加載js時會中止其它資源加載，並中止頁面渲染（就是咱們常說的白屏現象）

     二、加載過多的js文件可能形成瀏覽器假死（瀏覽器一直在加載，不能進行頁面操做）

     三、假如文件有依賴關係，就是使用B.js須要先加載A.js，那咱們還要當心翼翼的去引入js，不過這麼多文件，鬼理得清依賴關係啊

 

額 。。。允許我懵逼片刻，那怎麼辦呢，網站的功能日益強大，js文件愈來愈可能是必然的的事情，因而出現了模塊化開發。

 

 

實現特定功能的js文件稱之爲  模塊 ，有了模塊以後，咱們就能更好的管理本身的代碼及使用別人的代碼了。  將龐大的系統劃分紅若干個模塊去實現的過程 成爲 模塊化

 

如今的web系統愈來愈龐大、複雜，須要團隊分工，多人協做，大型系統的javascript文件常常存在複雜的依賴關係，後期的維護成本會愈來愈高。

 

在ES6以前，javascript還不支持原生的模塊化，若是要實現模塊化那麼就須要藉助一些框架好比：require.js或者sea.js。

 

00二、模塊module

假設咱們如今有一個module-a.js和module-b.js.咱們將它們視爲2個模塊

 

首先咱們先了解下什麼是模塊？

     模塊module:模塊就是一個對其餘模塊暴露屬性和方法的文件

 

咱們用module-a.js和module-b.js來演示如何暴露屬性和方法。

 

首先咱們先要來了解幾個方法：

     一、exprot:導出。做爲一個模塊，它能夠選擇性的暴露本身的屬性和方法，供其餘模塊使用

 

     二、import:導入。做爲一個模塊，能夠根據須要，引入其餘模塊提供的屬性和方法，供本身的模塊使用

 

00三、導入導出模塊的屬性和方法

在模塊B中咱們用關鍵字export對外暴露了一個屬性name1，接下來咱們看模塊A如何接受這個屬性

 

00四、導入模塊module-b

咱們使用關鍵字import導入模塊B中的name1屬性，而且賦值給變量name1.關鍵字from的做用是指向你想要引入的模塊

 

00五、批量導出

對於屬性和方法咱們能夠批量暴露出去

 

推薦使用批量導出：

    

     當對外暴露的屬性和方法較多的時候，這種方法能夠更直觀的看出當前模塊暴露哪些變量

 

00六、批量導入

注意：

     批量導入的時候變量名必須跟導出的一致才能準確獲取，位置順序無要求

 

00七、重命名導入的變量

關鍵字as:關鍵字as能夠實現變量名更改

 

     用法：變量名 as 更改的變量名

 

 在export裏面修改 和 import裏面修改均可以

 

00八、總體導入

使用*將模塊裏面的全部屬性和方法總體導入賦值給一個變量。就至關於給一個對象添加了屬性和值

 

 

00九、默認導出

每個模塊都支持咱們導出一個沒有名字的變量，咱們可使用關鍵字 export default來實現

 

 

0十、注意事項

a、聲明基本變量對外只能讀取不能修改

b、若是導出的是對象，則能夠修改

c、導入不存在的值 那麼值就是undefined

 

webpack將es6代碼轉爲es5代碼

 

00一、安裝webpack

全局安裝

 

npm install webpack -g

 

00二、局部安裝相應插件

npm install webpack --save-dev npm install --save-dev babel-loader babel-core npm install babel-preset-es2015 --save-dev

 

00三、在根目錄建立文件.babelrc文件

在命令行中: echo { presets: ["es2015"] }> .babelrc 在根目錄建立.babelrc文件並寫入{presets: ['es2015']}

00四、配置webpack.config.js

module.exports = {

    entry:{

        main:"./es6/main.js"

    },

    output:{

        path:__dirname,

        filename:"./es5/[name].js"

    },

    module: {

        loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ]

    }

}

00五、運行webpack