現(xiàn)有的代碼復(fù)用方案及其問題

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

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

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

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

實現(xiàn)一個新的代碼復(fù)用方案吧

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

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代碼：
<view style='background: {{ titleBarStyle }}'>
  ...
</view>

組件使用方法：

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

// Page頁面 wxml文件，引用title-bar對應(yīng)的wxml
...
<include src=http://www.wxapp-union.com/"title-bar.wxml" />
...

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

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

總結(jié)一下，最終想要達(dá)到的目標(biāo)是：

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

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

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

事實上，滿足上述三個目標(biāo)的解決方案，我已經(jīng)實現(xiàn)了70%了。在后續(xù)的文章中，我會進(jìn)行進(jìn)一步的介紹。

寫在后面

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