[转]Async/Await是这样简化JavaScript代码的

译者按: 在Async/Await替代Promise的6个理由中,我们比较了两种不同的异步编程方法:Async/Await和Promise,这篇博客将通过示例代码介绍Async/Await是如何简化JavaScript代码的。

原文: ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

Async/Await是JavaScript的ES7新特性,来源于.NET和C#。它可以不用回调函数,像同步代码那些编写异步代码。这篇博客将通过一些代码示例,来说明Async/Await如何简化JavaScript代码。

1. 去除回调函数

运行本文的示例代码,并不需要额外的函数库。对于最新版的主流浏览器中,例如Chrome,Firefox, Safari以及Edge,它们都支持Async/Await语法。另外,Node.js 7.6+也支持了Async/Await语法。

我们编写了一些简单的API接口,用于模拟异步操作。这些接口都返回Promise,并在200ms后resolve一些数据。

class Api {
  constructor () {
    this.user = { id: 1, name: 'test' }
    this.friends = [ this.user, this.user, this.user ]
    this.photo = 'not a real photo'
  }
  getUser () {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.user), 200)
    })
  }
  getFriends (userId) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.friends.slice()), 200)
    })
  }
  getPhoto (userId) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.photo), 200)
    })
  }
  throwError () {
    return new Promise((resolve, reject) => {
      setTimeout(() => reject(new Error('Intentional Error')), 200)
    })
  }
}

嵌套Promise

继续阅读[转]Async/Await是这样简化JavaScript代码的

JavaScript中的对象拷贝

对象拷贝,可能很多人并不是很清楚,而且也使用的不多,简单的说拷贝对象就是直接复制一个数组或者一个对象,听到复制可能大家都蒙了,该如何才能达到复制一个对象或者数组?我们可以将这里的复制理解为是赋值,我们可以将一个数组或者一个对象直接赋值给一个变量,这个过程就可以称为复制(或者对象拷贝),大家一定不要被“复制、拷贝”这样的名词给搞晕了。下面我们来看几个简单的示例

1、JavaScript拷贝数组(浅拷贝)

var arry = [1,2,3]
var arry1 = arry
console.log(arry) //输出[1,2,3],说明拷贝数组成功
arry1[1] = 6
console.log(arry1) //改变arry1拷贝过来数组中的值,输出[1,6,3]

这就是一个简单的数组拷贝的过程,其意义在于,当我们需要使用和arry相同数据的时候,并且只需要更改其中的一个值,从而达到另一个效果,那么我们就可以使用这一的方式进行数组拷贝。
当然,以上方法主要是属于数组的浅拷贝。 继续阅读JavaScript中的对象拷贝

简简单单理解JavaScript闭包

也许你在很多前端面试中都被问及闭包是什么?闭包有什么作用?闭包有什么弊端?但是你真的理解闭包吗?闭包确实对于初学者来说要理解他有些困难,它主要是属于作用域链的问题,下面就由我带领你学习一下或者理解一下JavaScript的闭包。

1、作用域

我们可以将闭包简单的理解为函数内的函数,首先我们来看一个作用域的示例

function Fn(){
  var a = 3;
}
console.log(a); // 此处是报错了,因为我们在函数外部是无法获取函数内部的变量的

那么我们可以将上面的函数修改为如下的函数即可得到a的值

var a = 5;
function Fn(){
  var a = 3;
  return a;
}
consolog.log(a); //返回5
Fn(); //返回 3

继续阅读简简单单理解JavaScript闭包

利用nodeJS发送邮件

做过后端的童鞋都知道发送邮件这样的功能并不复杂,使用目前已有的后端技术比如java、.net、php等编写一个发送邮件的功能是很简单的,但是要编写很多代码,比如java中利用jmail发送邮件并不是一件简单的事情。随着nodeJS的发展,如今利用前端技术实现发送邮件,简直是小菜一碟,不仅仅是代码量减少了,也提高了开发效率。
今天主要说的是使用nodeJS的Nodemailer发送邮件
1、首先我们得准备一个QQ邮箱或者GMAIL邮箱(只要支持smtp服务的就可以),主要用于发送邮件。比如QQ邮箱我们可以做如下设置即可开启POP3/SMTP服务,并且可以发送邮件。
进入QQ邮箱后点击左上角的设置,再选择账户,如图

QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务

将其全部设置为开启即可,这样就可以利用QQ邮箱发送邮件了。 继续阅读利用nodeJS发送邮件

使用webpack配置ES6开发环境

1、ES6简介

由于ES6无法直接运行在浏览器中,只能通过babel来进行解析转换(编译)成ES5才可以运行在浏览器中,因此我们就需要给ES6搭建相关的环境,才可以开心的写ES6。
目前很多框架都使用了ES6,比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码,让我们可以少写很多代码,当然如果你还了解typescript以及coffeescrpt,那么就更加方便你进行各种开发了。但是问题来了,这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6

2、webpack

webpack是一个前端打包工具,简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件,将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。

3、准备工作

1)、安装nodeJS(安装方法请到官方查看)
2)、使用npm初始化项目

npm init ES6

ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息,并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack
npm install -g webpack

4、安装依赖

配置ES6环境,我们需要安装以下几个必须的依赖包 继续阅读使用webpack配置ES6开发环境

ionic2中使用Firebase与Angularfire

为了把一个老项目中的Firebase以及Angularfire进行升级,并且升级ionic项目,由此入了很多很多的坑,首先使用老项目不论怎么调试怎么重新运行npm install,ionic serve启动项目总是失败而告终,最终无法仍受了,重新直接使用新版的ionic2版本与新版的Firebase与Angularfire2重新重构一次项目。由此遇到了很多升级过程中的坑。
1、升级了Firebase后,出现了找不到AngularFire和FirebaseListObservable的解决办法
由于更新到了最新版的Firebase,而firebase库已经进行了一些调整,导致了找不到AngularFire和FirebaseListObservable,在新版的firebase库中,已经将这两个方法重新封装到了database里面了,并且摒弃了AngularFire,重新使用AngularFireDatabase,因此我们需要这样来调用:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
constructor(private af: AngularFireDatabase){this.af.list()}

2、打包之后遇到了这样的问题:Client doesn’t have permission to access the desired data. 继续阅读ionic2中使用Firebase与Angularfire

JavaScript按照经纬度坐标对比与目的地的距离

在开发中可能现在很多都在使用地图定位,而无需在进行复杂的计算距离的方法,因为计算已经被地图给代替了,我们也就不需要再进行坐标到坐标的距离计算了,但是当你只是想使用距离而不想使用地图的时候,你就得进行坐标计算了,这不我在一个项目中就遇到这样的问题,根据手机获取当前地理位置的坐标,然后再与目的地坐标(已知坐标)进行计算,并且得到距离,当然也可以实时更新手机坐标以获得最准确的距离。
下面我们直接看代码吧! 继续阅读JavaScript按照经纬度坐标对比与目的地的距离

使用css设置打印

我们都知道A4的尺寸是210mm * 297mm,在css中,我们可以直接使用毫米的单位来设置页面的宽高,当然你也可以使用相应的像素进行设置,不过只是通过body或者html来设置宽高的话,可能也会出现问题,而在这里我们需要使用@page来对页面进行定义,@page主要是用于打印的时候定义页面的类型,比如A4,A5,A3等等。下面先来看一下@page的使用方法。

@page{
  size: A4;
  margin: 0;
}

另外在设置好@page后,我们可能还会需要设置分页,分页很简单,直接使用page-break-before:always;或者page-break-after:always;就可以设置分页,在网页中是不会显示任何效果的,不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中,使用如下:

@media print{
  .page-break{
    page-break-before:always;
  }
}

.page-break是需要分页的class的元素。
继续阅读使用css设置打印

在electron中使用ionic2

electron是atom官方的一个跨平台的桌面应用开发框架,具官方介绍说是“ Build cross platform desktop apps with JavaScript, HTML, and CSS”,也就是说可以直接使用,你最喜欢的html+css+js来开发跨平台的桌面应用程序。如果你之前使用过angular以及react之类的JS框架,那么你就可以使用这些框架来制作一个跨平台的桌面应用。下面我们主要是说一下在ionic2中,我们要如何使用electron与ionic2进行通信!
由于electron使用的是chrome的V8引擎,也就是可以理解为一个浏览器,因此我们只需要编写想要的前端代码就可以直接运行在electron中了。建议大家边看electron的doc边做开发。因为我也是刚刚开始接触electron,只不过我只是需要从ionic中传递数据到electron中,让其与其他设备进行交互而已,因此我做的只是一个简单的ionic传递数据到electron,其他的我并不深入。因此大家喜欢研究的朋友可以深入研究下electron。
1、安装electron
安装过程可能并不复杂,但是一定要记住要使用淘宝的npm镜像进行安装,因为我翻墙了也无法安装成功,因此建议大家使用cnpm,这个特别快!
在nodejs中键入如下命令即可进行安装
npm install electron -g 继续阅读在electron中使用ionic2

关于谷歌Adsense广告

其实我已经很久没有做adsense广告了,也没有做站长了。这个只是个小小的博客,很多朋友问我为什么我的小博客上还挂adsense广告,其实原因很简单,那是因为我的google账号中几年前还留下了60美元,我只是想通过博客投放的方式,让它凑足100美元,然后可以通过西联快汇的方式获得这100美元而已,之后就会撤下adsense广告。
做adsense到底赚不赚钱?这个问题困扰了很多站长,其实很久以前谷歌还未退出中国大陆的时候,谷歌adsense确实是个非常不错的赚钱方式,那时候的佣金足够高,很容易赚钱,但是自从谷歌退出中国大陆后,adsense的发展好像在大陆没有体现出来,因为我们在国内直接都无法访问到谷歌adsense的页面,从而导致了adsense在大陆的业务,因此佣金也是一而再的降低了很多。这个小博客从放广告到现在也就才为我赚到几美元。可见当年一直响当当的adsense的市场已经被百度占领了,其实有时候还是挺怀念当年跟着《月与灯依旧》博主一起到中国邮政提取adsense广告费的生活。那时我们都还很年轻,刚踏入社会,拿到的第一笔收入就是adsense广告费,两人经常欣喜若狂。而如今大势早已过去,我也早就不再做站长,如今百度排名广告充斥了整个市场,百度广告业务也大增。很多人问我为什么不用百度广告,原因很简单,我的网站都未备案,在百度哪里是申请不到广告的。因此也从未做过百度广告。
如今站长行业已经倒下了,其实很简单,我们看一下当年最流行的dedecms和帝国cms的版本更新都不再那么勤了,砸门祖国对网络的监管越来越完善了,这就说明了很多站长已经丢了饭碗了,php也被很多程序员抛弃了。因此谁也搞不清楚以后的网络该如何才能再得到一个稳定的饭碗!
网络的发展太快,让我吃到一点点甜头,我就跟不上了步伐。为那些深夜里依然在努力的站长们致敬,虽然我已经退出了,但是我能体会到站长的苦累!不过我的退出也让我正式踏入了前端开发的大军中,感谢那些无数个夜里让我不断研究代码的cms系统们,感谢那些无数个周末让我不断学习seo技巧的搜索引擎们,感谢那些无数的站长在我群里不断讨论各种优化与学习的站长们。
此致
敬礼!