在小程式中實現 Mixins 方案

摘要：小程式開發技巧

原文：在小程式中實現 mixins 方案

在原生開發小程式的過程中，發現有多個頁面都使用了幾乎完全一樣的邏輯。由於小程式官方並沒有提供 mixins 這種**復用機制，所以只能採用非常不優雅的複製貼上的方式去「復用」**。隨著功能越來越複雜，靠複製貼上來維護**顯然不科學，於是便尋思著如何在小程式裡面實現 mixins。

mixins 直譯過來是「混入」的意思，顧名思義就是把可復用的**混入當前的**裡面。熟悉 vuejs 的同學應該清楚，它提供了更強大了**復用能力，解耦了重複的模組，讓系統維護更加方便優雅。

先看看在 vuejs 中是怎麼使用 mixins 的。

// define a mixin object
var mymixin = ,
methods: 
}}// define a component that uses this mixin
var component = vue.extend()
var component = new component() // => "hello from mixin!"

在上述的**中，首先定義了乙個名為mymixin的物件，裡面定義了一些生命週期函式和方法。接著在乙個新建的元件裡面直接通過mixins: [mymixin]的方式注入，此時新建的元件便獲得了來自mymixin的方法了。

明白了什麼是 mixins 以後，便可開始著手在小程式裡面實現了。

mixins 也有一些小小的細節需要注意的，就是關於生命週期事件的執行順序。在上一節的例子中，我們在mymixin裡定義了乙個created()方法，這是 vuejs 裡面的乙個生命週期事件。如果我們在新建元件component裡面也定義乙個created()方法，那麼執行結果會是如何呢？

var component = vue.extend(
})var component = new component()
// =>
// hello from mixin!
// hello from component!

可以看執行結果是先輸出了來自 mixin 的 log，再輸出來自元件的 log。

除了生命週期函式以外，再看看物件屬性的混入結果：

在 vuejs 中，會把來自 mixins 和元件的物件屬性當中的內容（如data,methods等）混合，以確保兩邊的資料都同時存在。

經過上述的驗證，我們可以得到 vuejs 中關於 mixins 執行機制的結論：

生命週期屬性，會優先執行來自 mixins 當中的，後執行來自元件當中的。

物件型別屬性，來自 mixins 和來自元件中的會共存。

但是在小程式中，這套機制會和 vuejs 的有一點區別。在小程式中，自定義的方法是直接定義在 page 的屬性當中的，既不屬於生命週期型別屬性，也不屬於物件型別屬性。為了不引入奇怪的問題，我們為小程式的 mixins 執行機制多加一條：

小程式中的自定義方法，優先順序為 page > mixins，即 page 中的自定義方法會覆蓋 mixins 當中的。

在小程式中，每個頁面都由page(options)函式定義，而 mixins 則作用於這個函式當中的options物件。因此我們實現 mixins 的思路就有了——劫持並改寫page函式，最後再重新把它釋放出來。

新建乙個mixins.js檔案：

// 儲存原生的 page 函式
const originpage = page
page = (options) => 
// 釋放原生 page 函式
originpage(options)
}

原理很簡單，關鍵的地方在於merge()函式。merge函式即為小程式 mixins 執行機制的具體實現，完全按照上一節總結的三條結論來進行。

// 定義小程式內建的屬性/方法
const originproperties = ['data', 'properties', 'options']
function merge (mixins, options) 
// 遍歷 mixin 裡面的所有屬性
for (let [key, value] of object.entries(mixin)) 
} else if (originmethods.includes(key)) 
} else }}
})return options
}

require('./mixins.js')

撰寫乙個mymixin.js

module.exports = ,
onshow () 
}

在page/index/index.js中使用

大功告成！此時小程式已經具備 mixins 的能力，對於**解耦與復用來說將會更加方便。

在小程式中實現 Mixins 方案

在小程式中實現收縮展開

小話灰度方案實現

python實現小程式 python實現小程式

在小程式中實現 Mixins 方案

在小程式中實現收縮展開

小話灰度方案實現

python實現小程式 python實現小程式

相關推薦