初探pwa（pwa学习系列）

PWA介绍

一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。

是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。

官网上给出 PWA 的宣传是 ：

  • Reliable （ 可靠的 ）: 当用户从手机主屏幕启动时，不用考虑网络的状态是如何，都可以立刻加载出 PWA。
  • Fast（ 快速的 ）: 这一点应该都很熟悉了吧，站在用户的角度来考虑，如果一个网页加载速度有点长的话，那么我们会放弃浏览该网站，所以 PWA 在这一点上做的很好，他的加载速度是很快的。
  • Engaging（ 可参与的 ）: PWA 可以添加在用户的主屏幕上，不用从应用商店进行下载，他们通过网络应用程序 Manifest file 提供类似于 APP 的使用体验（ 在 Android 上可以设置全屏显示哦，由于 Safari 支持度的问题，所以在 IOS 上并不可以 ），并且还能进行 ”推送通知” 。

PWA关键技术

  • Service Worker （可以理解为服务工厂）
  • Manifest （应用清单）
  • Push Notification（推送通知）

Service Worker

SW 是什么呢？这个是离线缓存文件。我们 PWA 技术使用的就是它！SW 是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门，因为使用了它，才会有的那个 Reliable 特性吧，SW 作用于 浏览器于服务器之间，相当于一个代理服务器。

浏览器支持

顺便带一句：目前只能在 HTTPS 环境下才能使用SW，因为SW 的权利比较大，能够直接截取和返回用户的请求，所以要考虑一下安全性问题。

事件机制

功能(还是比较逆天的)

  • 后台数据的同步
  • 从其他域获取资源请求
  • 接受计算密集型数据的更新，多页面共享该数据
  • 客户端编译与依赖管理
  • 后端服务的hook机制
  • 根据URL模式，自定义模板
  • 性能优化
  • 消息推送
  • 定时默认更新
  • 地理围栏

生命周期

  • Parsed （ 解析成功 ）： 首次注册 SW 时，浏览器解决脚本并获得入口点，如果解析成功，就可以访问到 SW 注册对象，在这一点中我们需要在 HTML 页面中添加一个判断，判断该浏览器是否支持 SW
  • Installing （ 正在安装 ）：SW 脚本解析完成之后，浏览器会尝试进行安装，installing 中 install 事件被执行，如果其中有 event.waitUntil ( ) 方法，则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功，如果 Promise 被拒绝，则安装失败，SW会进入 Redundant（ 废弃 ）状态。
  • Installed / Waiting （安装成功/等待中）：如果安装成功，SW 将会进入这个状态。

  • Activating （ 正在激活 ）：处于 waiting 状态的 SW 发生以下情况，将会进入 activating 状态中：
    当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting（）方法被调用 （ ps： self 是 SW 中作用于全局的对象，这个方法根据英文翻译过来也能明白什么意思啦，跳过等待状态 ）、用户已关闭 SW 作用域下的所有页面，从而释放了当前处于激活状态的 worker、超出指定时间，从而释放当前处于激活状态的 worker

  • Activated （ 激活成功 ）：该状态，其成功接收了 document 全面控制的激活态 worker 。

  • Redundant （ 废弃 ）：这个状态的出现时有原因的，如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看

Manifest

Web App Manifest 是一个 W3C 规范，它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有：

  • ​ 能够将你浏览的网页添加到你的手机屏幕上

  • ​ 在 Android 上能够全屏启动，不显示地址栏 （ 由于 Iphone 手机的浏览器是 Safari ，所以不支持哦）

  • ​ 控制屏幕 横屏 / 竖屏 展示

  • 定义启动画面

  • 可以设置你的应用启动是从主屏幕启动还是从 URL 启动

  • 可以设置你添加屏幕上的应用程序图标、名字、图标大小

Push Notification

Push 和 Notification 是两个不同的功能，涉及到两个 API 。​ Notification 是浏览器发出的通知消息。Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。

PWA示例(待完善)

展开全文 >>

h5如何更快捷稳定的导流到微信

一般的方法

  • 文案引导用户保存图片，扫码添加，明显这个操作是很不方便的
  • 文案提示微信号，然后用户打开微信搜索添加

目前最便捷的方法

点击跳转链接，可直接打开微信里面的页面，会有一张带二维码的图片（上传到京东论坛、等其他地方的）

微信商务和大厂的商务合作，比如京东，这种我们公司已经买回了ticket生成源码。

1
location.href = 'weixin://dl/business/?ticket='

优点：

  • 可短时间内使用，迅速导粉，转化高

缺点：

  • 上传到京东的图片会被随时删除，不稳定，需要及时更换
  • 一旦被用户举报，微信发现后封号风险高
  • 个人感觉体验不太好，感觉有点打开广告网站一样，可信度有点低

不是最便捷但是比较稳定的方法

这种协议可以在外部浏览器打开微信

1
location.href = 'weixin://'

然后我们要做的是，帮用户复制并且打开微信，落地到微信首页

先体验一下

代码：

1
2
3
4
var clipboard = new ClipboardJS('button');
clipboard.on('success', function(e)  {
    location.href = 'weixin://'
});

更好的方法

等大家一起想。。。。。。

展开全文 >>

robots写法

一、为什么要写robots.txt文件，它的作用是什么？

robots.txt是用来告诉搜索引擎网站上哪些内容可以被访问、哪些不能被访问。当搜索引擎访问一个网站的时候，它首先会检查网站是否存在robots.txt，如果有则会根据文件命令访问有权限的文件。

而一个网站为什么要写robots.txt，主要有四点：

  1. 保护网站安全
  2. 节省流量
  3. 禁止搜索引擎收录部分页面
  4. 引导蜘蛛爬网站地图
二、robots.txt的写法与步骤
  1. 定义搜索引擎

用User-agent：来定义搜索引擎，其中*表示所有，Baiduspider表示百度蜘蛛，Googlebot表示谷歌蜘蛛。

也就是说User-agent：*表示定义所有蜘蛛，User-agent：Baiduspider表示定义百度蜘蛛。

  1. 禁止与允许访问

Disallow: /表示禁止访问，Allow: /表示允许访问。

在写robots.txt时需特别注意的是，/前面有一个英文状态下的空格（必须是英文状态下的空格）。

  1. 禁止搜索引擎访问网站中的某几个文件夹，以a、b、c为例，写法分别如下：

    1
    2
    3
    4
    5
    Disallow: /a/
    Disallow: /b/
    Disallow: /c/

  2. 禁止搜索引擎访问文件夹中的某一类文件，以a文件夹中的js文件为例，写法如下：

