小程序 - 简单实现mixin功能
时间:2022-07-23
本文章向大家介绍小程序 - 简单实现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 文件就可以使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 中cookie的处理详解
- Android UI设计与开发之ViewPager仿微信引导界面以及动画效果
- Android UI设计与开发之ViewPager介绍和简单实现引导界面
- Android RollPagerView实现轮播图
- Android UI设计与开发之使用ViewPager实现欢迎引导页面
- Android ListView里控件添加监听方法的实例详解
- Android实现底部图片选择Dialog
- AndroidImageSlider实现炫酷轮播广告效果
- Android获取手机本机号码的实现方法
- Android中RecyclerView的item宽高问题详解
- Andoroid实现底部图片选择Dialog效果
- Android中ExpandableListView使用示例详解
- Android 高德地图之poi搜索功能的实现代码
- Android实现底部弹出按钮菜单升级版
- Android实现单页面浮层可拖动view的示例代码