微信小程序開發(fā)系列分析《四》模塊化
發(fā)布時間：2018-03-24 15:32 所屬欄目：小程序開發(fā)教程
微信小程序的MINA框架，其實是許多前端開發(fā)技術的組合。這篇文章中，我們來簡單地討論一下模塊化。
作者：jsong
原文地址（已獲授權）
作者微信公眾號：半圓生活，歡迎關注
1、模塊化標準
玩前端的同學大部分都知道模塊化的幾個標準，CommonJs / AMD / CMD。這里花費一些篇幅簡單的介紹一下，比較熟悉的同學可以跳過這一部分的介紹。
（1）CommonJs
CommonJs主要用于服務器端的一些簡單的模塊引用，如nodejs：
fs=require('fs');
對它來說，一個單獨的文件就是一個模塊，一個文件定義一個作用域，變量在文件內(nèi)部都是私有的。
CommonJs采用了同步加載的方式，把文件加載下來才會執(zhí)行后面的代碼，由于在服務端，文件一般在某個目錄下，加載不需要網(wǎng)絡，所以這種方式不用考慮網(wǎng)絡的成本。
下面講到的AMD和CMD，主要用在瀏覽器端。
（2）AMD
Asynchronous Module Definition，異步模塊定義，requireJs是最典型的例子。這也是國外目前比較流行的模塊化標準。
AMD把一個文件（模塊）里需要用到的其它模塊，定義在頭部剛開始的地方，以告訴瀏覽器，加載這個模塊所需要的其它的依賴，這就把依賴前置并執(zhí)行。
（3）CMD
Common Module Definition，通用模塊加載規(guī)范，seaJs是典型的代碼，一開始是由淘寶的玉伯開發(fā)。
與AMD相反的是，它不會前置去執(zhí)行當前模塊所有的依賴，而是在需要的地方才去引入。
關于AMD與CMD之爭由來已久，本文不討論他們的優(yōu)劣。還有一個最新的標準，UMD，它想統(tǒng)一幾種模塊化規(guī)范，有興趣的讀者可以去網(wǎng)上了解。
2、微信小程序的模塊化
wxml、wxss、js，這三類都可以做模塊化。
（1）js的模塊化
首先先要了解一點，每個js里定義的變量、函數(shù)，只在當前的文件里有效，也就是說每個js文件的作用域只在文件內(nèi)部。
MINA框架其實也做了挺多模塊化的封裝和合并等工作，開發(fā)的時候，我們可以不用在意自己在用的是什么樣的標準，最后怎么被合并，也不用去考慮網(wǎng)絡問題，因為MINA也幫我們打好包了，按照微信小程序官方文檔給出的例子來使用就行，其它的工作它都幫我們做好了。
js的模塊引用語法如下：
// a.js
var xxx = require('xxx.js')
導出的語法，在每個文件里定義
// b.js
function yyy() {
// ...
}
module.exports = {
yyy: yyy
}
這樣，在a.js文件里，就可以用xxx.yyy來調(diào)用到b.js里定義的方法。這個看起來很簡單，不過我們要關注的是怎么去做模塊化，而不是這個語法本身。
（2）wxml的模塊化
wxml代碼里也可以根據(jù)界面上不同的部分去分塊。從主wxml文件里分出來的文件，可以寫成一個模板template。
如何定義一個模板？語法很簡單
<template name="myTpl">
...
</template>
使用：
<template is="myTpl" data=""/>
講到模塊化，這里我們就需要把template的定義分開，放到另外的wxml文件里，作為另一個wxml文件。在使用的時候，用import來引入。
假設我們的模板寫在一個單獨的文件item.wxml里，要在主頁面中引入：
<import src="item.wxml"/>
<template is="myTpl" data=""/>
這樣就可以把獨立的UI模塊給拆分出來。上面?zhèn)魅雂ata的時候，注意要用…三個點把data這個object平鋪開，這個是微信文檔中給的規(guī)定，讀者可以測試下，后面在使用的時候多注意。
另外，微信還提供了一個include操作。跟import的區(qū)別是，import是把相應的一個文件里定義的模板引入進來，讓主wxml文件可以用這個模板。而include是直接把相關文件的源碼、內(nèi)容，原封不動的導入進來。
微信的官方說明在這里。
使用上，讀者可以這樣簡單地來區(qū)分：
用模板時，用import引入模板的定義；
不用模板時，用include直接把文件內(nèi)容導入進來。
前者(import)可以理解為c語法里的引入頭文件；后者可以理解為nginx里的ssi，幫你把一個大文件切分成多個內(nèi)容塊，放到幾個小文件里。
給了一個非常簡單的import和include的演示代碼在這里。
（3）wxss的模塊化
wxss也支持模塊化，用@import來導入其它wxss文件到主wxss文件中。這個用法跟sass或less一樣，后面記得加分號：
@import base.wxss
3、模塊化的幾個小建議
對于微信小程序的開發(fā)，如果項目大了，代碼自然就多，分的文件可能也會比較多，這里提幾點建議。
[1]. js共用的模塊抽出來，放到一個文件夾里，取名如common，里面可以再按功能去分更細的模塊，如網(wǎng)絡請求模塊common/net.js，工具方法集common/util.js，websocket相關模塊，等等。
[2]. 把共用的頁面頭部、底部，放到page/common/ 里面，記得把js和wxml也放在一起。
[3]. 引用外部的庫的話，把它們的文件統(tǒng)一放到 lib/ 目錄里。
[4]. 之前文章提到的頁面和文件的目錄劃分，也不用去改。如page/ 目錄專門存放頁面，一對名字（xxx.wxml和xxx.js）就對應一個頁面，如果只是頁面的一部分，可以放到page/[page_name]/ 目錄里，表示這個頁面專門用的模塊，但如果是幾個頁面共享的，可以放在上面第2點提到的page/common/ 里
[5]. 模板放tpl/ 目錄里，并按頁面來分文件夾放。
[6]. 相關的event handler如果邏輯比較多，可以單獨抽出來放到一個文件里。
4、組件
MINA框架給我們提供了很多小組件，它們是視圖層的基本組成單元，功能相對比較獨立，而且組件風格跟微信保持得比較一致，各自有各自的特有的屬性，當然也可以自定義屬性（如data-xxx）。這里有所有組件的介紹。
后面有一個文章專門介紹幾個常用的組件，本文就簡單提一下組件。
