es6+最佳入門實踐(13)

13.模塊化

13.1.什麼是模塊化

模塊化是一種處理複雜系統分解爲更好的可管理模塊的方式。通俗的講就是把一個複雜的功能拆分成多個小功能，並且以一種良好的機制管理起來，這樣就可以認爲是模塊化。就像作家把書分成很多章節來寫一樣，程序員寫代碼分模塊來寫也是一種良好的習慣。從本質上來講，一個模塊就是一堆代碼而已

使用模塊化方式寫代碼，有非常多的優點，例如，可維護性好、避免全局變量污染、可複用性好等，下面我們來看看es5中如何實現模塊化封裝

var module1 = (function () {
    var _count = 0

    var fn1 = function () {
       alert(_count) 
    }
    var fn2 = function () {
        console.log(_count)
    }
    return {
        fn1: fn1,
        fn2: fn2
    }
})()

module1.fn1()   //0
module1.fn2()   //0
console.log(module1._count);  //undefined

13.2.環境準備

在具體寫測試demo之前，我們需要準備一下環境

1.進入到項目目錄，初始化項目

npm init -y

2.安裝webpack和webpack-cli

npm install webpack webpack-cli -D

這裏“-D”是“--save-dev”的簡寫

3.安裝babel

npm install babel-core babel-loader babel-preset-env --save-dev

4.配置babel， 在項目目錄下新建.babelrc文件，然後輸入

{
  "presets": ["env"]
}

4.測試環境是否成功，在項目下新建index.js，寫入代碼

()=>{console.log(1)}

5.使用webpack打包

./node_modules/.bin/webpack --mode development

13.3.export命令和import命令

模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。通俗的講export用來導出內容，import用來引入內容

1.導出和導入變量

我們新建一個modules目錄，在下面新建一個文件a.js寫相關代碼

//導出變量
let username = 'xiaoqiang'
let password = '123'
export {username, password}

在index.js文件中引入a.js模塊代碼

//導入變量
import {username,password} from './modules/a.js'
console.log(username, password)

2.導入和導出函數

//導出函數
export function hello() {
    return "hello nodeing"
}

//導入函數
import {hello} from './modules/a'
console.log(hello())

3.導入和導出類

//導出一個類
export class hello{
    fn(){
        console.log('hello world!!!')
    }
}

//導入一個類
import {hello} from './modules/a'

console.log(hello)

let obj = new hello()

obj.fn()

注意1: 不要直接導出一個值

export 1  //錯誤

let m = 20

export m  //錯誤

注意2: 不要直接導出函數或者類

function fn(){}

export fn

class hello{}

export hello

注意3: export語句要在模塊最頂層，放在塊級作用域內會報錯

{
    export let a=10  //報錯
}

注意4: 可以批量接收導出的內容

//導出變量、函數、類

export class hello{
    fn(){
        console.log('hello world!!!')
    }
}

export let A = 10

export function Fn() {
    console.log(111)
}

//批量導入內容，所有的變量 類 函數等都掛載到amodule身上
import * as amodule from './modules/a'

console.log(amodule.A, amodule.Fn, amodule.hello)

13.3.export default命令

從前面的例子中，我們需要思考一個問題，每次使用一個模塊的時候，我們都需要知道這個模塊裏面到底有哪些變量、函數、類，我們要根據這些類名來導入，這樣方便麼？爲了更方便的寫代碼，我們可以使用export default命令，爲模塊指定默認輸出

//默認輸出變量
let a = 10
export default a

注意： 不要寫成這樣

export default let a = 10 // 報錯

//導入模塊
import aa from './modules/a'
console.log(aa)

使用export default命令導出，再導入的時候不用加括號{}, 名字可以自定義了

推薦的模塊導入導出方式：

//導出內容
let a = 10

function Fn() {
    console.log(111)
}

class Hello{
    Fn2(){
        console.log(111)
    }
}

export default {
    a,
    Fn,
    Hello
}

//導入內容
import aa from './modules/a'
console.log(aa)

視頻教程地址：http://edu.nodeing.com/course/50