你是否想了解在开发微信小程序时需要的ES6特性是什么?下面就是小编给(ji)大(da)家带来的详细完整的内容,赶紧来看一(yi)下吧。
微(wei)信小程(cheng)序(xu)的官方开发工具中,已经(jing)集成了 babel 插件(jian)对 ES6 语法进(jin)行转换,各种第三方工具自然(ran)更少不了了。
所以可以放心的尝试使用 ES6,体验(yan)新标准带(dai)来(lai)的各种便(bian)利之处,省下时(shi)间后学习充电,或者早点下班、锻炼身(shen)体、下厨做(zuo)个菜(cai),调节生活又放松身(shen)心,岂(qi)不美哉?
那么,在小程序开(kai)发(fa)的过程中,有(you)哪些 ES6 特性是可以给我们带来(lai)便利,提高开(kai)发(fa)效率的呢?这边就结合实例(li),一(yi)一(yi)来(lai)说(shuo)一(yi)说(shuo)吧。
1. 箭头表达式(shi)
做前(qian)端(duan)开发(fa)的,开始(shi)阶段基本会遇到(dao) this 与 闭包 带(dai)来的坑(keng)————一些异步(bu)操作中,回调函数中丢失了当前(qian)函数的上下(xia)(xia)文对象,导致(zhi)异步(bu)操作完成后,更新原(yuan)有上下(xia)(xia)文失败。
为(wei)了避免这个(ge)问题,以前大家(jia)都是自己用变量保(bao)存一个(ge)闭包外(wai)部上下文的引用,取的名(ming)字(zi)可(ke)能千奇百(bai)怪(guai):
that/_this/$this/self…在异步操作完成后的(de)回调中,通过调取这个(ge)闭包外层(ceng)的(de)变量,达(da)到(dao)更新回调前(qian)函数上下文对象(xiang)的(de)目的(de)。
ES6 中(zhong)增加了 箭头表(biao)达式,效果和匿名函数相似,但箭头表(biao)达式更为(wei)简练,且内部执行时的 this 与外(wai)侧一致(zhi),不再需(xu)要每次都(dou)额外(wai)增加变量引用了。
微信小程序里,对每(mei)个页面编(bian)写(xie)的代码逻(luo)辑,都(dou)作为生命(ming)周(zhou)期钩子函(han)数(如(ru):onLoad, onShow, onUnload)和(he)自定义(yi)函(han)数(如(ru):各(ge)类组(zu)件回调函(han)数)写(xie)在 AppService 内(nei)。

