在小程序中实现全局混入,以混入的形式扩展小程序的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 空格( 多个只会显示一个空格 ...
随机推荐
- windowsclient开发--为你clientsign一个签名证书
郑重声明:该方法自娱自乐,尽管写入了签名,可是在微软系统免签证书不是合格的. 什么是签名? 话不多说,上图(没图说个xx): 微信windowsclient.exe安装文件: 再看还有一个.exe文件 ...
- 网络编程中的CAP & 有趣的存储框架(关系型、NoSQL)全图
第七篇 CAP https://zhuanlan.zhihu.com/p/20399316?refer=auxten CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer’s t ...
- 3.2 re--正則表達式操作(Regular expression operations)
本模块提供了正則表達式的匹配操作,它的功能跟Perl语言里的功能一样. 不管是Unicode字符串还是单字节8位组成的字符串,都能够使用模式匹配和字符串查找的功能. 只是要注意的是Unicode字符串 ...
- bzoj2878 [Noi2012]迷失游乐园 [树形dp]
Description 放假了,小Z认为呆在家里特别无聊.于是决定一个人去游乐园玩. 进入游乐园后.小Z看了看游乐园的地图,发现能够将游乐园抽象成有n个景点.m条道路的无向连通图,且该图中至多有一个环 ...
- POJ1151 Atlantis 【扫描线】
Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 16882 Accepted: 6435 Descrip ...
- Mysql经常使用函数汇总
一. 聚合函数 1.1 求和函数-----SUM() 求和函数SUM( )用于对数据求和.返回选取结果集中全部值的总和. 语法:SELECT SUM(column_name) FROM table_n ...
- Java深入 - Filter过滤器
Java的1.3開始,对servlet2.3规范中增加了过滤器的支持.过滤器可以让我们对目标资源的请求和响应进行截取. 一些filter的特性: 1. Filter是Servlet规范的规定,须要Se ...
- HBase编程 API入门系列之modify(管理端而言)(10)
这里,我带领大家,学习更高级的,因为,在开发中,尽量不能去服务器上修改表. 所以,在管理端来修改HBase表.采用线程池的方式(也是生产开发里首推的) package zhouls.bigdata.H ...
- Android学习——碎片Fragment的使用
一.碎片的简单用法(实现在一个活动中添加两个碎片,并让这两个碎片平分活动空间) 1.新建一个FragmentTest项目: 新建一个左侧碎片布局left_fragment.xml,代码如下:(只放置一 ...
- 安装pywin32
1.下载pywin32:https://sourceforge.net/projects/pywin32/files/pywin32/ 2.安装: 安装过程中报错:Python version 2.7 ...