在Ionic 1中最重要的概念是模組化，由於Angular 1實現的Ionic 1理所當然地繼承了模組化的概念。所以我們通過Ionic 1可以非常優雅地按照模組化的理念構建我們的工程，使得維護、重構、增刪功能節點、理解工程不再困難晦澀。當然，Ionic 2作為Ionic 1的升級版本，在模組化的實現上要更加簡潔、更加強大。本文通過ES6的關鍵字import來接觸Ionic 2/Angular 2的模組化。

注：本文可能涉及到ES6或TypeScript的相關知識。

模組化

JavaScript中模組化的概念由來已久，不過一直沒有作為JavaScript的內建功能而存在，基本都是通過庫的形式才能使用。而ES6的出現打破了這個局面，當然TypeScript作為升級版本當然也支援模組化。而使用Ionic 2開發應用時需要使用ES6或TypeScript，這就為Ionic 2的模組化之路奠定了基礎。

import語法

import是ES6中的關鍵字，使用它可以引入其他模組，其基本語法如下：

import {SomeClass} from 'path/to/SomeClass';

其中SomeClass是其他模組的類名，而’path/to/SomeClass’其實表示的是’path/to/SomeClass.js’或’path/to/SomeClass.ts’（使用TypeScript時），字尾名可以省略，在SomeClass.js/SomeClass.ts檔案中匯出了一個名為SomeClass的類。注意，匯出的類名不要求和類所在檔案的檔名相同。

案例分析

如果我們的工程結構如下：

src/
    app/
        app.ts
        app.html
    components/
        dropdown/
            dropdown.ts
            dropdown.html
        ...
    ...
 

現在我們如果想要在app.ts中使用我們的dropdwon元件應該這樣做：

// app.ts

// 獲取dropdown.ts裡面匯出的類
import {DropDownComponent} from '../components/dropdown/dropdown';

// 根據dropdown元件的實現方式合理使用

注意，匯入時的路徑相對於當前檔案所在的資料夾。

import之類別名

在實際開發中，開發者都有自己定義變數名、檔名的習慣，而有時為了程式碼的可維護性不得不將變數名、檔名等設定為有意義的值，達到所見即所得的目的。如此一來，檔名或變數名可能就會比較長，當然專案上線前肯定會有壓縮的過程，故不必在意對檔案大小的影響。不過在編碼時長變數名總歸不太方便，就像上例中的DropDownComponent使用起來就很不方便。還有一種情形，團隊開發中總有那麼幾個“黑洞”，不按照規範定義變數名，當別人引入TA的模組時可能不知道是什麼意思。為了解決這些問題，import

import {DropDownComponent as DropDownComp} from '../components/dropdown/dropdown';  // 此後可使用DropDownComp替代DropDownComponent
import {Bala as LoginService} from '../providers/bala/Bala';    // 此後可使用LoginService替代Bala，從而不會使開發者困惑

import之匯入多個類

從一個檔案中匯入多個類很簡單，只需要將類名用逗號隔開即可：

import {Login, LogOut, Register} from './userService';

如果需要匯入一個檔案中全部的類時，可以使用萬用字元*來表示：

import * from './userService';

import的前提 – export

上面我們只講述瞭如何使用import，可實際上我們並不能隨便將其他檔案中定義的類引入到我們當前的檔案中，能夠引入的必須是他人允許我們引入的，就像即使商家生產了蛋糕，如果不放在櫥窗裡，我們也完全不知道蛋糕的存在。而export的功能就是將“蛋糕”放在櫥窗裡：

// dropdown.ts

export class DropDownComponent {
    // DropDownComponent的具體實現
}

export和import的延伸

其實export和import的作用並不像上文描述地那麼單一，他們不僅僅可以對類起作用，變數、方法、類等等等等都可以被它們操作，只是要注意它們之間的關係：import是因export而生的。