微信小程序之ES6与事项助手的功能实现(2)

function getDate(dateStr) { if (dateStr) { return new Date(Date.parse(dateStr)); } return new Date(); } function log(msg) { if (!msg) return; if (getApp().settings['debug']) console.log(msg); let logs = wx.getStorageSync('logs') || []; logs.unshift(msg) wx.setStorageSync('logs', logs) } module.exports = { getDate: getDate, log: log };

现在引入并调用外部文件的方法:

import {log} from '../../utils/util'; log('Application initialized !!');

import...from...是ES6的引入模块方式,等同于小程序总的require,但import可以选择导入哪些子模块。

箭头函数(Arrow Function)

刚开始我也不知道js的箭头函数到底是什么东西,用了才发现,这特么就是lambda表达式么。箭头函数简化了函数的写法,但是还是跟普通的function有区别,主要是在作用域上。

比如我们需要请求网络:

wx.request({ url: 'url', header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data) } });

用函数还是可以简化一定的代码量,哈哈哈。

wx.request({ url: 'url', header: { 'Content-Type': 'application/json' }, success: (res) => { console.log(res.data) } });

注意到那个success指向的回调函数了么,function关键字没了,被醒目的=>符号取代了。看到这里大家是不是认为以后我们写function就用箭头函数代替呢?答案是不一定,而且要非常小心!

function和箭头函数虽然看似一样,只是写法简化了,其实是不一样的,function声明的函数和箭头函数的作用域不同,这是一个不小心就变坑的地方。

Page({ data: { windowHeight: 0 }, onLoad() { let _this = this; wx.getSystemInfo({ success: function(res) { _this.setData({windowHeight: res.windowHeight}); } }); } });

一般我们获取设备的屏幕高度差不多是这样的步骤,在页面刚加载的onLoad方法中通过wx.getSystemInfoAPI来获取设备的屏幕高度,由于success指向的回调函数作用域跟onLoad不一样,所以我们无法像onLoad函数体中直接写this.setData来设置值。我们可以定义一个临时变量指向this,然后再回调函数中调用。

哪箭头函数的写法有什么不一样呢?

Page({ data: { windowHeight: 0 }, onLoad() { let _this = this; wx.getSystemInfo({ success: (res) => { _this.setData({windowHeight: res.windowHeight}); } }); } });

运行之后好像感觉没什么区别呀,都能正常执行,结果也一样。确实没什么区别,你甚至这样写都可以:

Page({ data: { windowHeight: 0 }, onLoad() { wx.getSystemInfo({ success: (res) => { this.setData({windowHeight: res.windowHeight}); } }); } });

咦?这样写,this的指向的作用域不是不一样么?其实这就是要说明的,箭头函数是不绑定作用域的,不会改变当前this的作用域,既然这样,在箭头函数中的this就会根据作用域链来指向上一层的作用域,也就是onLoad的作用域,所以他们得到的结果都是一样的。

其实我个人的习惯是无论用普通的函数写法还是箭头函数的写法,都习惯声明临时的_this来指向需要的作用域,因为箭头函数没有绑定作用域,写的层次深了,感觉就会很乱,理解起来比较困难,在后面的案例中,我也会延续这个习惯。

Promise

写js经常写的东西除了数组对象就是回调函数,记不记得用jQuery的ajax用得特别爽,如果是多层嵌套调用的话,那些回调函数简直像盖楼梯一样壮观。现在Promise来了,我们再也不用为这些回调地狱发愁,用Promise来解决回调问题非常优雅,链式调用也非常的方便。

Promise是ES6内置的类,其使用简单,简化了异步编程的繁琐层次问题,比较简单的用法是:

new Promise((resolve, reject) => { //success //resolve(); //error //reject(); });

实例化一个Promise对象,它接受一个函数参数,此函数有两个回调参数,resolve和reject,如果正常执行使用resolve执行传递,如果是失败或者错误可以用reject来执行传递,其实他们就是一个状态的转换。可以暂时理解为success和fail。

来看一下简单的示例:

let ret = true; let pro = new Promise((resolve, reject) => { ret ? resolve('true') : reject('false'); }).then((res) => { console.log(res); return 'SUCCESS'; }, (rej) => { console.log(rej); return 'ERROR'; }).then((success) => { console.log(success); let value = 0 / 1; }, (error) => { console.log(error); }).catch((ex) => { console.log(ex); });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwxzfs.html