摘要:明白了什么是以后,便可開始著手在小程序里面實現了。但是在小程序中,這套機制會和的有一點區別。代碼實現在小程序中,每個頁面都由函數定義,而則作用于這個函數當中的對象。函數即為小程序運行機制的具體實現,完全按照上一節總結的三條結論來進行。
原文來自我的博客:https://jrainlau.github.io/#/...
在原生開發小程序的過程中,發現有多個頁面都使用了幾乎完全一樣的邏輯。由于小程序官方并沒有提供 Mixins 這種代碼復用機制,所以只能采用非常不優雅的復制粘貼的方式去“復用”代碼。隨著功能越來越復雜,靠復制粘貼來維護代碼顯然不科學,于是便尋思著如何在小程序里面實現 Mixins。
什么是 MixinsMixins 直譯過來是“混入”的意思,顧名思義就是把可復用的代碼混入當前的代碼里面。熟悉 VueJS 的同學應該清楚,它提供了更強大了代碼復用能力,解耦了重復的模塊,讓系統維護更加方便優雅。
先看看在 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 的對象,里面定義了一些生命周期函數和方法。接著在一個新建的組件里面直接通過 mixins: [myMixin] 的方式注入,此時新建的組件便獲得了來自 myMixin 的方法了。
明白了什么是 Mixins 以后,便可開始著手在小程序里面實現了。
Mixins 的機制Mixins 也有一些小小的細節需要注意的,就是關于生命周期事件的執行順序。在上一節的例子中,我們在 myMixin 里定義了一個 created() 方法,這是 VueJS 里面的一個生命周期事件。如果我們在新建組件 Component 里面也定義一個 created() 方法,那么執行結果會是如何呢?
var Component = Vue.extend({ mixins: [myMixin], created: function () { console.log("hello from Component!") } }) var component = new Component() // => // Hello from mixin! // Hello from Component!
可以看運行結果是先輸出了來自 Mixin 的 log,再輸出來自組件的 log。
除了生命周期函數以外,再看看對象屬性的混入結果:
// 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 和組件的對象屬性當中的內容(如 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) => { const mixins = options.mixins // mixins 必須為數組 if (Array.isArray(mixins)) { delete options.mixins // mixins 注入并執行相應邏輯 options = merge(mixins, options) } // 釋放原生 Page 函數 originPage(options) }
原理很簡單,關鍵的地方在于 merge() 函數。merge 函數即為小程序 Mixins 運行機制的具體實現,完全按照上一節總結的三條結論來進行。
// 定義小程序內置的屬性/方法 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)) { // 內置對象屬性混入 options[key] = { ...value, ...options[key] } } else if (originMethods.includes(key)) { // 內置方法屬性混入,優先執行混入的部分 const originFunc = options[key] options[key] = function (...args) { value.call(this, ...args) return originFunc && originFunc.call(this, ...args) } } else { // 自定義方法混入 options = { ...mixin, ...options } } } }) return 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")] })
大功告成!此時小程序已經具備 Mixins 的能力,對于代碼解耦與復用來說將會更加方便。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104845.html
摘要:監聽點贊事件廣播重點在這里我的動態頁面收到點贊變化通知進行更新操作監聽發布事件廣播重點在這里我的動態頁面收到發布動態通知進行更新操作重點在這里至此,我們在小程序中完美的實現了跨頁面組件多頁面數據同步。 導語:本文主要介紹在小程序中,多頁面之間如何保持數據同步 在很多的產品中,都會存在跨頁面間需要數據同步,如下示例: showImg(https://user-gold-cdn.xitu.io...
摘要:傳統的網頁編程采用的三劍客來實現,在微信小程序中同樣有三劍客。觀察者模式不難實現,重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統的事件傳遞類型有冒泡型與捕獲型,微信小程序中自然也有。 本文由作者鄒永勝授權網易云社區發布。 簡介為了更好的展示我們即時通訊SDK強悍的能力,網易云信IM SDK微信小程序DEMO的開發就提上了日程。用產品的話說就是: 云信 IM 小程序 S...
其實我們本篇文章主要講述的就是需要將采集的數據積累下來,變成企業的數字資產?! 》e累數據最好的方式就是把數據存入數據庫,低碼工具除了有可視化編程的便利外,不僅如此還有提供了線上的文檔型數據庫。文檔數據庫相比傳統數據庫,文檔數據庫的返回結構是JSON格式,直接就可以在前端進行渲染。關系型數據庫還得通過代碼進行轉譯。 我們現在還講另外一個方面是文檔數據庫的類型更豐富,有附件、富文本、自動編號、數...
閱讀 2255·2023-04-26 02:14
閱讀 2926·2021-09-30 09:46
閱讀 2101·2021-09-24 09:48
閱讀 952·2021-09-24 09:47
閱讀 3252·2019-08-30 15:44
閱讀 1879·2019-08-30 15:44
閱讀 3279·2019-08-30 14:18
閱讀 1949·2019-08-30 12:58