写在前面
在上一篇文章的碎碎念中，我提到了小程序开发中一个比较尴尬的问题：代码复用问题。到这周为止，我一个页面的js代码行数已经达到了2000+，并且还有继续增加的趋势。维护这一坨代码的难度正在慢慢增加。是时候解决代码复用的问题了。
现有的代码复用方案及其问题
现有的代码复用方案，使用微信小程序的组件Component。Component本身就是一种代码复用。而且在Component中，还提供了Behavior来共享代码。但是，这种解决方案并不能覆盖所有场景。
举一个例子，我的页面中需要实现一个自定义title-bar，当页面滑动时，滑到一定的位置，这个title-bar的背景需要变成透明的，当滑动到另外一个位置时，title-bar需要变成纯色的。显然，我们需要在Page的onPageScroll中，去实现逻辑。现在，在另外一个页面中，又需要同样效果的title-bar。很自然的，我们需要把这个title-bar剥离成一个组件，页面直接引用，尽量不需要在Page页面中写逻辑。比较遗憾的是，使用Compoent做不到这一点。不管怎样，都需要在对应Page中的onPageScroll里去写逻辑。
其次，Component提供的Behavior，本质上是一种mixin。而mixin方案本身存在命名冲突，隐式依赖的问题。当多人协作开发同一个复杂页面、组件时，如果没有实现约定以及充分沟通，一不小心把别人的方法覆盖了（或被覆盖了），就尴尬了（我就踩坑了）。
我认为，微信小程序缺少一个相互隔离、显性依赖的页面层代码复用方案。
实现一个新的代码复用方案吧
既然微信暂时没有提供这样的解决方案，那自己来实现一个好了。既然自己实现，那就先明确一下需求。以上面的title-bar举例，我想实现的效果大致如下。
title-bar组件js代码，像写Page代码一样：
// title-bar组件 js文件export default { ... data: { titleBarStyle: 'rgb(255,0,0)' }, onPageScroll: function (e) { this.handleTitleBarChange(e.scrollTop); }, handleTitleBarChange() { ... this.setData({ titleBarStyle: 'transparent' }); ... } ...}
// title-bar组件wxml代码：<view style='background: {{ titleBarStyle }}'> ...</view>
组件使用方法：
// Page页面 js文件Page({ ... // 直接引用title components: ['title-bar.js'], ...});
// Page页面 wxml文件，引用title-bar对应的wxml...<include src="title-bar.wxml" />...
上面的代码和mixin很类似。前文也提到了，mixin会有命名冲突，隐式依赖的问题。其他组件里面万一也有一个handleTitleBarChange的方法，相互覆盖咋办。新的解决方案需要处理这个问题。
同时，新的解决方案最好可以是渐进式、轻量级的，方便现有小程序代码进行改造。
总结一下，最终想要达到的目标是：
1、像写Page一样写”组件“，在Page中直接引用即可复用代码。
2、避免命名冲突和隐式依赖。
3、轻量级，方便已有页面接入。
事实上，满足上述三个目标的解决方案，我已经实现了70%了。在后续的文章中，我会进行进一步的介绍。
写在后面
对于微信小程序开发这个领域，我深度接触的时间并不长。有什么其他解决页面层的代码复用问题的方案吗？欢迎交流。
