小程序 - 简单实现mixin功能
前言
在业务中有没有一个场景:多个页面需要用到一样的 data 和 method,或者生命周期都需要执行同样的操作。我们在每个页面都写上重复的代码,一但功能修改就要更新多个页面,在后期维护起来会很麻烦。
那么有没有一个方法将同样的业务存放到一个文件中去管理呢?其实这个问题Vue已经告诉我们了,那就是Mixin功能。
Mixin是一种将可重用功能分布到组件的灵活方法。mixin对象可以包含任何组件选项。当组件使用mixin时,mixin中的所有选项都将被“混合”到组件的选项中。
实现功能
- 全局mixin方法
- 页面mixins选项
优先级
在合并时发生冲突的优先级
使用设计
全局mixin:
页面mixin:
实现思路
1.每个页面的Page都是一个函数,可以对Page封装,做一个代理
2.检查是否有全局mixin,合并到页面mixins中
3.获取页面的mixins,对data、method、lifecycle等进行合并
代码实现
const nativePage = Page
const lifecycle = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll']
let globalMixin = null //全局mixin方法
wx.mixin = function(config){
if(isType(config,'object')){
globalMixin = config
}
} //原生Page代理
Page = function (config) {
let mixins = config.mixins
//加入全局mixin
if(globalMixin){
(mixins || (mixins=[])).unshift(globalMixin)
}
if (isType(mixins, 'array') && mixins.length > 0) {
Reflect.deleteProperty(config, 'mixins')
merge(mixins, config)
}
nativePage(config)
} function merge(mixins, config) {
mixins.forEach(mixin => {
if (isType(mixin, 'object')) {
//合并data、生命周期以及其他数据
Object.keys(mixin).forEach(key => {
if (key === 'data') {
config[key] = Object.assign({}, mixin[key], config[key])
} else if (lifecycle.includes(key)) {
let nativeLifecycle = config[key]
config[key] = function () {
let arg = Array.prototype.slice.call(arguments)
mixin[key].call(this, arg)
return nativeLifecycle && nativeLifecycle.call(this, arg)
}
} else {
config[key] = mixin[key]
}
})
}
})
} //判断类型工具
function isType(target, type) {
let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
type = type.toLowerCase()
return targetType === type
}
在 app.js 引入 mixin 文件就可以使用
小程序 - 简单实现mixin功能的更多相关文章
- 让你的微信小程序具有在线支付功能
前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)
微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...
- 微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: https://gi ...
- 微信小程序开发平台新功能「云开发」快速上手体验
微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...
- 微信小程序又一爆炸功能上线-云开发
云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...
- 微信小程序产品定位及功能介绍
产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...
- 微信小程序简单入门1
参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1 创建项目 开发者工具安装完成后,打开并使用微信扫码登录.选择创建"项 ...
- 微信小程序简单入门理解
简单的小程序示例结构: (一):理解小程序结构app.js,app.json,app.wxss ①app.js,app.json是小程序结构必要的部分,app.wxss可选择 ②app.js用于创建小 ...
随机推荐
- layer弹框的上面各个属性 -可配置
<script type="text/javascript"> 12 //eg 13 layer.open({ 14 title:"标题信息提示", ...
- idea 常用功能
Ctrl + E:打开最近文件 双击 Shift:按文件名查找文件 Ctrl + Shift + F:全局搜索 Alt + ~(数字 1 左边的键):commit.push 代码 ...
- shell脚本3——调试
bash -x file.sh 这样会把执行到的语句全部打印出来 #!/bin/bash 不会打印的程序块 set -v 需要打印的程序块 set -v 不会打印的程序块
- boost.asio新框架的设计概念总结
1.66版本,boost.asio库重新设计了框架,目前最新版为1.71.读了几天代码后,对框架中相关概念总结.因为是泛型编程的库,所以分析的概念层的设计. 可通过boost官方文档,strand的1 ...
- MAC OS下编译apple跨平台的libevent库 (可延申到其它第三库)
apple下的跨平台是指不同设备上的苹果系统以及同一系统在不同cpu体系的不同版本. 前面一篇介绍如何用ndk编译android跨平台的第三库,那样的方法却不能应用在apple上. 网上可以找到这么一 ...
- jeson navo
QT TEMPLATE = app CONFIG += console c++11 CONFIG -= app_bundle CONFIG -= qt INCLUDEPATH += /usr/loca ...
- this绑定方式总结
最近在回顾js的一些基础知识,把<你不知道的js>系列又看了一遍,this始终是重中之重,还是决定把this相关知识做一个系统的总结,也方便自己日后回顾. this的四条绑定规则 1.默认 ...
- epoll介绍及使用
小程序功能:简单的父子进程之间的通讯,子进程负责每隔1s不断发送"message"给父进程,不需要跑多个应用实例,不需要用户输入. 首先上代码 #include<assert ...
- 你必须知道的容器日志 (1) Docker logs & logging driver
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.监控和日志历来都是系统稳定运行和问题排查的关键,在微服务架构中,数量众多的容器以 ...
- ubuntu server 1604 搭建FTP服务器
1.查看是否安装 ftp服务器vsftpd -v 2.安装ftp服务器sudo apt-get install vsftpd 3.如果安装失败或者配置出现问题,可以卸载 ftp服务器sudo apt- ...