在小程序中实现全局混入,以混入的形式扩展小程序的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 空格( 多个只会显示一个空格 ...
随机推荐
- C#的WaitHandle : 管理多线程状态
有时候,我们创建了多线程,需要知道是否都完成了各自的工作.比如说,开启了多线程的下载,如何终止所有的线程并且在确保所有线程都终止之后才继续执行程序的退出呢? public partial class ...
- [bzoj2186][Sdoi2008]沙拉公主的困惑_数论
沙拉公主的困惑 bzoj-2186 Sdoi-2008 题目大意:求N!中与M!互质的数的个数. 注释:$1\le N,M\le 10^7$. 想法:显然是求$\phi(M!)$.这东西其实只需要将数 ...
- 多个线程作用于同一个runnable对象
多个线程作用于同一个runnable对象 学习了:https://www.cnblogs.com/ligang305/archive/2012/08/10/2632126.html http://as ...
- linux中O(1)调度算法与全然公平(CFS)调度算法
一.O(1)调度算法 1.1:优先级数组 O(1)算法的:一个核心数据结构即为prio_array结构体. 该结构体中有一个用来表示进程动态优先级的数组queue,它包括了每一种优先级进程所形成的链表 ...
- POJ 3281(Dining-网络流拆点)[Template:网络流dinic]
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmlrZTBnb29k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- HDU 1576 A/B(扩展欧几里德变形)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1576 Problem Description 要求(A/B)%9973,但因为A非常大,我们仅仅给出n ...
- ubuntu下创建第一个rails应用程序
一.创建一个新的应用程序 在控制台输入 > rails new demo create create README.rdoc create Rakefile create config.ru ...
- luogu1920 成功密码
题目大意:给出x∈(0,1)以及n∈(0,1e18),求sum foreach i(1<=i<=n) (x^i/i)保留四位小数的值. 用快速幂暴力求.考虑到题目只要求保留四位小数,而随着 ...
- BZOJ 4262 线段树+期望
思路: 把询问离线下来,查询max和查询min相似,现在只考虑查询max 令sum[l,r,x]表示l到r内的数为左端点,x为右端点的区间询问的答案 那么询问就是sun[l1,r1,r2]-sum[l ...
- python 编码问题解决方案
1.UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 0: ordinal not in range(128) ...