这两种函(han)数(shu)内(nei),this 都指向当前 Page 对(dui)象,在这些函(han)数(shu)里做的(de)(de)各种异(yi)步操作,回调内(nei)的(de)(de) this 基本都应该仍然保持为当前 Page 对(dui)象。在这个情况下,使用(yong)箭头表达式可以减少(shao)(shao)重复的(de)(de)工作、也减少(shao)(shao)遗漏 this 时出错的(de)(de)几率。
2. 数(shu)组(zu)方法
虽然(ran)都(dou)说微(wei)(wei)信(xin)小(xiao)(xiao)程序 wxml 的 Mustache 语(yu)法(fa)与 Vue.js 很(hen)相似。但据说是为了(le)分离 UI 线(xian)程和 AppService 线(xian)程,微(wei)(wei)信(xin)小(xiao)(xiao)程序暂时并不支持 {{value | filter}} 的写法(fa)。
这时候可以借(jie)助(zhu)于 ES5 中为数(shu)组(zu)对象增加的(de)方法,之前(qian)因为浏(liu)览器兼容性问题,不一定全部(bu)能用。如今(jin)在移(yi)动端了,就尽情用起来(lai)吧(ba):
输出(chu)数据前,对后台传来的列表数据做一些(xie)预处理(li)后再显示时,通常(chang)使用 Array.prototype.forEach 和(he) Array.prototype.map 进行相应(ying)处理(li);
筛选掉无(wu)效数据(ju),可以使用(yong) Array.prototype.filter。
3. Rest 解构赋值
直到写(xie)这(zhei)篇文章的时候,小(xiao)程序官方(fang)的组(zu)件标准(zhun)也(ye)仍然没有出(chu)来。
目前(qian)的(de)通常(chang)处理方案,一(yi)般是通过 template 配合解构(gou)赋值(zhi)不同对象的(de)数(shu)据,实(shi)现组件各(ge)自状态、事件处理函数(shu)互相独(du)立的(de)效果。
如,有两个(ge) template 都从 data 中绑定数(shu)据。
AppService 中对于这两(liang)个模板创建两(liang)个不同对象,即可管理(li)自身状态,不用担心字(zi)段名重(zhong)复的问(wen)题。
页面(mian)内渲染模板时,对 bannerState 和 comicListState 字段进行解构即可。
这是个非常重要且实用(yong)的(de)特性,基于这个基础可以(yi)封装出有具有通用(yong)逻(luo)辑的(de)基类,实现模块内部的(de)逻(luo)辑闭(bi)环,达到组件化(hua)开(kai)发(fa)的(de)效果。
4. 增(zeng)强的对(dui)象(xiang)字面量(liang)
setData()
setData() 中的数(shu)据字段名(ming)(ming)与变量(liang)名(ming)(ming)一(yi)致时(shi),不需(xu)要重(zhong)复写两遍(bian),上面加载数(shu)据的代码就可以(yi)这样简写:
数(shu)据字段较多时,效率会(hui)快很多。减(jian)少了整理和重构(gou)代(dai)码需要调整的地方,降(jiang)低(di)维护(hu)成本。
成员方法
增强的(de)(de)对象字面(mian)量(liang)写法,还(hai)包括函(han)数的(de)(de)简写:
这种简洁的成员函数写法,是(shi)(shi)不是(shi)(shi)很(hen)像 class 中的函数声明?
5. Class 与继承
使用 ES5 的(de) prototype 写法,实现简(jian)单(dan)的(de)类(lei)继(ji)承也没太大问题,但涉及到父类(lei)函数(shu)调用等情况(kuang),代码耦合(he)度会变得更高,需要(yao)一定经验才能写出(chu)方便维护(hu)的(de)代码。
通过 ES6 语法来(lai)实现类继承的(de)话,有了(le)统一(yi)的(de)标准,写出的(de)类继承更加直观(guan),更方便调整。
6. 块作用域变量
使用(yong) for 对数(shu)据做迭(die)代遍历时,语句中(zhong)声明的 var 型变量名作用(yong)域其实提升(sheng)到了(le)函数(shu)顶部,不同迭(die)代间忘记处理的话,可能会导致数(shu)据污染。
改为使用 ES6 的 let/const 可避免这一情况,放(fang)心(xin)使用块级作(zuo)用域(yu)。
补充:
微信小程(cheng)序使用(yong)的(de) babel 启用(yong)的(de)转码(ma)规则(ze)可能不是最新的(de),截止(zhi)目(mu)前版本(ben),测(ce)试使用(yong)以(yi)下 ES6 会有问题,需要注意。
class 内部声明的静(jing)态(tai)字段;
for...of 语法遍(bian)历对(dui)象(直接(jie)使用了 Symbol.iterator,移动端可能(neng)尚未实现);
20170329 更新(xin):新(xin)版(ban)本开发(fa)工具似乎已(yi)经(jing)完善了这个(ge)问(wen)题,可以使用下面的 ES6 写(xie)法了:
for...of 用于(yu)数组遍(bian)历时,效果与 Array.prototype.forEach 类(lei)似,区别(bie)是可(ke)以在途中 break 中断循(xun)环,无需每次遍(bian)历整个数组。
以上(shang)就(jiu)是在开发(fa)微信小程序时需要的(de)(de)ES6特性是什么的(de)(de)全部内容(rong)了,大家都学会了吗?