小程序的奇技淫巧之 watch 观察属性
更新日期:
上一节我们介绍了小程序的 computed 计算属性,这次我们来讲讲 watch 观察属性叭~
watch 观察属性使用
这里我们直接先讲解下怎么用哇。
安装依赖
整个实现的依赖包,放在 Github 上,大家可以去翻看和点星星:watch-behavior。
- 安装
watch
:
1 | npm install --save miniprogram-watch |
使用 behavior 需要依赖小程序基础库 2.2.3 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
在 Component 中使用
1 | // 需要开发者工具 npm 依赖 |
在 Page 中使用
Component
是Page
的超集,因此可以使用Component
构造器构造页面。
官方文档:
事实上,小程序的页面也可以视为自定义组件。因而,页面也可以使用
Component
构造器构造,拥有与普通组件一样的定义段与实例方法。但此时要求对应json
文件中包含usingComponents
定义段。
page.json
1 | { |
page.js
1 | // 这里我们就可以使用 Component 代替 Page |
更多的,也可以参考本人的wxapp-typescript-demo中的watch page,后续也会持续更新方便好用的能力 demo。
watch 观察属性实现
自定义组件中computed
计算属性的实现,由官方提供的。上一篇《小程序的奇技淫巧之 computed 计算属性》中,也有讲解大致思路和使用方法。
现在,轮到我们自己来实现一个watch
观察属性了。
这里的实现主要也是针对自定义组件中的behaviors
。上一篇已经讲过,这里就不再复述啦。
watch 触发机制
其实watch
的触发机制,基本都在setData
的时候触发。而在自定义组件里,会有两种情况需要需要触发对应的watch
监听:
properties
属性变化时data
属性变化时(调用setData
)
watch 监听更新机制
既然properties
和data
都需要监听,我们来整理下逻辑。大致流程如下:
- 在组件初始化的时候,将对应的
watch
路径加进观察队列observers
。 - 在
properties
和data
属性变更时,触发更新。properties
可根据observer
触发更新data
可根据setData
触发更新
- 更新时,先对比变更路径,然后根据路径是否匹配(即
observers
是否存在对应观察者),来确定是否需要通知相应的观察者。 - 确定存在变更路径,则对比新数据与旧数据是否一致,一致则拦截不做通知。
- 因为
watch
可能存在循环触发更新,对一次更新的最大通知次数做限制(这里限制5次)。
具体的实现可以在watch中找到。
参考
结束语
Npm 包的发布,是一件简单也挺复杂的事情。简单的话,你可以发布一个单文件,不带任何构建等。复杂的时候,你需要写好demo、test、构建环境等等。
有些时候,自己亲自参与做一下,会让你更容易理解,这也是为什么我们偶尔需要造点轮子的原因。
码生艰难,写文不易,给我家猪囤点猫粮了喵~
查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