企业官网建设流程全解析

wechat-miniprogram-examples代码重构实战：如何将ES5旧代码优雅升级为ES6

【免费下载链接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例项目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples

开源项目wechat-miniprogram-examples收录了豆瓣图书、事项助手、知乎日报三个微信小程序示例，它的作者曾在更新日志中明确记录过一轮"代码 ES6 化"的代码重构。本文就以这份真实的项目为教材，手把手教你如何把老旧的ES5 代码升级为 ES6：从var到let/const、从回调函数到箭头函数、从字符串拼接和回调地狱到模板字符串与 Promise，全程零基础友好，非常适合想给微信小程序做代码重构的初学者阅读。

为什么要做 ES5 升级 ES6 的代码重构？

早期微信小程序代码普遍是 ES5 风格：到处是var、function(){}回调、'字符串' + 变量拼接，稍复杂的逻辑就会出现"回调地狱"。而 ES6 提供的箭头函数、模板字符串、解构赋值、class 和 Promise，能让代码更短、更清晰、更不容易出错。

这个项目本身就记录了一段真实的重构史：2016 年微信开发者工具一度移除了对 Promise 的支持，作者只能引入 bluebird 兼容库；到 2019 年工具恢复支持后，作者就顺势把三个小程序的旧代码全部 ES6 化，并移除了 bluebird。这段"由 ES5 到 ES6"的演进过程，正是新手学习代码重构的最佳范例。

第一步：用 let/const 替换 var，消除变量提升隐患

ES5 的var存在变量提升和函数作用域问题，容易埋雷。升级时把不会改变的变量声明为const，会变化的用let。

例如 DouBanBookApp/utils/api.js 中的接口地址定义，重构后就用了const加模板字符串：

const API_BASE = 'https://douban-api.uieee.com/v2/book'; const API_BOOK_SEARCH = `${API_BASE}/search`; const API_BOOK_DETAIL = `${API_BASE}/:id`;

第二步：用模板字符串告别痛苦的字符串拼接

ES5 里拼 URL 或提示语经常写成'../detail/detail?id=' + id，稍不留神就少个引号。ES6 模板字符串用反引号和${}让拼接一目了然，DouBanBookApp/pages/index/index.js 跳转详情页时就改成了：

wx.navigateTo({ url: `../detail/detail?id=${bid}` });

第三步：用箭头函数解决 this 指向难题

ES5 时代最让新手头疼的就是回调里this丢失。wx.request的success: function(){}里再用this.setData往往会报错，只能靠var that = this兜底。ES6 箭头函数不绑定自己的this，直接继承外层作用域，代码立刻清爽。

ZhiHuDaily/utils/api.js 把网络请求封装成 Promise 时就大量使用了箭头函数，MatterAssistant/common/util.js 里还有一个经典的promiseHandle工具，把微信的success/fail回调包装成 Promise：

function promiseHandle(func, options) { options = options || {}; return new Promise((resolve, reject) => { if (typeof func !== 'function') reject(); options.success = resolve; options.fail = reject; func(options); }); }

第四步：用解构赋值简化取值代码

ES5 从事件对象里取数据要写一行行e.currentTarget.dataset.year，又长又重复。ES6 解构赋值一行搞定，MatterAssistant/pages/index/index.js 里随处可见：

const { year, month, date } = e.currentTarget.dataset;

第五步：用 import/export 实现真正的模块化

ES5 用module.exports = {...}导出、require()引入，ES6 则支持export和import。事项助手重构后，页面顶部就是标准的 ES6 模块导入：

import Data from '../../common/data'; import { LEVEL } from '../../common/constant'; import { formatNumber } from '../../common/util';

第六步：用 class 封装数据操作层

ES6 的class让面向对象写法更规范。事项助手把本地存储操作封装成了 Curd 类，再用 Data 类 提供save、findByDate、removeByIds等静态方法，页面只需Data.save({...}).then(...)，逻辑清晰、便于复用，这正是本次代码重构的核心收益之一。

第七步：用 Promise 链替代多层回调

重构前，请求数据、处理数据、更新 UI 层层嵌套；重构后变成api.xxx().then().catch()的扁平链式结构。比如 ZhiHuDaily/utils/api.js 用对象方法简写加模板字符串，一口气暴露了获取日报、评论、主题等十几个接口，豆瓣图书首页 的分页加载也全部基于 Promise 实现，错误处理统一走.catch，代码可读性提升了一个档次。

重构后的收益与避坑提醒

完成 ES5 升级 ES6 的代码重构后，你会明显感到：代码行数减少约三成、嵌套层级变浅、this不再丢失、模块边界清晰。但也要注意几个坑：

• 微信开发者工具与基础库版本需支持 ES6，旧版工具可能编译报错；
• 部分老 API（如 Promise 曾被移除）随版本波动，重构前先确认当前环境；
• 真机预览前记得在 project.config.json 里配置你自己的appid，否则部分 API 无法使用。

如何获取这份代码重构实战源码

想亲手对照学习，可以克隆这个仓库：

git clone https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples

然后用微信开发者工具分别打开DouBanBookApp、MatterAssistant、ZhiHuDaily三个目录，再配合 README.md 里的更新日志，就能一边看重构说明、一边对照源码，把"如何将 ES5 旧代码优雅升级为 ES6"真正变成自己的技能。😊

总结

微信小程序代码重构并不神秘：let/const换掉var、箭头函数换掉匿名回调、模板字符串换掉拼接、解构赋值换掉重复取值、import/export换掉require、class换掉裸对象、Promise 换掉回调地狱，一步步来就能把 ES5 旧代码优雅升级为 ES6。希望这份 wechat-miniprogram-examples 重构实战指南能帮你迈出第一步！

【免费下载链接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例项目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples