在小程序中实现全局混入,以混入的形式扩展小程序的api
GitHub:
https://github.com/WozHuang/mp-extend
相关文章:
小程序全局状态管理,在页面中获取globalData和使用globalSetData
通过页面预加载(preload)提升小程序的响应速度
主要目标
小程序本身的坑不少,开发时免不了需要引入或大或小的框架。而目前的小程序开发框架基本分为两种,一种是以Taro、wePY这种以其他技术栈开发小程序,一种是在原有的小程序开发模式上进行扩展。
对于新建立的项目,选择何种框架全凭喜好,可以优先考虑与团队技术栈相关的开发框架。但是多数时候开发者还是使用小程序官方的开发方式,并且已经开发了一段时间并投入使用了,这时再考虑引入框架代价就有点大了,于是我就在寻找一个能够在不改动现有代码前提下扩展小程序api的框架。
寻找资料
参考了westore,omix,wxpage等基于小程序自身扩展的框架后,发现他们统一都是在APP、Page、Component构造函数上做文章,对页面本身的PageOption进行操作,实现扩展api的功能。
小程序中有部分Vue和React的影子(data属性,setData方法),而Vue和React都有mixin这种扩展组件的方式,于是便考虑在Page构造函数上做文章,提供全局混入的能力来扩展api。
代码实现
我实现混入中的两个主要函数:
1. 装饰函数
使用装饰方法对PageOption(Page函数调用时传入的参数)中的生命周期函数(onLoad等)进行修改,调用混入的生命周期方法。
// 对原有函数进行修改,返回结果是原函数的返回结果
// 在调用原函数之前调用所有装饰器
function decorate(f, ...decorators) {
return function () {
for (const decorator of decorators) {
decorator && decorator.apply(this, arguments);
}
return f && f.apply(this, arguments);
};
}
2. 合并混入对象
使用mixin函数将混入中的对象与PageOption原有的对象进行合并
/**
* 实现混入的效果
* 类似 Object.assign, 但在遇见相同属性名均是对象时会递归进行合并而非直接覆盖
* 注:如果存在引用循环递归会栈溢出
*/
function mixin(o, ...mixs) {
mixs.forEach(mix => {
for (const key in mix) {
// 两个属性都是对象则递归合并
if (isObject(o[key]) && isObject(mix[key])) {
mixin(o[key], mix[key]);
} else {
o[key] = o[key] || mix[key];
}
}
// 拷贝symbol类型,(可惜小程序不支持)
for (const sym of Object.getOwnPropertySymbols(mix)) {
o[sym] = o[sym] || mix[sym];
}
});
return o;
}
3. 重写Page函数(App,Component同理)
在调用Page函数前将所有混入对象合并到PageOption中
// base.Page 页面的基类,包含所有混入对象的非生命周期属性
// lifeMixin.Page 包含所有混入对象的生命周期函数
// life.Page 一个数组包含Page所有的生命周期 ['onLoad', 'onShow', ...]
const _Page = decorate(Page, function (option) {
// 合并非生命周期属性
mixin(option, base.Page);
// 合并生命周期属性
for (const lifeTime of life.Page) {
option[lifeTime] = decorate(option[lifeTime], ...lifeMixin.Page[lifeTime]);
}
// preprecess是扩展的生命周期,在Page函数调用前被调用,可以用于修改PageOption
option['preproccess'] && option['preproccess'].call(option, option);
});
通过重写Page函数在将混入对象合并到PageOption中实现全局混入的功能,最后只需要在现有代码前加入一行 Page = _Page;
,即可实现全局混入的能力而无需修改其他代码。
使用示例
能够方便地以全局混入的方式扩展api,以下是一个简单示例:混入data属性 和 添加PV统计功能
Page: {
data: {
exData: '所有页面的data都会获得exData属性'
},
onLoad(){
console.log(`PV统计: 在${formatTime(new Date())} 打开了页面 ${this.__route__}`)
}
}
在小程序中实现全局混入,以混入的形式扩展小程序的api的更多相关文章
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- C#程序中设置全局代理(Global Proxy)
1. HttpWebRequest类的Proxy属性,只要设置了该属性就能够使用代理了,如下: 1 //设置代理 2 WebProxy WP = new Web ...
- [Z] C#程序中设置全局代理(Global Proxy)
https://www.cnblogs.com/Javi/p/7274268.html 1. HttpWebRequest类的Proxy属性,只要设置了该属性就能够使用代理了,如下: 1 ...
- [FMX]在 FMX 程序中绘制单像素宽度的直线 [FMX]在 FMX 程序中绘制单像素宽度的直线
[FMX]在 FMX 程序中绘制单像素宽度的直线 2017-10-09 • Android.Delphi.教程 • 暂无评论 • swish •浏览 353 次 在前面的一篇文章中,我介绍了一种绘制低 ...
- 在.NET Core程序中设置全局异常处理
以前我们想设置全局异常处理只需要这样的代码: AppDomain currentDomain = AppDomain.CurrentDomain; currentDomain.UnhandledExc ...
- 关于在程序中 文件新生成 在用os.system()程序对新生成的文件处理 举个栗子 如下:
print 'save to ',savedir+os.sep+d["FILE_NAME"] ff = open(savedir+os.sep+d[& ...
- 王爽《汇编》检测9.1(1) | 若要使程序中的jmp指令执行后,CS:IP指向程序的第一条指令,在data段中应该定义哪些数据?
;监测点9.1(1) assume cs:code data segment db dup() data ends code segment start: mov ax,data :这一段一定要补上 ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 微信小程序中换行,空格(多个空格)写法
在小程序中HTML的网页实体无法正常使用,小程序中的写法为: 一.空格,换行 <text>你好!\t七月流火啊!\n我在下一行</text> \t 空格( 多个只会显示一个空格 ...
随机推荐
- PHP5.5下安装配置EcShop
建议用较旧的PHP版本与EcShop搭配,比如PHP5.3,新版的PHP有很多奇奇怪怪的问题... 错误描述: Deprecated: preg_replace(): The /e modifier ...
- HDU 2296
很明显的DP状态了,设dp[i][j],设当前在状态点i,经过j步能得到的最大分值.也是从root直接扩展就可以了. 至于字符串,实在有点困难,开始想着记录路径,但后来发现路径从后往前回溯不一定是字典 ...
- HDU 2912
直线关于球的多次反射,求最后一次反射点 #include <iostream> #include <cstdio> #include <cstring> #incl ...
- swift+moya URLCahe
1.定义获取缓存策略的接口 import Foundation protocol CachePolicyGettable { var cachePolicy: URLRequest.CachePoli ...
- SQL SERVER读书笔记:执行计划
执行计划对性能影响甚大. 系统是怎么得出一个号的执行计划的?主要是依赖于准确的统计信息.统计信息准确的前提下,执行语句重用性高,可避免频繁编译,这也有助于提高性能. 但如果怀疑统计信息不够准确,可以强 ...
- session理解
Session,底层的实现就是一个Map<集合>,有些Data在Server内存中,APP要分层.Data在各个层之间肯定要以一种形态传递(泛型),之前Servlet dao.getLis ...
- POJ1179 Polygon 区间DP
题目大意: 多边形游戏,有N个顶点的多边形,3 <= N <= 50 ,多边形有N条边,每个顶点中有一个数字(可正可负),每条边上或者是“+”号,或者是“*”号.边从1到N编号,首先选择一 ...
- DNS通道检测 国内学术界研究情况——研究方法:基于特征或者流量,使用机器学习决策树分类算法居多
http://xuewen.cnki.net/DownloadArticle.aspx?filename=BMKJ201104017&dbtype=CJFD<浅析基于DNS协议的隐蔽通道 ...
- nyoj--252--01串(水题)
01串 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 ACM的zyc在研究01串,他知道某一01串的长度,但他想知道不含有"11"子串的这种长度的0 ...
- 【SCOI 2005】 骑士精神
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1085 [算法] IDA* [代码] #include<bits/stdc++. ...