微信小程式的MINA框架，其實是許多前端開發技術的組合。這篇文章中，我們來簡單地討論一下模組化。

1、模組化標準

玩前端的同學大部分都知道模組化的幾個標準，CommonJs / AMD / CMD。這裡花費一些篇幅簡單的介紹一下，比較熟悉的同學可以跳過這一部分的介紹。
（1）CommonJs 
CommonJs主要用於伺服器端的一些簡單的模組引用，如nodejs：

fs=require('fs');

對它來說，一個單獨的檔案就是一個模組，一個檔案定義一個作用域，變數在檔案內部都是私有的。
CommonJs採用了同步載入的方式，把檔案載入下來才會執行後面的程式碼，由於在服務端，檔案一般在某個目錄下，載入不需要網路，所以這種方式不用考慮網路的成本。
下面講到的AMD和CMD，主要用在瀏覽器端。

（2）AMD
Asynchronous Module Definition，非同步模組定義，requireJs是最典型的例子。這也是國外目前比較流行的模組化標準。
AMD把一個檔案（模組）裡需要用到的其它模組，定義在頭部剛開始的地方，以告訴瀏覽器，載入這個模組所需要的其它的依賴，這就把依賴前置並執行。

（3）CMD
Common Module Definition，通用模組載入規範，seaJs是典型的程式碼，一開始是由淘寶的玉伯開發。
與AMD相反的是，它不會前置去執行當前模組所有的依賴，而是在需要的地方才去引入。
關於AMD與CMD之爭由來已久，本文不討論他們的優劣。還有一個最新的標準，UMD，它想統一幾種模組化規範，有興趣的讀者可以去網上了解。

2、微信小程式的模組化

wxml、wxss、js，這三類都可以做模組化。
（1）js的模組化
首先先要了解一點，每個js裡定義的變數、函式，只在當前的檔案裡有效，也就是說每個js檔案的作用域只在檔案內部。
MINA框架其實也做了挺多模組化的封裝和合並等工作，開發的時候，我們可以不用在意自己在用的是什麼樣的標準，最後怎麼被合併，也不用去考慮網路問題，因為MINA也幫我們打好包了，按照微信小程式官方文件給出的例子來使用就行，其它的工作它都幫我們做好了。

js的模組引用語法如下：

//  a.js
var xxx = require('xxx.js')

其中，.js的字尾可以省略。匯出的語法，在每個檔案裡定義

// b.js
function yyy() {
    // ...
}
module.exports = {
  yyy: yyy
}

這樣，在a.js檔案裡，就可以用xxx.yyy來呼叫到b.js裡定義的方法。這個看起來很簡單，不過我們要關注的是怎麼去做模組化，而不是這個語法本身。

（2）wxml的模組化
wxml程式碼裡也可以根據介面上不同的部分去分塊。從主wxml檔案裡分出來的檔案，可以寫成一個模板template。
如何定義一個模板？語法很簡單

<template name="myTpl">
...
</template>

使用：

<template is="myTpl" data="{{…data}}"/>

講到模組化，這裡我們就需要把template的定義分開，放到另外的wxml檔案裡，作為另一個wxml檔案。在使用的時候，用import來引入。
假設我們的模板寫在一個單獨的檔案item.wxml裡，要在主頁面中引入：

<import src="item.wxml"/>
<template is="myTpl" data="{{...data}}"/>

這樣就可以把獨立的UI模組給拆分出來。上面傳入data的時候，注意要用…三個點把data這個object平鋪開，官方文件時規定這裡傳入的資料必須是

{{a: xxx, b: xxx}}

這樣的格式，跟wx:for還是有差別的，讀者可以測試下，後面在使用的時候多注意。

另外，微信還提供了一個include操作。跟import的區別是，import是把相應的一個檔案裡定義的模板引入進來，讓主wxml檔案可以用這個模板。而include是直接把相關檔案的原始碼、內容，原封不動的匯入進來。
微信的官方說明在這裡。
使用上，讀者可以這樣簡單地來區分：
用模板時，用import引入模板的定義；
不用模板時，用include直接把檔案內容匯入進來。
前者(import)可以理解為c語法裡的引入標頭檔案；後者可以理解為nginx裡的ssi，幫你把一個大檔案切分成多個內容塊，放到幾個小檔案裡。
給了一個非常簡單的import和include的演示程式碼在這裡。

（3）wxss的模組化
wxss也支援模組化，用@import來匯入其它wxss檔案到主wxss檔案中。這個用法跟sass或less一樣，後面記得加分號：

@import "base.wxss";

另外，這個@import語句要放在wxss檔案的最上面，測試過放中間和底部都沒用。官方文件中沒有說明，不知道是工具的bug還是框架本身是這麼設計的，總之開發者在使用的時候，注意下。還有一點提下，.wxss的字尾不能省略，之前的版本可以，v0.10.102800版本測試了省略會使整個wxss沒法解析

3、模組化的幾個小建議

對於微信小程式的開發，如果專案大了，程式碼自然就多，分的檔案可能也會比較多，這裡提幾點建議。
[1]. js共用的模組抽出來，放到一個資料夾裡，取名如common，裡面可以再按功能去分更細的模組，如網路請求模組common/net.js，工具方法集common/util.js，websocket相關模組，等等。
[2]. 把共用的頁面頭部、底部，放到page/common/ 裡面，記得把js和wxml也放在一起。
[3]. 引用外部的庫的話，把它們的檔案統一放到 lib/ 目錄裡。
[4]. 之前文章提到的頁面和檔案的目錄劃分，也不用去改。如page/ 目錄專門存放頁面，一對名字（xxx.wxml和xxx.js）就對應一個頁面，如果只是頁面的一部分，可以放到page/[page_name]/ 目錄裡，表示這個頁面專門用的模組，但如果是幾個頁面共享的，可以放在上面第2點提到的page/common/ 裡
[5]. 模板放tpl/ 目錄裡，並按頁面來分資料夾放。
[6]. 相關的event handler如果邏輯比較多，可以單獨抽出來放到一個檔案裡。

4、元件

MINA框架給我們提供了很多小元件，它們是檢視層的基本組成單元，功能相對比較獨立，而且元件風格跟微信保持得比較一致，各自有各自的特有的屬性，當然也可以自定義屬性（如data-xxx）。這裡有所有元件的介紹。

新開了個小程式技術交流群，有什麼疑問可以加到群裡提問：