在小程序中实现 Mixins 方案
原文来自我的博客:jrainlau.github.io/#/article?n…
在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂,靠复制粘贴来维护代码显然不科学,于是便寻思着如何在小程序里面实现 Mixins。
什么是 Mixins
Mixins 直译过来是“混入”的意思,顾名思义就是把可复用的代码混入当前的代码里面。熟悉 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 = PagePage = (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 的能力,对于代码解耦与复用来说将会更加方便。
转载于:https://juejin.im/post/5d0a07eb6fb9a07eba2c4142
在小程序中实现 Mixins 方案相关推荐
- 如何确定用户在多个小程序中唯一标识的处理方案
背景说明 最近需要做一个招聘类的小程序,其中支持登录用户可以进行求职和招聘角色切换.第一个面临的问题是基于一个小程序还是两个小程序的问题,由于求职端和招聘端用户登录之后底部显示的页签模块是不一 ...
- ZEGO即构科技携小程序连麦直播方案亮相GMIC
4月26日,GMIC 2018 全球移动互联网大会在北京国家会议中心隆重开幕.作为全球规模最大.最具影响力的移动互联网行业会议,GMIC大会被认为是创新领域的窗口,见证了中国移动互联网十来年的高速发展 ...
- 小程序无限层级路由方案
作者:大转转FE-吴鹏和 小程序原生页面存在层级限制,超过一定层数就会无法打开新页面.一开始这个限制为不超过5层,目前是不超过10层. 这个限制对于体量较大的小程序来说,挺难受的.特别是只能打开5层那 ...
- 即构推出小程序连麦直播方案,与iOSAndroid APP互通连麦!
2017年12 月 26 日,微信小程序正式对外开放了实时音视频录制及播放能力.符合类目要求(见下方表格)的小程序自助开通后,可自建或使用云服务,实现单向和互动的音视频功能,如视频直播.互动直播.在线 ...
- Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报 如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
- 微信小程序中嵌套html_微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
- 怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标iconfont 国际惯例,先上图: 概要 一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷.但是当我需要将项目迁移的小程序的时候,就遇到了很多 ...
- 微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
- 微信小程序中使用emoji表情相关说明
本帖将聚合一些跟emoji表情有关的知识:前端传过来的昵称和备注信息一定要经过严格的正则表达式过滤,放置出现XSS等攻击,另外emoji字体表情库应该使用base64_encode编码,拿信息的时候b ...
最新文章
- 杂项题的基本解题思路——3、压缩文件处理
- 乐鑫ESP32完美对标AP6212,国产芯片不缺货,不涨价!牛
- 牛客网测试题--小a和黄金街道
- SSM综合练习表结构介绍
- OrCAD分裂元件的使用方法
- 自己动手写CPU(7)转移指令的实现
- Html去掉链接虚线边框
- java简单的文本编辑器_采用java语言如何建立一个简单的文本编辑器
- PHP、Python 上榜最慢的现代编程语言
- QT下信号与槽不在同一个线程中如何connect
- 记忆模糊知识点5-11
- Revit二次开发——族的基础
- DNF——一开游戏,TP刚读完条就蓝屏(终止代码:KMODE_EXCEPTION_NOT_HANDLED)的解决方法
- 立创开源 | 基于ESP-01的桌面小彩灯
- es6的15道面试题
- python数据可视化是什么_Python数据可视化的四种简易方法
- 【html标签复习】
- 如何解决ARP欺骗攻击
- matlab guide图像处理实例,现代数字图像处理技术提高及应用案例详解 MATLAB版-教科书.pdf...
- PLC学习 20191229