小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容。

关于单个 API 如何兼容,微信官方提供了兼容文档,因此我们这里不再赘述。
下面主要讨论在整个项目如何优雅地处理兼容问题

问题

如果在每处需要兼容的地方都写上一堆兼容相关的代码,随着代码量增加,会出现以下问题:

  • 代码难以阅读
  • 兼容方案有变动时,需要改动多处
  • 随着时间推移,你的代码才是最需要并且是最难兼容的

思考

最理想的情况是不需要任何兼容处理,因此可以反推出兼容性处理的代码并不是代码正常流程中的一部分,基于此:

  • 兼容的细节不必暴露
  • 兼容的方案应该统一
  • 兼容的方案可方便地变动

解决方案

1.将兼容方案隐藏,对外提供接口即可

比如 wx.showLoading 是在 1.1.0 版本之后才提供的,对于之前的版本需要兼容。
我们选择将其放在 show-loading.js 中,内部进行兼容性相关处理,并对外提供 showLoading 方法。
这样调用者只需调用 showLoading 方法即可,不用考虑兼容性的问题,而且如果兼容的方式有变动,只需改动 show-loading.js 一处即可。

2.兼容的处理还有共性可以抽象

兼容处理多了之后我们会发现,对兼容所做的处理无非两方面:

  • 支持该方法时,直接使用对应方法
  • 不支持该方法时,做一些兼容处理

因此这种模式我们又可以抽离出来,这样做当然有一些好处:

  • 减少重复代码
  • 做一些共性的处理时,我们又只用改动一处(比如当不兼容官方 API 时加上对应统计,用于分析当前应用跨版本的情况)

比如我们抽离出这样一个简单的 compatible.js 用于处理兼容时的共性问题:

之前的 showLoading.js 我们可以这样写:

简单吧 :),这种写法的意思是兼容时正常展示 loading 即可,不兼容时则不展示。

当然可能有完美主义者会觉得『怎么能不展示呢?我就是要展示!』 那么我们可以这样写:

wx.showToast 伪造了一个 showLoading

3.文件组织

兼容性的文件可能会越来越多,对于我这种有收拾的人,看到所有东西散乱地扔在一个抽屉里肯定是不能忍的...
因此我们可以多用几个小盒子把它们分门别类地装起来。小盒子怎么选呢?其实官方已经给出了答案,官方 API 是按照不同的功用分组的,因此我们拿分组当『盒子』即可。
最终的文件组织像这样:

微信小程序开发,如何优雅地兼容的更多相关文章

  1. WordPress版微信小程序开发系列(一):WordPress REST API

    自动我发布开源程序WordPress版微信小程序以来,很多WordPress站长在搭建微信小程序的过程中会碰到各种问题来咨询我,有些问题其实很简单,只要仔细看看我写的文章,就可以自己解决.不过这些文章 ...

  2. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  3. 微信小程序开发库grace vs wepy

    grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比. 注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极.正向的讨论及建议. 如果你还不了解Grace, 请参 ...

  4. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  5. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  6. WordPress版微信小程序开发系列(二):安装使用问答

    自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...

  7. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  9. 微信小程序开发教程,大多数人都搞错的八个问题

    小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列 ...

  10. 《腾讯游戏人生》微信小程序开发总结

    为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...

随机推荐

  1. 三十七、www服务nginx进阶

    六.查看nginx默认首页和目录:如下,可以看到,默认的目录是html,首页是index.html [root@djw1 conf]# grep html nginx.conf            ...

  2. LGOJ2257 YY的GCD

    这题美好体验就是卡常 Description link 求 \[\sum^{n}_ {i=1} \sum^m_{j=1} [gcd(i,j)\in prime]\] 其中:\(1\leq n,m \l ...

  3. EXAM-2018-8-9

    EXAM-2018-8-9 B 水题 注意理解题意 有坑 G 博弈 观察发现 总是会进行到最后两个,或者先手取完全部,再特判一下只有一张牌的情况 H 九连环 通过找规律 我们可以得出递推式: F[n] ...

  4. WEB-文件包含漏洞详解

    title date tags layout 文件包含漏洞(File Include) 2018-10-12 post 产生原因: 由于在编写代码时避免麻烦就需要把公用的一段代码写到一个单独的文件里面 ...

  5. ReactJS - 组件的生命周期

    组件的生命周期分为三个状态 Mounting: 已插入真实DOM Updateing: 正在被重新渲染 Unmounting: 已移出真实DOM React 为每个状态都提供了两种处理函数,即函数在进 ...

  6. 【Linux_Shell 脚本编程学习笔记五、Oracle JDK1.8 安装shell 脚本】

    脚本使用说明: 首先在脚本的同级目录下有个 jdk的安装包 脚本和安装包必须在同级目录下才能够安装(脚本没有优化,还可以使用  wget  从网上下载指定版本的  jdk 安装包) #!/bin/sh ...

  7. Android开发之《RXJava的简单实现》

    import android.util.Log; import rx.Observable; import rx.Subscriber; import rx.functions.Action1; pu ...

  8. Tmux 速成教程:技巧和调整

    本文转自:http://blog.jobbole.com/87584/ 简介 有些开发者经常要使用终端控制台工作,导致最终打开了过多的标签页.如果你也是他们当中的一员,或者你正在实践结对编程,那么我推 ...

  9. 吴裕雄--天生自然HTML学习笔记:HTML - XHTML

    XHTML 是以 XML 格式编写的 HTML. 什么是 XHTML? XHTML 指的是可扩展超文本标记语言 XHTML 与 HTML 4.01 几乎是相同的 XHTML 是更严格更纯净的 HTML ...

  10. 图的DFS。。类似树的DFS

    Depth-First Search (DFS) Depth-first search (DFS) is an algorithm for traversing or searching tree o ...