寫在前面

微信小程序開發的碎碎念

在上一篇文章的碎碎念中，我提到了小程序開發中一個比較尷尬的問題：代碼復用問題。到這周為止，我一個頁面的js代碼行數已經達到了2000+，并且還有繼續增加的趨勢。維護這一坨代碼的難度正在慢慢增加。是時候解決代碼復用的問題了。

現有的代碼復用方案及其問題

現有的代碼復用方案，使用微信小程序的組件Component。Component本身就是一種代碼復用。而且在Component中，還提供了Behavior來共享代碼。但是，這種解決方案并不能覆蓋所有場景。

舉一個例子，我的頁面中需要實現一個自定義title-bar，當頁面滑動時，滑到一定的位置，這個title-bar的背景需要變成透明的，當滑動到另外一個位置時，title-bar需要變成純色的。顯然，我們需要在Page的onPageScroll中，去實現邏輯。現在，在另外一個頁面中，又需要同樣效果的title-bar。很自然的，我們需要把這個title-bar剝離成一個組件，頁面直接引用，盡量不需要在Page頁面中寫邏輯。比較遺憾的是，使用Compoent做不到這一點。不管怎樣，都需要在對應Page中的onPageScroll里去寫邏輯。

其次，Component提供的Behavior，本質上是一種mixin。而mixin方案本身存在命名沖突，隱式依賴的問題。當多人協作開發同一個復雜頁面、組件時，如果沒有實現約定以及充分溝通，一不小心把別人的方法覆蓋了（或被覆蓋了），就尷尬了（我就踩坑了）。

我認為，微信小程序缺少一個相互隔離、顯性依賴的頁面層代碼復用方案。

實現一個新的代碼復用方案吧

既然微信暫時沒有提供這樣的解決方案，那自己來實現一個好了。既然自己實現，那就先明確一下需求。以上面的title-bar舉例，我想實現的效果大致如下。

title-bar組件js代碼，像寫Page代碼一樣：

// title-bar組件 js文件export default { ...data: { titleBarStyle: 'rgb(255,0,0)'},onPageScroll: function (e) {this.handleTitleBarChange(e.scrollTop);},handleTitleBarChange() {...this.setData({titleBarStyle: 'transparent'});...}...}

// title-bar組件wxml代碼：...

組件使用方法：

// Page頁面 js文件Page({...// 直接引用titlecomponents: ['title-bar.js'],...});

// Page頁面 wxml文件，引用title-bar對應的wxml......

上面的代碼和mixin很類似。前文也提到了，mixin會有命名沖突，隱式依賴的問題。其他組件里面萬一也有一個handleTitleBarChange的方法，相互覆蓋咋辦。新的解決方案需要處理這個問題。

同時，新的解決方案最好可以是漸進式、輕量級的，方便現有小程序代碼進行改造。

總結一下，最終想要達到的目標是：

1、像寫Page一樣寫”組件“，在Page中直接引用即可復用代碼。

2、避免命名沖突和隱式依賴。

3、輕量級，方便已有頁面接入。

事實上，滿足上述三個目標的解決方案，我已經實現了70%了。在后續的文章中，我會進行進一步的介紹。

寫在后面

對于微信小程序開發這個領域，我深度接觸的時間并不長。有什么其他解決頁面層的代碼復用問題的方案嗎？歡迎交流。