1
Disallow: /a/*.js

  1. 只允许某个搜索引擎访问，以Baiduspider为例，写法如下：

    1
    2
    3
    User-agent: Baiduspider
    Disallow:

  2. 禁止访问网站中的动态页面

    1
    2
    3
    User-agent: *
    Disallow: /*?*

  3. 只允许搜索引擎访问某类文件，以htm为例，写法如下：

    1
    2
    3
    4
    5
    User-agent: *
    Allow: .htm$
    Disallow: /

  4. 禁止某个搜索引擎抓取网站上的所有图片，以Baiduspider为例，写法如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    User-agent: F
    Disallow: .jpg$
    Disallow: .jpeg$
    Disallow: .gif$
    Disallow: .png$
    Disallow: .bmp$
三、robots.txt文件存放位置

robots.txt文件存放在网站根目录下，并且文件名所有字母都必须小写。

四、特别注意事项

在写robots.txt文件时语法一定要用对，User-agent、Disallow、Allow、Sitemap这些词都必须是第一个字母大写，后面的字母小写，而且在:后面必须带一个英文字符下的空格。

网站上线之前切记写robots.txt文件禁止蜘蛛访问网站，如果不会写就先了解清楚写法之后再写，以免给网站收录带来不必要的麻烦。

robots.txt文件生效时间在几天至一个月之间，站长自身无法控制。但是，站长可以在百度统计中查看网站robots.txt文件是否生效。

展开全文 >>

GreenSock-TweenMax极简入门指南

GreenSock简介

GreenSock在Flash动画时代久负盛名，并且GreenSock的维护团队与时俱进，推出了以javascript为核心的GreenSock，在Flash和HTML5项目中，你可以使用相同的动画工具集，同样的API，同样的开发体验，同样关注性能。

它具有以下优点:

  • 速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
  • 轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
  • 没有依赖。
  • 灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。
  • 任何对象都可以实现动画。

开始之前先来了解下GSAP动画平台四个插件的不同功能。如下图所示：

插件图

对应四个插件，GreenSock也相应提供对应的四个JavaScript序列工具方法来开发动画，主要是TweenLite、TweenlineLite、TweenlineMax、TweenMax。

建议在开发中使用TweenMax这个全功能的js文件，它包括了GreenSock动画平台的所有核心的功能。

基础

本教程主要以TweenMax这个全功能的js文件为基础，它包括了GreenSock动画平台的所有核心的功能。还需要引入jquery来选择和操作DOM。

选择元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
html, body {
  height: 100%;
}
body {
  background-color: #262626;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
#box {
  background-color: #88ce02;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.boxSmall {
  position: absolute;
  background-color: #70a40b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 75px;
  z-index: 2;
}
1
2
3
<div id="box">
  <div class="boxSmall"></div>
</div>
1
2
// 通过jqery选择元素 接下来让它动起来
var $box = $('#box');

动画

TweenLite.to()方法

下面就是让它动起来，可以使用TweenLite.to()方法来使元素动起来。比如，让元素移动到浏览器左边的边缘，我们就可以使用TweenLite.to()方法。

1
2
TweenLite.to($box, 0.7, {left: 0});
// TweenLite.to(what, duration, { which CSS properties });

在GreenSock中，一些CSS属性对应到GreenSock中还是有些不同的。比如transform中translate在GreenSock中使用x,y就对应着translate(x,y)。任何的CSS属性需要从有－的写法变为驼峰式的写法。比如background-color修改为backgroundColor等。以及CSS中的transform:rotate()变为rotation。

TweenLite.from()方法

TweenLite.from顾名思义，就是使元素从指定的属性的值运动到元素的初始值。还是以上一个demo为例子，修改代码如下：

1
TweenLite.from($box, 2, {x: '-=200px', autoAlpha: 0});

上面的代码是用来使元素从定义在.from()方法里的位置运动到在CSS中定义的位置。

TweenLite.set()

有时候，我们只是想设置元素的一些CSS属性并不需要动画效果，比如，重设元素的位置。

这个时候就可以使用GreenSock提供的.set()方法。
去掉我们前面编写的代码除了定义好的$box变量，编写下面的代码：

1
2
3
TweenLite.set($box, {x: '-=200px', scale: 0.3});
TweenLite.set($box, {x: '+=100px', scale: 0.6, delay: 1});
TweenLite.set($box, {x: '-50%', scale: 1, delay: 2});

运行上面的代码，可以看到元素只是单纯的在改变属性并没有动画效果。

TweenLite.fromTo()方法

最后来说一说TweenLite.fromTo这个方法。

顾名思义，这个方法我们可以定义元素的起始位置：

1
TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150});

缓动曲线

TweenMax提供了下面这些运动曲线：

1、Back 2、SlowMo 3、StppedEase 4、RoughEase 5、Bounce 6、Circ 7、Elastic 8、Expo 9、Sine

具体曲线运动效果，可以去这个地址看看：

在实际开发中，开发动画效果都会在动画过程中做一些其它的操作，这个时候就要用到回调函数了。TweenMax提供了在动画各个阶段的回调方法，使用起来非常方便。

回调方法

首先以.fromTo()方法来说明回调的使用用法。

比如，我们想要在动画开始的时候来触发回调函数。首先来创建一个start的函数：

1
2
3
function start(){
  console.log('start');
}

触发回调函数，只需要添加这句代码就可以了onStart:start就可以了，非常简单吧。

1
TweenLite.fromTo($box, 2, {y: '-=200px'}, {y: 100, ease: Bounce.easeOut,onStart:start});

你也可以添加onUpdate和onComplete来触发对应的回调函数：

1
2
3
4
5
6
7
8
9
function start(){
  console.log('start');
}
function update(){
  console.log('animating');
}
function complete(){
  console.log('end');
}

OK，到目前为止，我们开发的动画都是针对单个元素的运动。在实际开发中有时候需要多个元素一起运动，只是运动的属性的值不同而已，比如像下面这样的动画：

多个元素运动

staggered()方法

也许可以使用TimelineLite.to()方法一个一个的来执行。这样虽然可以达到目的，但是不够优雅。greensock给我们提供了staggered()这一方法来实现，先来看看staggerFrom这个方法的语法：

1
// TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* )

TweenMax.staggerFrom(targets:目标元素为一个数组,duration:动画执行时间,vars:动画的属性，比如位移、放大缩小以及延迟等,stagger:表示目标数组中的每一个对象动画延迟执行的时间,onCompleteAll:所有的序列动画完成后的回调方法,onCompleteAllParams:传参数给onCompleteAll方法)。

1
2
3
4
5
TweenMax.staggerFrom(".btn", 2, {scale:0.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true}, 0.2);
$(".btn").click(function(){
  TweenMax.staggerTo(".btn", 0.5, {opacity:0, y:-100, ease:Back.easeIn}, 0.1);
});

从代码可以看到，使用stagger()方法可以同时操作多个元素来产生动画效果，仅仅只需要一句代码方便好使。

staggerFrom()方法使用高级技巧cycle

像上面的例子，我们只能一次赋予一个属性一个值，如x:100, rotation:90。如果我们想一次性让元素的属性能随机的随指定的值来运动，就可以使用到taggerFrom()方法中的cycle来达到目的，如下实例所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
TweenLite.set(".wrapper",{visibility:"visible"});
var tl = new TimelineMax();
tl.staggerFrom(".list li",0.5,{
  opacity:0,
  cycle:{
    x:[-100,100],   //x:[-100,100,200,300]  rotationX:[-90,90]
    //rotationX:[-90,90],
    //transformOrigin:["50% top -100","50% bottom 100"]
    //x:function(i){
      //return Math.random() * 300;
      //return (i+1) * 50;
    //},
    ease:function(i) {
      return Back.easeOut.config(i * 0.3);
    }
  }
},0.1)
tl.timeScale(0.5);

我们在cycle中定义了一个数组赋予给X(即transform中的translateX),在实际代码运行中，stagger()会依次从数组中取值赋予给元素，不断的循环。这在执行多个对象的动画的时候非常方便。

链式动画

使用过jquery都知道，jquery又一个很强大的特性即链式操作，比如：

1
$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good");

对一个jQuery对象先调用了css()函数修改样式，然后使用attr()函数修改属性，这种调用方式象链一样，所以称为”链式操作”。

链式操作能够让代码变得简洁，因为往往可以在一条语句中实现以往多条语句才能完成的任务。

同样在GreenSock中也支持类似jquery一样的链式动画操作，先来看实例：

1
2
3
4
var tl = new TimelineLite();
tl.to(".green", 1, {x:550})
  .to(".blue", 1, {x:550})
  .to(".orange", 1, {x:550})

是不是跟jquery的链式操作很相似，所有的动画效果是一个接着一个运行的，即链式动画。

GreenSock不仅提供了像这种方便的链式动画操作，而且还提供了各种动画的控制方法，比如播放、暂停等方法可以更加灵活的来对动画进行控制。

动画控制

GreenSock提供了play()，pause()，resume()，reverse()，seek()，restart()， progress()，timeScale()等方法来控制动画。下面来看看这些方法都具体起到了什么作用。

  • play()方法是开始播放动画；

  • pause()是暂停动画；

  • resume()是重新开始播放动画，是从暂停处开始播放；

  • reverse()是从相反的方向来执行动画；

  • seek()是跳转到整个动画时间的某一个时间点的时地状态，比如整个动画时间是3秒，如果调用seek(1)就表示跳转到动画在1秒这个时间点的状态；

  • progress()是指执行整个动画到某一个时间段，只接收0到1之间的数字。比如给到参数0，表示在动画开始的时候；给到参数0.5表示动画直接跳转到整个动画执行来50%的状态；1就表示动画执行完的状态；

  • restart()表示重新开始播放动画。

GreenSock基本的知识就介绍到这了，利用这些方法基本上可以对付开发中一些常见的动画开发，剩下的就要看你的想象力了。

GreenSock进阶

3D效果

在平时的动效开发中，为了是动效具有立体的效果，一般会用到CSS3中的3D transform这一属性。在GreenSock中也提供了3D transform功能，支持CSS3D的全部属性，使用起来比CSS3更加方便。
开始之前首先要理解greensock中的perspective和transformPerspective两个属性。它们是greensock中运行的基础，使用它们才能使元素具有一个3D空间透视的表现能力。

下面是分别使用transformPerspective和没用transformPerspective的实例：

1
2
3
4
5
6
TweenLite.set(".box",{transformPerspective:300});
TweenLite.set(".600box",{transformPerspective:500});
TweenLite.to(".box", 3, {rotationY:360, transformOrigin:"left top"})
TweenLite.to(".nbox", 3, {rotationY:360, transformOrigin:"left top"})

可以明显看到，第三个元素由于没有使用perspective属性，只是一个平面的旋转效果。

transformPerspective是针对单个元素使用的，而perspective则是使用在父级元素上，使用它会使改父级元素下的子元素具有3D空间透视的一个展现形式，实例如下所示：
可以看到，只需要在父级使用perspective的方法，可以同时使它的子元素都具有3D的展现。

transformOrigin

transformOrigin是用来设置元素在做transform位移变换时的原点的。默认值是元素的中心点即(“50%,50%”)。transformOrigin有三个值(x,y,z)，z值是一个可选项。

可以使用”top”, “left”, “right”,或者是”bottom”值亦或是百分值(比如bottom right可以设置为 “100% 100%)。

展开全文 >>

CORS非简单请求

前言

最近听大公司LingHit后端同事说接口请求都要以http协议规范化，不能只使用GET/POST等请求，要根据需求使用对应的请求名称，那么对于前端同学来说，在跨域的情况下问题就出现了，请求失效了……,这到底是为什么呢？

下面我们先来看一下经常使用的http请求流程是怎么样的呢？？
此处输入图片的描述
看明白了吧！之所以你的请求没有响应是由于后端大哥们没有对非简单请求做出响应处理。这时候你就可以去找他们了，然而他们肯定也是一脸懵B，你要做的就是教他们改。。。。。。

请求分类

首先了解下CORS,
CORS即Cross Origin Resource Sharing（跨来源资源共享），通俗说就是我们所熟知的跨域请求。众所周知，在以前，跨域可以采用代理、JSONP等方式，而在Modern浏览器面前，这些终将成为过去式，因为有了CORS。

CORS可以分为以下两种：

1、简单请求

属于简单请求的是下面几种：

1.1 http方法是以下中一个：
  • HEAD
  • GET
  • POST
    1.2 HTTP头信息不超出以下几种字段
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:(application/x-www-form-urlencoded或
    multipart/form-data或
    text/plain)

任何一个不满足上述要求的请求，即被认为是复杂请求。一个复杂请求不仅有包含通信内容的请求，同时也包含预请求（preflight request）。

1、非简单请求

任何不满足上述简单请求要求的请求，都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作，或者发送Content-Type: application/json的内容。
表面上看起来和简单请求使用上差不多，但实际上浏览器发送了不止一个请求。其中最先发送的是一种”预请求”，此时作为服务端，也需要返回”预回应”作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。
（todo:补个图）

预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容：

Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。

显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。

复杂请求的部分响应头及解释如下：

Access-Control-Allow-Origin（必含） – 和简单请求一样的，必须包含一个域。
Access-Control-Allow-Methods（必含） – 这是对预请求当中Access-Control-Request-Method的回复，这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法，但服务端仍然可以返回所有允许的方法，以便客户端将其缓存。
Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部。这里在实际使用中有遇到，所有支持的头部一时可能不能完全写出来，而又不想在这一层做过多的判断，没关系，事实上通过request的header可以直接取到Access-Control-Request-Headers，直接把对应的value设置到Access-Control-Allow-Headers即可。
Access-Control-Allow-Credentials（可选） – 和简单请求当中作用相同。
Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并非免费午餐，允许时应当尽可能缓存。

一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。

后端解决方法

1
2
3
header('Access-Control-Allow-Origin:*');  //支持全域名访问，不安全，部署后需要限制为R.com
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http动作根据需求添加
header('Access-Control-Allow-Headers:x-requested-with,content-type');  //响应头 请按照自己需求添加。

遗留问题

这样浏览器每次会发起两次请求，增加了响应时间，虽然后端可以设置过期时间，但是用户第一次访问时是会有问题，所以前端尽量少使用复杂请求，跨域问题留给后端处理。。。。。。。。

展开全文 >>

css样式书写规范

一直在开发过程中，不是很在意css的样式规范，但是随着团队成员的增加，不得不把规范建立起来。
所以借鉴牛人的文章，学习一下。

不同的规范都有各自的长处与缺陷，对待所谓的规范最好的方式不是人云亦云，拿来就用，而是应该结合实际情况及需求，
取长补短，取其精华去其糟粕。我们可以根据自己的需求来规范自己的css规范。

编码设置

采用 UTF-8 编码，在 CSS 代码头部使用：

1
@charset "utf-8";

注意，必须要定义在 CSS 文件所有字符的前面（包括编码注释），@charset 才会生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* bad失效的 */
/* 字符编码 */  
@charset "utf-8";
html,
body {
  height: 100%;
}
@charset "utf-8";

