如何在微信小程序中實現(xiàn)Mixins方案
前言
在原生開發(fā)小程序的過程中，發(fā)現(xiàn)有多個頁面都使用了幾乎完全一樣的邏輯。由于小程序官方并沒有提供 Mixins 這種代碼復(fù)用機制，所以只能采用非常不優(yōu)雅的復(fù)制粘貼的方式去“復(fù)用”代碼。隨著功能越來越復(fù)雜，靠復(fù)制粘貼來維護代碼顯然不科學(xué)，于是便尋思著如何在小程序里面實現(xiàn) Mixins。
什么是 Mixins
Mixins 直譯過來是“混入”的意思，顧名思義就是把可復(fù)用的代碼混入當前的代碼里面。熟悉 VueJS 的同學(xué)應(yīng)該清楚，它提供了更強大了代碼復(fù)用能力，解耦了重復(fù)的模塊，讓系統(tǒng)維護更加方便優(yōu)雅。
先看看在 VueJS 中是怎么使用 Mixins 的。
// define a mixin object
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
在上述的代碼中，首先定義了一個名為 myMixin 的對象，里面定義了一些生命周期函數(shù)和方法。接著在一個新建的組件里面直接通過 mixins: [myMixin] 的方式注入，此時新建的組件便獲得了來自 myMixin 的方法了。
明白了什么是 Mixins 以后，便可開始著手在小程序里面實現(xiàn)了。
Mixins 的機制
Mixins 也有一些小小的細節(jié)需要注意的，就是關(guān)于生命周期事件的執(zhí)行順序。在上一節(jié)的例子中，我們在 myMixin 里定義了一個 created() 方法，這是 VueJS 里面的一個生命周期事件。如果我們在新建組件 Component 里面也定義一個 created() 方法，那么執(zhí)行結(jié)果會是如何呢？
var Component = Vue.extend({
mixins: [myMixin],
created: function () {
console.log('hello from Component!')
}
})
var component = new Component()
// =>
// Hello from mixin!
// Hello from Component!
可以看運行結(jié)果是先輸出了來自 Mixin 的 log，再輸出來自組件的 log。
除了生命周期函數(shù)以外，再看看對象屬性的混入結(jié)果：
// define a mixin object
const myMixin = {
data () {
return {
mixinData: 'data from mixin'
}
}
}
// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin],
data () {
return {
componentData: 'data from component'
}
},
mounted () {
console.log(this.$data)
}
})
var component = new Component()
在 VueJS 中，會把來自 Mixins 和組件的對象屬性當中的內(nèi)容（如 data, methods等）混合，以確保兩邊的數(shù)據(jù)都同時存在。
經(jīng)過上述的驗證，我們可以得到 VueJS 中關(guān)于 Mixins 運行機制的結(jié)論：
- 生命周期屬性，會優(yōu)先執(zhí)行來自 Mixins 當中的，后執(zhí)行來自組件當中的。
- 對象類型屬性，來自 Mixins 和來自組件中的會共存。
但是在小程序中，這套機制會和 VueJS 的有一點區(qū)別。在小程序中，自定義的方法是直接定義在 Page 的屬性當中的，既不屬于生命周期類型屬性，也不屬于對象類型屬性。為了不引入奇怪的問題，我們?yōu)樾〕绦虻?Mixins 運行機制多加一條：
- 小程序中的自定義方法，優(yōu)先級為 Page > Mixins，即 Page 中的自定義方法會覆蓋 Mixins 當中的。
代碼實現(xiàn)
在小程序中，每個頁面都由 Page(options) 函數(shù)定義，而 Mixins 則作用于這個函數(shù)當中的 options 對象。因此我們實現(xiàn) Mixins 的思路就有了——劫持并改寫 Page 函數(shù)，最后再重新把它釋放出來。
新建一個 mixins.js 文件：
// 保存原生的 Page 函數(shù)
const originPage = Page
Page = (options) => {
const mixins = options.mixins
// mixins 必須為數(shù)組
if (Array.isArray(mixins)) {
delete options.mixins
// mixins 注入并執(zhí)行相應(yīng)邏輯
merge(mixins, options)
}
// 釋放原生 Page 函數(shù)
originPage(options)
}
原理很簡單，關(guān)鍵的地方在于 merge() 函數(shù)。merge 函數(shù)即為小程序 Mixins 運行機制的具體實現(xiàn)，完全按照上一節(jié)總結(jié)的三條結(jié)論來進行。
// 定義小程序內(nèi)置的屬性/方法
const originProperties = ['data', 'properties', 'options']
const originMethods = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap']
function merge (mixins, options) {
mixins.forEach((mixin) => {
if (Object.prototype.toString.call(mixin) !== '[object Object]') {
throw new Error('mixin 類型必須為對象！')
}
// 遍歷 mixin 里面的所有屬性
for (let [key, value] of Object.entries(mixin)) {
if (originProperties.includes(key)) {
// 內(nèi)置對象屬性混入
options[key] = { ...value, ...options[key] }
} else if (originMethods.includes(key)) {
// 內(nèi)置方法屬性混入，優(yōu)先執(zhí)行混入的部分
const originFunc = options[key]
options[key] = function (...args) {
value.call(this, ...args)
return originFunc && originFunc.call(this, ...args)
}
} else {
// 自定義方法混入
options = { ...mixin, ...options }
}
}
})
}
Mixins 使用
在小程序的 app.js 里引入 mixins.js
require('./mixins.js')
撰寫一個 myMixin.js
module.exports = {
data: { someData: 'myMixin' },
onShow () { console.log('Log from mixin!') }
}
在 page/index/index.js 中使用
Page({
mixins: [require('../../myMixin.js')]
})
大功告成！此時小程序已經(jīng)具備 Mixins 的能力，對于代碼解耦與復(fù)用來說將會更加方便。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
隨著移動網(wǎng)絡(luò)的發(fā)展,越來越多的人使用手機等移動端瀏覽網(wǎng)頁辦公,那么如果在手機打開頁面的時候顯示大大的聯(lián)盟廣告，用戶體驗度會非常差，經(jīng)過一番研究，用下面的方法實現(xiàn)了移動端瀏覽器不顯示PC端廣告。2015-10-10![js中[]、{}、()區(qū)別示例淺析](http://img.jbzj.com/images/xgimg/bcimg1.png)
很多人都知道在js中[]表示的是數(shù)組對象,{}表示的是對象,但是這兩者的區(qū)別卻說不出來,下面這篇文章主要給大家介紹了關(guān)于js中[]、{}、()區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
javascript動態(tài)添加checkbox復(fù)選框的方法
這篇文章主要介紹了javascript動態(tài)添加checkbox復(fù)選框的方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
本文主要介紹了原生javascript上傳圖片帶進度條的實例詳解。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
DOM就是Html頁面的模型，將每個標簽都做為一個對象，JavaScript通過調(diào)用DOM中的屬性、方法就可以對網(wǎng)頁中的文本框、層等元素進行編程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設(shè)置文本框中的值。2015-07-07
JavaScript高級程序設(shè)計閱讀筆記（十六） javascript檢測瀏覽器和操作系統(tǒng)-detect.js
javascript檢測瀏覽器和操作系統(tǒng) detect.js使用介紹，需要的朋友可以參考下2012-08-08
本文通過實例代碼給大家介紹了jQuery EasyUI window窗口使用功能，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了微信小程序中實現(xiàn)自定義Navbar方法,Navbar由 StatusBar和TitleBar組成,只需要知道它們各自的高度,就可以很好地完成自定義,需要的朋友可以參考下2024-05-05
xml分頁+ajax請求數(shù)據(jù)源+dom取結(jié)果實例代碼
最近做的一個項目里的某個小功能,主要是為了方便選擇數(shù)據(jù) 演示地址:由于有惡意程序，所以去掉地址2008-10-10
這篇文章主要介紹了JavaScript導(dǎo)出Excel的方法,以實例形式詳細分析了javascript將WEB頁面導(dǎo)出為EXCEL文檔的方法及相關(guān)的技巧說明,對于深入了解javascript編程原理有一定的借鑒價值,需要的朋友可以參考下2014-11-11