写在前面
从去年底到今年初,由于工作繁重以及一些私人的事情需要处理,耽误了公众号更新。这周开始恢复更新了。
之前的文章中,我也对微信小程序中的代码复用问题进行了阐述。历史文章在这里:
文中提到的方案,其实在去年的时候,我已经实现了。本文将进行初步的介绍。
Zero
我给自己的解决方案取名为Zero。它是一个轻量级的,拥有命名空间的,基于Page层mixin的微信小程序代码逻辑复用方案。
Zero分为了两部分:Zero-loader 和 Zero.js。
Zero-loader负责转译wxml代码。在开发wxml时,可以将命名空间声明在模板上,Zero-loader会进行识别,并且将命名空间编译到模板的变量中。
Zero.js是一个运行时,对外暴露了三个接口:Base,Compose,Merge。Base确认页面主逻辑,Compose根据命名空间、组合多个mixin,Merge合并mixin和页面主逻辑。
整个Zero的示意图如下:
各个mixin之间进行了相互隔离,仅能通过页面主对象进行中转,解决传统mixin方案的命名冲突、隐式依赖的问题。
可以将页面公用的逻辑拆成公用mixin方便复用,也可以将页面业务分模块拆分为业务mixin,方便维护、迭代。
Zero实例
像开发Page一样开发Mixin,且不用担心命名冲突等问题,可以专注于页面代码逻辑拆分。以一个动态标题栏为例。动态标题栏会在多个页面使用,但是这里的逻辑却无法进行优雅的拆分。使用Zero后,可以将动态标题栏抽出作为一个mixin:
Zero特点
1、在Page层实现mixin,解决原生Component无法覆盖的代码复用场景。
2、各Mixin相互隔离,仅能通过Page中转,解决传统mixin方案的命名冲突、隐式依赖的问题,方便逻辑拆分。
3、原生方案,轻量级、渐进式,改造简单,接入方便。
Zero比较适合多人协作的,追求稳定,使用原生方法开发的复杂微信小程序。
写在后面
当初Zero的诞生,完全是为了解决业务开发中的痛点。如今,微信小程序已经官方支持Page层的mixin了。说明当初的思路是有可取的地方的。后续可能会对Zero进行开源,欢迎各位小伙伴多多交流了。