命名空间规范

  • 布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
  • 状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
  • 工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
  • 组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
  • 钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。

命名空间思想

字符小写，不建议驼峰式命名类，不建议使用下划线 _ 进行连接的理由

  • 节省操作，输入的时候少按一个 shift 键
  • 能良好区分 JavaScript 变量命名

选择器

当一个规则包含多个选择器时，每个选择器独占一行。

、+、~、> 选择器的两边各保留一个空格。

1
2
3
.g-header > .g-header-des,
.g-content ~ .g-footer {
}

命名短且语义化良好，对于选择器的命名，尽量简洁且具有语义化，不应该出现 g-abc 这种语义模糊的命名。

规则声明块

  • 当规则声明块中有多个样式声明时，每条样式独占一行。
  • 在规则声明块的左大括号 { 前加一个空格。
  • 在样式属性的冒号 : 后面加上一个空格，前面不加空格。
  • 在每条样式后面都以分号 ; 结尾。
  • 规则声明块的右大括号 } 独占一行。
  • 每个规则声明间用空行分隔。
  • 所有最外层引号使用单引号 ‘ 。
  • 当一个属性有多个属性值时，以逗号 , 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。

示列如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.g-footer,
.g-header {
  position: relative;
}
.g-content {
  background:
    linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%);
}
.g-content::before {
  content: '';
}

数值与单位

  • 当属性值或颜色参数为 0 – 1 之间的数时，省略小数点前的 0 。color: rgba(255, 255, 255, 0.5)color: rgba(255, 255, 255, .5);
  • 当长度值为 0 时省略单位。margin: 0px auto margin: 0 auto。
  • 十六进制的颜色属性值使用小写和尽量简写。color: #ffcc00 color: #fc0。

样式属性顺序

单个样式规则下的属性在书写时，应按功能进行分组，并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。

  • 如果包含 content 属性，应放在最前面；
  • Positioning Model 布局方式、位置，相关属性包括：position / top / right / bottom / left / z-index / display / float / …
  • Box Model 盒模型，相关属性包括：width / height / padding / margin / border / overflow / …
  • Typographic 文本排版，相关属性包括：font / line-height / text-align / word-wrap / …
  • Visual 视觉外观，相关属性包括：color / background / list-style / transform / animation / transition / …

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

合理使用使用引号

在某些样式中，会出现一些含有空格的关键字或者中文关键字。

font-family 内使用引号，当字体名字中间有空格，中文名字体及 Unicode 字符编码表示的中文字体，为了保证兼容性，都建议在字体两端添加单引号或者双引号：

1
2
3
body {
  font-family: 'Microsoft YaHei', '黑体-简', '\5b8b\4f53';
}

background-image 的 url 内使用引号,如果路径里面有空格，旧版 IE 是无法识别的，会导致路径失效，建议不管是否存在空格，都添加上单引号或者双引号：

1
2
3
div {
  background-image: url('...');
}

避免使用 !important

除去某些极特殊的情况，尽量不要不要使用 !important。

!important 的存在会给后期维护以及多人协作带来噩梦般的影响。
当存在样式覆盖层叠时，如果你发现新定义的一个样式无法覆盖一个旧的样式，只有加上 !important 才能生效时，是因为你新定义的选择器的优先级不够旧样式选择器的优先级高。所以，合理的书写新样式选择器，是完全可以规避一些看似需要使用 !important 的情况的。

代码注释

单行注释

星号与内容之间必须保留一个空格。

/ 表格隔行变色 /

多行注释

星号要一列对齐，星号与内容之间必须保留一个空格。

1
2
3
/**
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

规则声明块内注释

使用 // 注释，// 后面加上一个空格，注释独立一行。

1
2
3
4
.g-footer {
    border: 0;
    // ....
}

文件注释

文件顶部必须包含文件注释，用 @name 标识文件说明。星号要一列对齐，星号与内容之间必须保留一个空格，标识符冒号与内容之间必须保留一个空格。

1
2
3
4
5
6
7
/**
* @name: 文件名或模块名
* @description: 文件或模块描述
* @author: author-name(mail-name@domain.com)
*          author-name2(mail-name2@domain.com)
* @update: 2015-04-29 00:02
*/
  • @description为文件或模块描述。
  • @update为可选项，建议每次改动都更新一下。

当该业务项目主要由固定的一个或多个人负责时，需要添加@author标识，一方面是尊重劳动成果，另一方面方便在需要时快速定位责任人。

LESS 使用建议

嵌套层级规定

使用 SASS 、 LESS 等预处理器时，建议嵌套层级不超过 3 层。

组件/公用类的使用方法

组件/公用类使用 %placeholders 定义，使用 @extend 引用。如：

1
2
3
4
5
6
7
8
.clearfix() {
  overflow: auto;
  zoom: 1;
}
.g-header {
  .clearfix()
}

组件类的思考

使用 LESS ，经常会预先定义好一些常用公用组件类，譬如清除浮动，水平垂直居中，文字 ellipsis。又或者多个元素具有同样的样式，我们希望能够少写这部分代码，公共部分抽离出来只写一次，达到复用。

尽量避免使用标签名

1
2
3
4
5
6
7
8
9
<span>
  <div class="g-content">
    <ul class="g-content-list"><li class="item"/>
        <li class="item"/>
        <li class="item"/>
        <li class="item"/>
    </ul></div>
</span>

在给最里层的标签命名书写样式的时候，我们有两种选择：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.g-content {
  .g-content-list {
    li {
      ...
    }
  }
}
.g-content {
  .g-content-list {
    .item {
      ...
    }
  }
}

也就是，编译之后生成了下面这两个，到底使用哪个好呢？

  • .g-content .g-content-list li { }
  • .g-content .g-content-list .item { }

基于 CSS 选择器的解析规则（从右向左），建议使用上述第二种 .g-content .g-content-list .item { } ，避免使用通用标签名作为选择器的一环可以提高 CSS 匹配性能。

浏览器的排版引擎解析 CSS 是基于从右向左（right-to-left）的规则，这么做是为了使样式规则能够更快地与渲染树上的节点匹配。

最后

归纳总结的内容目前you这些，先将这些应用到项目中，后续有好的方法再添加。

原文参考链接

展开全文 >>

一定要知道的浏览器缓存知识

一定要知道的浏览器缓存知识

标签（空格分隔）： web浏览器缓存

为什么要写一篇这样的文章呢？那就是被缓存坑了，既然坑了就要刨根问题找到问题所在并解决它，所以这篇文章的目的就是为了纪念一下。

什么破问题呢？

浏览器为了增强用户体验会对页面(html)及页面中的（img,js,css）资源进行缓存，微信浏览器尤其严重，资源文件我们通过webpack等打包工具实现了缓存的控制，通过hash修改文件名，是没有问题的，关键在于对html文件的缓存，html文件都被缓存了，资源不缓存有个撒用，有个撒用？

一些的解决方案

1、设置meta标签(部分浏览器有效，对于微信这样的奇葩，根本没用。)

1
2
3
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

2、在html后面加上?v=20170705这样的hash值，需要更改放出去的链接，不太现实。在首次访问页面时中自动生成hash值改变url，显然是不明智的，导致微信浏览器缓存了很多份入口文件，想想我们更新版本的次数就知道，有多少次版本更新就有多少个文件缓存在用户的浏览器中。

3、给index.html的跟标签html加上一个不存在的manifest文件

1
<html manifest="ignore.manifest">

这个是w3c的明确表述的，第一句就说了，如果manifest文件不存在，浏览器对此页面的缓存将会失效。但是，对于微信浏览器来说，没用的。（没有具体测试过，网上有人实践过没有）

问题根源服务器配置的问题

