小程序模块化
原本需要 24 个工作日才能完成的任务,我却在 0.5 个工作日内完成了,是如何实现的呢?趁着放假有空,写篇文章给大家分享一下我们小程序模块化加速项目开发的思路吧。
阅读基础:有小程序项目经验,有查阅官方文档习惯的小伙伴 随着公司小程序项目日益繁多,仅仅靠着官方提供的框架、组件、API,已经远远不能满足项目高效迭代的要求了,于是我们组内萌生了对小程序进行模块化的想法。 实际项目中我们对小程序模块化已经涉及各个模块,我总结一下,从三个方向跟大家分享我们不一样的模块化思路: Page+
官方删除了小程序分享回调 complete,一起来尝试将其恢复吧。一般我们的逻辑是这样的: // pages/index/index.js
Page({
// 数据初始化
data: {
shareFlag: false,//页面是否处于分享中
shareComplete: false //分享回调事件
},136);">// onShow 生命周期
onShow: function () {
const { shareFlag,shareComplete } = this.data
if( shareFlag ){
this.data.shareFlag = false //变量不涉及页面渲染,不使用 setData
shareComplete && shareComplete()
}
},136);">// 分享事件
onShareAppMessage: let shareInfo = {
title: '分享测试标题',path: '',complete: function () {
console.log('页面分享成功啦~')
}
}
true
this.data.shareComplete = typeof (shareInfo.complete) == 'function' ? shareInfo.complete : false
return shareInfo
}
})
在单页面内实现分享回调这样操作是可行的,如果多页面、多项目都要实现该功能,重复拷贝代码,则显格外得繁琐。 我们来将这个功能抽离封装一下吧。
PagePlus({
return {
title: '页面分享成功啦~')
}
}
}
})
&& _onShow.apply(this)
const { shareStatus,51); font-weight: 700;">if (shareStatus) {
this.data.shareStatus = false //变量不涉及页面渲染,不使用 setData
shareComplete && shareComplete()
}
}
pageObj.onShareAppMessage = const shareInfo = typeof _onShareAppMessage == 'function' && _onShareAppMessage.apply(true
shareInfo && (this.data.shareComplete = shareInfo.complete)
return shareInfo
}
Page({ data: _data,...pageObj })
}
export default PagePlus
我们来增加一个新的生命周期回调—— )
},onShareAppMessage: '页面分享成功啦~')
}
}
}
})
) {
const shareInfo = typeof pageObj[key] == 'function' && pageObj[key].apply(this,arguments)
_temFn.apply(return shareInfo
}
typeof pageObj[key] == 'function' && _temFn.apply(data,pageObj.data)
delete pageObj.data
Page({ data: basePage.basePage
<!--components/basePage/index.wxml-->
<slot />
适配层如果你的项目对代码后续维护、迭代和可移植性有较高需求,或者需要多项目并行,这个时候通过适配层去调用各个功能模块就显得尤为重要。适配层方面我做的还是比较粗糙的,如果有建议欢迎指出。 适配层的时机项目不是 bugfix 级别的迭代,都有适配层设计的必要。 如果是 旧项目迭代?,在项目排期允许的情况下,尽可能理解原代码的基本实现细节;对比新的项目是要束手束脚一些,适配层的设计要在 模块设计必须高内聚低耦合如果功能模块的设计过于松散、耦合复杂,这就意味着适配层将需要做各种兼容,这和适配层设计的初衷背道而驰,不做也罢。 配置文件如果你的代码有移植性要求,为这些不同环境准备对应的配置文件吧,配置文件可以通过自制脚手架实现,也可以粗暴地手动替换,在保证尽可能不出错的情况下实现即可。 功能模块的入口 所有整合的功能模块都需要通过适配层进行调用,适配层就是你的“王之财宝”。 规范 && 文档适配层是从代码的全局考虑,如果是项目是分工完成,项目的开发人员都需要遵守适配层规范进行代码开发;文档我一直都认为都是非常必要的,但还是经常会懈怠,没有进行完整的文档编写,但我基本会在所有项目成员都能理解适配层的情况下,进行简单的口头说明。 因为开心说一些废话一次需求迭代中,几乎涉及手头上的所有小程序项目;刚好就在需求前的半个月,我们小组完成了对所有项目模块化改造;虽然需求来得很急,我们还是很完美的实现了。毕竟 这篇文章,对 Page+ 的具体实现展示比较详细,感觉对 basePage 和适配层讲的都比较偏概念。毕竟这部分内容都和业务逻辑联系比较紧密,很难抽象深入讲解。刚好还有假期还有一段时间,如果自己还有时间就再写一篇关于最近项目的模块化剖析吧,哈哈。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |