小程序模板網(wǎng)

微信小程序開發(fā)系列分析《四》模塊化

發(fā)布時(shí)間:2018-03-24 15:32 所屬欄目:小程序開發(fā)教程

微信小程序的MINA框架,其實(shí)是許多前端開發(fā)技術(shù)的組合。這篇文章中,我們來簡單地討論一下模塊化。

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


本文地址:http://22321a.com/wxmini/doc/course/22858.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