查看页面的请求头，第一次请求html为200，以后每次都是304刷新，继续查看请求头，发现服务器返回的头部中包含ETag和last-modify这两个参数，服务器利用这两个参数对html进行缓存控制，所以只要服务器进行处理，对请求的数据进行处理就可以了，不在缓存html文件，每次返回200即可。但是我们后端同事对缓存这些并不是很了解，推动他们修改，要告诉他们缘由，所以我觉得有必要更深入了解关于缓存的问题。下面会介绍一下缓存的基本概念。

闲扯结束，进入正题。

缓存

缓存分为服务端侧（server side，比如 Nginx、Apache）和客户端侧（client side，比如 web browser）。
常用的服务端缓存有CDN缓存，客户端缓存就是指浏览器缓存。

浏览器缓存

浏览器缓存分为强缓存和协商缓存：
1 强缓存：浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；
2 协商缓存：当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回（304），但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；若未命中请求，则将资源返回客户端，并更新本地缓存数据（200）。

区别 ： 强缓存不发请求到服务器，协商缓存会发请求到服务器。

如何设置缓存

1 HTML Meta标签控制缓存（非HTTP协议定义）

1
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。这种方法使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。

2 HTTP头信息控制缓存

HTTP头信息控制缓存是通过Expires（强缓存）、Cache-control（强缓存）、Last-Modified/If-Modified-Since（协商缓存）、Etag/If-None-Match（协商缓存）实现，下面详细介绍。

1)、Expires：是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2016 23:55:55 GMT，

读取缓存数据条件：缓存过期时间（服务器的）< 当前时间（客户端的

缺点： Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大（比如时钟不同步，或者跨时区），那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。

2）、Cache-Control：描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。

读取缓存数据条件：上次缓存时间（客户端的）+max-age < 当前时间（客户端的）

Cache-Control值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

Public指示响应可被任何缓存区缓存。
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当前用户的部分响应消息，此响应消息对于其他用户的请求无效。
no-cache指示请求或响应消息不能缓存，该选项并不是说可以设置”不缓存“，而是需要和服务器确认
no-store在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下來。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。上次缓存时间（客户端的）+max-age（64200s）<客户端当前时间
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

注意： 这两个header可以只启用一个，也可以同时启用，当response header中，Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires：

3)、Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified： 标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。

If-Modified-Since： 当资源过期时（强缓存失效），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。

缺点

  • Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间（无法及时更新文件）

  • 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存，有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形（无法使用缓存）。

4)、Etag/If-None-Match：

Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。
If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag一起使用时，服务器会优先验证ETag。

参考文章：
1、 浏览器 HTTP 协议缓存机制详解
2、 详解web缓存

展开全文 >>

实现一个Promise

前言

上一篇文章记录了关于promise的一些常规用法，这篇文章尝试基于Promise/A+规范实现一个promise对象。

看个栗子

下面代码是promise的最基本的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getRandomNum(){
    return new Promise(function(resolve,reject){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                resolve(randNum);    
            }else{
                reject(randNum);
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function success(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
},function fail(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数大于5，随机数=' + res )
})

getRandomNum方法返回一个Promise,可以通过它的then方法注册在promise异步操作成功和失败时执行的回调。

研究其原理

先来大概了解一下promise/A+规范是的要求。
首先，promise 是一个拥有 then 方法的对象或函数，其行为符合本规范；
两个硬性要求：
1、一个 promise 必须提供一个 then 方法以访问其当前值（value）、终值（eventual value）和据因（reason）。

2、一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。

先来实现的then方法

promise 的 then 方法接受两个参数：

1
promise.then(onFulfilled, onRejected)

还有其他几点要求：
1、调用要求:
onFulfilled 和 onRejected 必须被作为函数调用（即没有 this 值）
2、多次调用：
then 方法可以被同一个 promise 调用多次
3、返回：
then 方法必须返回一个 promise 对象

好了，下面开始实现吧！为了易于理解，暂时先不加入onRejected回调参数，在最后会加入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// fn为构造函数参数
function MyPromise(fn){
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled){
    this.callbacks.push(onFulfilled);
    return this;  // 实现then方法的链式调用
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    this.value = result;
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            callback(that.value);
        });
    },0);
}
// 试一下
function getRandomNum(){
    return new MyPromise(function(resolve){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                // 执行then方法注册的回调函数
                resolve(randNum);    
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
}).then(function(res){
    console.log('链式调用')
})

上述逻辑：

1、调用then方法，将想要在Promise异步操作成功时执行的回调放入callbacks队列；
2、创建Promise实例时传入的函数会被赋予一个函数类型的参数，即resolve，它接收一个参数value，代表异步操作返回的结果，当一步操作执行成功后，用户会调用resolve方法，这时候其实真正执行的操作是将callbacks队列中的回调一一执行；

有一个问题：如果Promise异步操作已经成功，在异步操作成功之前注册的then回调都会执行，但是在Promise异步操作成功这之后调用的then注册的回调就再也不会执行了。

引入状态控制

promise有三种状态：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。
此处输入图片的描述
改进后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled){
    if(this.state === 'pending'){
        this.callbacks.push(onFulfilled);
        return this;  // 实现then方法的链式调用
    }
    onFulfilled(this.value);
    return this;
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    this.value = result;
    this.state = 'fulfilled';
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            callback(that.value);
        });
    },0);
}

上述代码的思路是这样的：resolve执行时，会将状态设置为fulfilled，在此之后调用then添加的新回调，都会立即执行。

链式调用Promise

如果then函数里面注册的仍然是一个Promise，该如何解决呢？？下面的场景应该会经常用到。

1
2
3
4
5
6
// getUserData为外层的promise对象，getQuestionData 内层的promise对象
getUserData()
    .then(getQuestionData)
    .then(function (value) {
        // 对接口返回的数据进行处理
    });

实现方案就是在then方法中再返回一个promise对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法中，创建并返回了新的Promise实例，这是串行Promise的基础，并且支持链式调用。
MyPromise.prototype.then = function(onFulfilled){
    var that = this;
    return new MyPromise(function(resolve){
        that._handle({
            onFulfilled:onFulfilled || null,
            resolve:resolve
        });
    });
}
// 
MyPromise.prototype._handle = function(callback){
    if(this.state === 'pending'){
        this.callbacks.push(callback);
        return;
    }
    // 如果then中没有传递任何东西，直接结束promise，执行链式中的下一个then方法
    if(!callback.onFulfilled){
        callback.resolve(this.value);
        return;
    }
    // 如果回调函数是promise对象，则返回promise对象，或者拿到普通回调函数的值
    var ret = callback.onFulfilled(this.value);
    callback.resolve(ret);
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    // 判断传递的值是否是promise
    if( result && (typeof result === 'object' || typeof result === 'function' ) ){
        // result为当前的promise对象，如果调用resolve方法传入的是promise对象会有then方法，先执行then方法，等待promise执行完成，再执行下一次循环，知道promise操作执行完成，result就为普通值
        var then = result.then;
        if( typeof then === 'function' ){
            // 外层promise对象的resolve方法，等then方法中的resolve方法执行完成之后
            then.call(result,that._resolve);
            return;
        }
    }
    
    // result 为普通值
    this.value = result;
    this.state = 'fulfilled';
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            that._handle(callback);
        });
    },0);
}

上述过程好像有点复杂，不过多多理解一下就可以完全理解promise了

加入失败状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数参数被调用
    fn(this._resolve.bind(this),this._reject.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled,onRejected){
    var that = this;
    return new MyPromise(function(resolve,reject){
        that._handle({
            onFulfilled:onFulfilled || null,
            onRejected: onRejected || null,
            resolve:resolve,
            reject: reject
        });
    });
}
// promise then方法公共处理
MyPromise.prototype._handle = function(callback){
    if(this.state === 'pending'){
        this.callbacks.push(callback);
        return;
    }
     var cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected,
            ret;
        if (cb === null) {
            cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
            cb(this.value);
            return;
        }
        // 错误捕获
        try{
            ret = cb(this.value);
            callback.resolve(ret);
        }catch(e){
            callback.reject(e);
        }
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    // 判断传递的值是否是promise
    if( result && (typeof result === 'object' || typeof result === 'function' ) ){
        var then = result.then;
        if( typeof then === 'function' ){
            then.call(result,that._resolve);
            return;
        }
    }
    
    this.value = result;
    this.state = 'fulfilled';
    this._execute();
}
// 执行失败的拒绝态，reason为拒因
MyPromise.prototype._reject = function(reason){
    this.value = reason;
    this.state = 'rejected';
    this._execute();
}
// 执行回调函数
MyPromise.prototype._execute = function(){
   var that = this;
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            that._handle(callback);
        });
    },0);
}

上述代码增加了新的reject方法，供异步操作失败时调用，同时抽出了resolve和reject共用的部分，形成execute方法。
好了一个简单的promise对象就实现了。下面我们看一下能不能用？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getRandomNum(){
    return new MyPromise(function(resolve,reject){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                resolve(randNum);    
            }else{
                reject(randNum);
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function success(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
},function fail(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数大于5，随机数=' + res )
})

看一下

总结

按照promise/A+规范实现了核心的一些功能，后续如果有需要可以继续再扩展一些其他方法，可以参考一些比较优秀的库如Q.js,bluebird.js等。

展开全文 >>

实现一个Promise

前言

上一篇文章记录了关于promise的一些常规用法，这篇文章尝试基于Promise/A+规范实现一个promise对象。

看个栗子

下面代码是promise的最基本的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getRandomNum(){
    return new Promise(function(resolve,reject){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                resolve(randNum);    
            }else{
                reject(randNum);
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function success(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
},function fail(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数大于5，随机数=' + res )
})

getRandomNum方法返回一个Promise,可以通过它的then方法注册在promise异步操作成功和失败时执行的回调。

研究其原理

先来大概了解一下promise/A+规范是的要求。
首先，promise 是一个拥有 then 方法的对象或函数，其行为符合本规范；
两个硬性要求：
1、一个 promise 必须提供一个 then 方法以访问其当前值（value）、终值（eventual value）和据因（reason）。

2、一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。

先来实现的then方法

promise 的 then 方法接受两个参数：

1
promise.then(onFulfilled, onRejected)

还有其他几点要求：
1、调用要求:
onFulfilled 和 onRejected 必须被作为函数调用（即没有 this 值）
2、多次调用：
then 方法可以被同一个 promise 调用多次
3、返回：
then 方法必须返回一个 promise 对象

好了，下面开始实现吧！为了易于理解，暂时先不加入onRejected回调参数，在最后会加入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// fn为构造函数参数
function MyPromise(fn){
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled){
    this.callbacks.push(onFulfilled);
    return this;  // 实现then方法的链式调用
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    this.value = result;
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            callback(that.value);
        });
    },0);
}
// 试一下
function getRandomNum(){
    return new MyPromise(function(resolve){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                // 执行then方法注册的回调函数
                resolve(randNum);    
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
}).then(function(res){
    console.log('链式调用')
})

上述逻辑：

1、调用then方法，将想要在Promise异步操作成功时执行的回调放入callbacks队列；
2、创建Promise实例时传入的函数会被赋予一个函数类型的参数，即resolve，它接收一个参数value，代表异步操作返回的结果，当一步操作执行成功后，用户会调用resolve方法，这时候其实真正执行的操作是将callbacks队列中的回调一一执行；

有一个问题：如果Promise异步操作已经成功，在异步操作成功之前注册的then回调都会执行，但是在Promise异步操作成功这之后调用的then注册的回调就再也不会执行了。

引入状态控制

promise有三种状态：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。
此处输入图片的描述
改进后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled){
    if(this.state === 'pending'){
        this.callbacks.push(onFulfilled);
        return this;  // 实现then方法的链式调用
    }
    onFulfilled(this.value);
    return this;
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    this.value = result;
    this.state = 'fulfilled';
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            callback(that.value);
        });
    },0);
}

上述代码的思路是这样的：resolve执行时，会将状态设置为fulfilled，在此之后调用then添加的新回调，都会立即执行。

链式调用Promise

如果then函数里面注册的仍然是一个Promise，该如何解决呢？？下面的场景应该会经常用到。

1
2
3
4
5
6
// getUserData为外层的promise对象，getQuestionData 内层的promise对象
getUserData()
    .then(getQuestionData)
    .then(function (value) {
        // 对接口返回的数据进行处理
    });

实现方案就是在then方法中再返回一个promise对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法中，创建并返回了新的Promise实例，这是串行Promise的基础，并且支持链式调用。
MyPromise.prototype.then = function(onFulfilled){
    var that = this;
    return new MyPromise(function(resolve){
        that._handle({
            onFulfilled:onFulfilled || null,
            resolve:resolve
        });
    });
}
// 
MyPromise.prototype._handle = function(callback){
    if(this.state === 'pending'){
        this.callbacks.push(callback);
        return;
    }
    // 如果then中没有传递任何东西，直接结束promise，执行链式中的下一个then方法
    if(!callback.onFulfilled){
        callback.resolve(this.value);
        return;
    }
    // 如果回调函数是promise对象，则返回promise对象，或者拿到普通回调函数的值
    var ret = callback.onFulfilled(this.value);
    callback.resolve(ret);
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    // 判断传递的值是否是promise
    if( result && (typeof result === 'object' || typeof result === 'function' ) ){
        // result为当前的promise对象，如果调用resolve方法传入的是promise对象会有then方法，先执行then方法，等待promise执行完成，再执行下一次循环，知道promise操作执行完成，result就为普通值
        var then = result.then;
        if( typeof then === 'function' ){
            // 外层promise对象的resolve方法，等then方法中的resolve方法执行完成之后
            then.call(result,that._resolve);
            return;
        }
    }
    
    // result 为普通值
    this.value = result;
    this.state = 'fulfilled';
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            that._handle(callback);
        });
    },0);
}

上述过程好像有点复杂，不过多多理解一下就可以完全理解promise了

加入失败状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数参数被调用
    fn(this._resolve.bind(this),this._reject.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled,onRejected){
    var that = this;
    return new MyPromise(function(resolve,reject){
        that._handle({
            onFulfilled:onFulfilled || null,
            onRejected: onRejected || null,
            resolve:resolve,
            reject: reject
        });
    });
}
// promise then方法公共处理
MyPromise.prototype._handle = function(callback){
    if(this.state === 'pending'){
        this.callbacks.push(callback);
        return;
    }
     var cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected,
            ret;
        if (cb === null) {
            cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
            cb(this.value);
            return;
        }
        // 错误捕获
        try{
            ret = cb(this.value);
            callback.resolve(ret);
        }catch(e){
            callback.reject(e);
        }
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    // 判断传递的值是否是promise
    if( result && (typeof result === 'object' || typeof result === 'function' ) ){
        var then = result.then;
        if( typeof then === 'function' ){
            then.call(result,that._resolve);
            return;
        }
    }
    
    this.value = result;
    this.state = 'fulfilled';
    this._execute();
}
// 执行失败的拒绝态，reason为拒因
MyPromise.prototype._reject = function(reason){
    this.value = reason;
    this.state = 'rejected';
    this._execute();
}
// 执行回调函数
MyPromise.prototype._execute = function(){
   var that = this;
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            that._handle(callback);
        });
    },0);
}

上述代码增加了新的reject方法，供异步操作失败时调用，同时抽出了resolve和reject共用的部分，形成execute方法。
好了一个简单的promise对象就实现了。下面我们看一下能不能用？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getRandomNum(){
    return new MyPromise(function(resolve,reject){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                resolve(randNum);    
            }else{
                reject(randNum);
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function success(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
},function fail(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数大于5，随机数=' + res )
})

看一下

总结

按照promise/A+规范实现了核心的一些功能，后续如果有需要可以继续再扩展一些其他方法，可以参考一些比较优秀的库如Q.js,bluebird.js等。

展开全文 >>

promise入门到入门

Promise从入门到入门

前言

在了解promise前先来了解一下javascript的几个核心概念。

  • 执行环境单线程

    js的执行环境属于单线程，HTML5提出Web Worker标准，允许创建多个线程，但是子线程完全受主线程控制，且不得操作DOM，只是用来操作逻辑复杂和执行时间较长的代码。所以，这个新标准并没有改变单线程的本质。

  • 回调队列 与 回调函数

单线程的缺点，在执行时间长的代码块时，页面失去响应，造成页面假死，用户体验极差。

为了改进这种体验，js将执行的任务划分为两种：

  1. 一种是同步任务（synchronous）

  2. 一种是异步任务（asynchronous）

异步任务？异步任务有哪几种呢？

  1. DOM事件任务(onclick)
  2. 定时器事件任务(setTimeout/setInteval);
  3. XMLHttpRequest事件任务（ajax）;

异步任务有什么特点呢？？

  1. 异步任务都是通过异步回调函数完成；
  2. 异步任务不进入主线程而进入一个叫回调队列的东西；
  3. 异步任务等主线程空闲时才去执行回调队列中的异步回调函数；

简单的看图来解释一下上面这些的相互关系:

image

  • event loop(事件循环)：

js会创建一个类似于while(ture)的循环，每次循环就是查看是否有待处理的事件，有则取出相关事件及回调函数放入到回调队列中由主线程执行，待处理的事件会存储在一个回调队列中。

  • callback quene(回调队列)：

异步任务会将相关回调函数添加到回调队列中。而不同的异步任务添加到回调队列的时机也不同，这些异步任务是由浏览器内核的 webcore 来执行的，webcore 包含3种 webAPI，分别是 DOM Binding、network、timer模块。

  1. DOM事件(onclick)由DOM Binding 模块来处理，当事件触发的时候，回调函数会立即添加到回调队列中；
  2. 定时器事件(setTimeout) 由timer 模块来进行延时处理，当时间到达的时候，才会将回调函数添加到回调队列中；
  3. XHR(ajax)由network 模块来处理，在网络请求完成返回之后，才将回调函数添加到回调队列中；
  • 前言小结

js中一切的异步任务都是要用 回调函数 实现的。
讲了这么多的概念我们来看一个经典的案例，通过这个案例来感受一下js的进步。

题目：三秒后红灯亮一次，再过一秒后绿灯亮一次，再过2后黄灯亮一次；如何让三个灯不断交替亮？

假设在不知道promise的情况下，我们可以这样实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let red = () => console.log('red');
let green = () => console.log('green');
let yellow = () => console.log('yellow');
let light = () => {
    setTimeout(() => {
        // 红灯亮
        red();
        setTimeout( () => {
            // 绿灯亮
            green();
            setTimeout(() => {
                // 黄灯亮
                yellow();
                // 继续循环亮灯
                light();
            },1000)
        },2000)
    },3000);        
}
// 走起
light();

看看效果

虽然效果实现了，但是代码不是很优雅，下面来一步一步优化它

1、初探Promise的概念

  • promise单词的含义：

承诺在将来一定发生的事情。

一个开放、健全且通用的 JavaScript Promise 标准。由开发者制定，供开发者参考。

你也可以自己实现一个promise，但是规范规定它必须是一个拥有 then 方法的对象或函数，其行为符合以下规范；

  • 规范摘要：

Promise对象有三种状态：

  1. 等待态（Pending）
  2. 执行态（Fulfilled）
  3. 拒绝态（Rejected）

promise状态可转变，一旦转变状态不再变化，状态转变只有两种：

  1. “Pending”状态转到“Fulfilled”
  2. “Pending”状态转到“rejected”
  • then方法:

一个promise对象必须提供一个then方法，状态发生改变后调用该方法。

1
2
3
4
5
// @params onFulfilled（执行状态的回调），onRejected（拒绝状态的回调）
// @return promise对象
promise.then(onFulfilled, onRejected)

上面理论有点抽象，来个图看看：
image

针对以上promise的规范，jQuery等流行的js库参考规范都已经实现了这个对象,es6也实现了这个对象,下面来具体来看看怎么实现的？

2、es6中的promise

ES6正式提出把Promise作为原生对象，原理实现以promise规范为主。

ES6 Promise 先拉出来遛遛 ，新版浏览器中打印一下，es6中利用构造函数实现了promise：
image

  • 基本用法(new , then , resolve , reject)

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

下面代码创造了一个Promise实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function getNumber(){
    //实例化一个promise实例，构造函数接受一个函数作为参数
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
        }, 2000);
    });
    
    //返回promise对象
    return p;            
}
 
getNumber()
.then(
    //已完成后的回调
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    //已失败后的回调
    function(reason, data){
        console.log('rejected');
        console.log(reason);
    }
);

getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。

then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调，如果只有一个则是resolve的回调。

运行结果：resolved 2 或者 rejected 数字太大了

  • catch用法
    它和then的第二个参数一样，用来指定reject的回调，用法是这样：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
    })
    .catch(function(reason){
        console.log('rejected');
        console.log(reason);
    });

不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});
//运行结果
//resolved
//4 
//rejected
//ReferenceError: somedata is no defind(....)
  • all用法
    Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
1
2
3
4
5
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

all接收一个promise对象的数组参数。三个异步操作是并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。

  • race的用法

all方法实际上是「谁跑的慢，以谁为准执行回调」
race方法「谁跑的快，以谁为准执行回调」

1
2
3
4
5
Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});
  • 多级链式调用

then方法返回一个promise对象，另外，在 then 的函数当中的返回值，可以作为后续操作的参数，因此上面的例子也可以写成,可以多级链式调用，按照回调的先后顺序依次执行

1
2
3
4
5
6
7
8
9
10
Promise.then(function (message) {
    return message;
}).then(function (message) {
    return message  + ' World';
}).then(function (message) {
    return message + '!';
}).then(function (message) {
    alert(message);
});

  • 小结

使用es6中的promise来改写前言中提出的亮灯的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let red = () => console.log('red');
let green = () => console.log('green');
let yellow = () => console.log('yellow');
// 使用promise封装灯亮的异步定时函数
let lightPro = (callback,time) => {
    // 实例化promise对象
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            callback();
            // 异步成功调用
            resolve();
        },time)
    })
}；
   
let light = () => {
    lightPro(red,3000)
        .then( _ =>  lightPro(green,2000) )
        .then( _ =>  lightPro(yellow,1000))
        .then( _ => light());
}
// 走起
light();

很明显，效果实现是一样的，但是在代码层次方面，优雅了不少，多级回调被串联的方式取代，越复杂的回调越被改进的优雅。

3、es6中 Generator 函数的异步应用参考

上一节中es6中实现的promise对象其实有很多其他的库都实现了类似的功能，与其他库（O.js,bluebird.js等）相比优势并不明显。

Promise 的最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。

那么，有没有更好的写法呢？

答案肯定是有的，es6中的Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。

  • 协程

传统的编程语言，早有异步编程的解决方案（其实是多任务的解决方案）。其中有一种叫做”协程”（coroutine），意思是多个线程互相协作，完成异步任务。

协程有点像函数，又有点像线程。它的运行流程大致如下。

  1. 第一步，协程A开始执行。
  2. 第二步，协程A执行到一半，进入暂停，执行权转移到协程B。
  3. 第三步，（一段时间后）协程B交还执行权。
  4. 第四步，协程A恢复执行。

上面流程的协程A，就是异步任务，因为它分成两段（或多段）执行。

1
2
3
4
5
6
// 读文件的列子
function* asyncJob() {
  // ...其他代码
  var f = yield readFile(fileA);
  // ...其他代码
}

上面代码的函数asyncJob是一个协程，它的奥妙就在其中的yield命令。它表示执行到此处，执行权将交给其他协程。也就是说，yield命令是异步两个阶段的分界线。

协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。

  • 协程的 Generator 函数实现与应用

Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。

整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。Generator 函数的执行方法如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let red = () => console.log('red');
let green = () => console.log('green');
let yellow = () => console.log('yellow');
// 使用promise封装灯亮的异步定时函数
let lightPro = (callback,time) => {
    // 实例化promise对象
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            callback();
            // 异步成功调用
            resolve();
        },time)
    })
}；
   
let light = function* () => {
    yield lightPro(red,3000);
    yield lightPro(green,2000);
    yield lightPro(yellow,1000);
}
// 走起
let lightheight = () => {
    let g = light();
    g.next();   // { value: undefined, done: false }
    g.next();   // { value: undefined, done: false }
    g.next();  // { value: undefined, done: true }
    lightheight();
}
lightheight();

上面代码中，调用 Generator 函数，会返回一个内部指针（即遍历器）g。这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针g的next方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的yield语句。

换言之，next方法的作用是分阶段执行Generator函数。每次调用next方法，会返回一个对象，表示当前阶段的信息（value属性和done属性）。value属性是yield语句后面表达式的值，表示当前阶段的值；done属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

  • 小结

上述方法对promise的操作进行了简化，但是其异步操作完全是基于promise实现的异步操作。但是还是感觉有点复杂，不要怕，下面来还有更骚的操作。

4、ES2017 中的async骚操作

  • async 函数是什么？

它其实就是 Generator 函数的语法糖。目前promise的最优秀的解决方案。koa2已经全面使用该语法。

用async改写红黄绿灯的案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let red = () => console.log('red');
let green = () => console.log('green');
let yellow = () => console.log('yellow');
// 使用promise封装灯亮的异步定时函数
let lightPro = (callback,time) => {
    // 实例化promise对象
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            callback();
            // 异步成功调用
            resolve();
        },time)
    })
}；
// 走你
let light = async function() => {
    await lightPro(red,3000);
    await lightPro(green,2000);
    await lightPro(yellow,1000);
    light();
}
light();

一比较就会发现，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

发现没有Generator中异步操作执行的时机需要调用g.next(),需要自主控制时机执行，
但是async就不一样了，在调用async函数时，内部的异步操作会按照预先设计好的顺序执行，不用再麻烦的调用g.next()的方法了。

  • async函数对 Generator 函数的改进点

1.内置执行器，也就是上面提到的Generator 函数的执行必须靠执行器，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

1
2
3
4
5
6
7
8
9
10
11
12
// Generator
let lightheight = () => {
    let g = light();
    g.next();   // { value: undefined, done: false }
    g.next();   // { value: undefined, done: false }
    g.next();  // { value: undefined, done: true }
    lightheight();
}
lightheight();
// async只要一行搞定
light();
  1. 更好的语义，async（异步）和await（等待），比起星号和yield，语义更清楚了。
  2. 更广的适用性，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
  3. 返回值是 Promise，async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

  • 基本用法

底层使用到的异步封装也是基于promise实现的。具体的使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 函数声明
async function foo() {}
// 函数表达式
const foo = async function () {};
// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)
// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }
  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
// 箭头函数
const foo = async () => {};

  • 错误处理机制

async函数的语法规则总体上比较简单，难点是错误处理机制。

async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

1
2
3
4
5
6
7
async function f() {
  await Promise.reject('出错了');
}
f().then(v => console.log(v))
    .catch( e => console.log(e))
// Error: 出错了

只要一个await语句后面的 Promise 变为reject，那么整个async函数都会中断执行。

1
2
3
4
async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}

上面代码中，第二个await语句是不会执行的，因为第一个await语句状态变成了reject。
有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try…catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// hello world
// 也可以这样的promise后面跟catch捕获前一个promise的错误
async function f() {
  await Promise.reject('出错了')
    .catch(e => console.log(e));
  return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// 出错了
// hello world

所以防止出错的方法，也是将其放在try…catch代码块之中。如果有多个await命令，可以统一放在try…catch结构中。

1
2
3
4
5
6
7
8
9
10
11
12
async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);
    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}
  • 使用async的注意点
  1. 错误处理，用try…catch捕获

  2. 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。其实就是并发，减少等待时间。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 这样getBar的执行必须要等到getFoo执行完成后才去执行
    let foo = await getFoo();
    let bar = await getBar();
    // 其实这两函数并没有依赖关系，等着只能浪费时间，可以采用如下的写法
    // 写法一
    let [foo, bar] = await Promise.all([getFoo(), getBar()]);
    // 写法二
    let fooPromise = getFoo();
    let barPromise = getBar();
    let foo = await fooPromise;
    let bar = await barPromise;

    3.await和async必须成对出现，await不能用在forEach循环中，偶尔会出错，要使用最好使用for循环代替，forEach的坑我真的踩过

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // bad
    function dbFuc(db) { //这里不需要 async
      let docs = [{}, {}, {}];
      // 可能得到错误结果
      docs.forEach(async function (doc) {
        await db.post(doc);
      });
    }
    // best
    async function dbFuc(db) {
      let docs = [{}, {}, {}];
      for (let doc of docs) {
        await db.post(doc);
      }
    }

5、最后

通过以上几点，我们大概了解了关于promise的整个发展过程，语法再不断的升级，使我们写的代码越来越优雅，估计在不久的将来还会有更厉害更简洁的语法出现，但是这些语法的基础都是基于promise实现的异步处理实现的，所以建议大家可以多多熟悉promise的规范，接下来会尝试写一关于promise具体实现的文章，帮助自己及大家更深入的了解promise。文章中很多内容大多都是引用其他优秀的文章，其中也加了一些自己的理解，希望大家能多多提意见。

参考链接：
1.Promises/A+规范;
2.es6标准教程-promise-阮一峰;
3.es6标准教程-Generator 函数的异步应用-阮一峰;
4.es6标准教程-async 函数-阮一峰;

展开全文 >>

他们都叫我：彪哥<br> 我也很无助啊！<br> 我的团队叫：Microbot Team<br><br><br>谢谢大家