寫在(zài)前面

從去年底到(dào)今年初，由于(yú)工作繁重以(yǐ)及一些私人(rén)的(de)事情需要(yào / yāo)處理，耽誤了(le／liǎo)公衆号更新。這(zhè)周開始恢複更新了(le／liǎo)。

之(zhī)前的(de)文章中，我也(yě)對微信小程序中的(de)代碼複用問題進行了(le／liǎo)闡述。曆史文章在(zài)這(zhè)裏：

微信小程序頁面代碼複用探索（一）——  存在(zài)的(de)問題及需求

文中提到(dào)的(de)方案，其實在(zài)去年的(de)時(shí)候，我已經實現了(le／liǎo)。本文将進行初步的(de)介紹。

Zero

我給自己的(de)解決方案取名爲(wéi / wèi)Zero。它是(shì)一個(gè)輕量級的(de)，擁有命名空間的(de)，基于(yú)Page層mixin的(de)微信小程序代碼邏輯複用方案。

Zero分爲(wéi / wèi)了(le／liǎo)兩部分：Zero-loader 和(hé / huò) Zero.js。

Zero-loader負責轉譯wxml代碼。在(zài)開發wxml時(shí)，可以(yǐ)将命名空間聲明在(zài)模闆上(shàng)，Zero-loader會進行識别，并且将命名空間編譯到(dào)模闆的(de)變量中。

Zero.js是(shì)一個(gè)運行時(shí)，對外暴露了(le／liǎo)三個(gè)接口：Base，Compose，Merge。Base确認頁面主邏輯，Compose根據命名空間、組合多個(gè)mixin，Merge合并mixin和(hé / huò)頁面主邏輯。

整個(gè)Zero的(de)示意圖如下：

各個(gè)mixin之(zhī)間進行了(le／liǎo)相互隔離，僅能通過頁面主對象進行中轉，解決傳統mixin方案的(de)命名沖突、隐式依賴的(de)問題。

可以(yǐ)将頁面公用的(de)邏輯拆成公用mixin方便複用，也(yě)可以(yǐ)将頁面業務分模塊拆分爲(wéi / wèi)業務mixin，方便維護、叠代。

Zero實例

像開發Page一樣開發Mixin，且不(bù)用擔心命名沖突等問題，可以(yǐ)專注于(yú)頁面代碼邏輯拆分。以(yǐ)一個(gè)動态标題欄爲(wéi / wèi)例。動态标題欄會在(zài)多個(gè)頁面使用，但是(shì)這(zhè)裏的(de)邏輯卻無法進行優雅的(de)拆分。使用Zero後，可以(yǐ)将動态标題欄抽出(chū)作爲(wéi / wèi)一個(gè)mixin：

Zero特點

1、在(zài)Page層實現mixin，解決原生Component無法覆蓋的(de)代碼複用場景。

2、各Mixin相互隔離，僅能通過Page中轉，解決傳統mixin方案的(de)命名沖突、隐式依賴的(de)問題，方便邏輯拆分。

3、原生方案，輕量級、漸進式，改造簡單，接入方便。

Zero比較适合多人(rén)協作的(de)，追求穩定，使用原生方法開發的(de)複雜微信小程序。

寫在(zài)後面

當初Zero的(de)誕生，完全是(shì)爲(wéi / wèi)了(le／liǎo)解決業務開發中的(de)痛點。如今，微信小程序已經官方支持Page層的(de)mixin了(le／liǎo)。說(shuō)明當初的(de)思路是(shì)有可取的(de)地(dì / de)方的(de)。後續可能會對Zero進行開源，歡迎各位小夥伴多多交流了(le／liǎo)。