最近写了个小程序用来展示数据结构算法动画：数据结构算法演示小程序
小程序码(数据结构算法演示)在这
大部分的页面基本功能有很多想通的，如果每个page都是重头写，那肯定有很多冗余代码，所以想着怎么对page封装，在网上搜索也没找到好的办法，自己琢磨了下、于是便有了这个方法，给大家分享下
页面通用部分
因为是算法演示，所以每个页面都有相同的界面和交互、并且有相同的逻辑
相同的界面和交互
- rest：重置按钮
- random：随机按钮
- next：前进按钮
- pre：后退按钮
- autoPlay：自动播放
- speed：速度调节
- showCode：源码 相同的逻辑
- onLoad时初始化
- 动画等待
- 每一个步骤操作完都需要更新算法提示
- 前进后退的历史维护
- onHide时需要处理动画的暂停
- 算法的结束时机控制
这么多逻辑和代码如果不复用肯定有大量的冗余代码，所以咱也先去网上搜索了下现成的方法、但唯一找到的一个方法是通过App来复用，显然不符合我的要求。
思路
考虑每个Page的写法是这样的、我们得想办法把相同和不同的逻辑和代码区分开来
Page({
onLoad() {
doSomeThing()
},
onHide(){
doSomething2();
},
onClickNext() {
// 部分通用逻辑
.......
// 子page的不同逻辑
this.next();
},
next() {
.....
},
doSomething(){},
doSomething2(){},
})
实际上小程序的Page就是传入一个DataOption对象，只需要这个对象能够复用就能对小程序Page进行封装，所以可以采取JS对象合并的方式来实现
具体实现
// Base代码的的实现
const getBasePage = () => {
return {
onLoad (res) {
doSomeThing();
if (typeof this.onPageLoad === 'function') {
this.onPageLoad(res);
}
},
onClickNext() {
......
if (typeof this.next === 'function') {
// 抽象的next方法、需要再子page里实现
this.next();
}
},
onHide(){
......
},
doSomething(){},
doSomething2(){},
// 用basePage复用的Page实现
Page({
...getBasePage(),
...{
// 这里就和正常的page一样实现就好
data:{
a:1
},
next(){
// 子页面只需要专注实现next函数即可
},
})
所以只需要我在每个子page里把抽象的method实现就可以做到对Page的js封装了(这里和Java的抽象类非常相似、只是没法做到编译检查)
然后我们还需要对wxml和css进行复用，这里就不多做介绍了！
