JS Generator 函数的含义与用法实例总结


Posted in Javascript onApril 08, 2020

本文实例讲述了JS Generator 函数的含义与用法。分享给大家供大家参考,具体如下:

读阮一峰老师《Generator 函数的含义与用法》总结

老师的文章通俗易懂,但是我个人理解上面有一些差,所以看了几遍之后才有呢么一点点体会

把它记录下来。

还是那句话,所有事物的出现都是为了解决对应的问题。

那么Generator出现是为了解决什么问题的呢?

在异步编程的场景下,如果有多个异步任务,如何处理他们的先后执行顺序?

举一个常见的例子,jquery的ajax请求,每一个success都是一个异步任务。

那么问题来了,如果我要保证页面渲染要在5个网络请求都回来之后再去渲染页面。

我们的代码就会变成:

$.ajax({...success:function(data){
  $.ajax({...success:function(data){
    $.ajax({...success:function(data){
      $.ajax({...success:function(data){
        $.ajax({...success:function(data){
          //do something
        }})
      }})
    }})
  }})
}})

这就是”回调函数噩梦”(callback hell)

为了解决这个问题,后来出现了Deferred和promise

两者区别不大,通过一种包装写法来减少回调函数

上面的ajax就可以写成:

ajax1 = $.ajax({...success:function(data){});
ajax2 = $.ajax({...success:function(data){});
ajax3 = $.ajax({...success:function(data){});
ajax4 = $.ajax({...success:function(data){});
ajax5 = $.ajax({...success:function(data){});
$.when(ajax1,ajax2,ajax3,ajax4,ajax5).done(function(
  //do something
)).then(function(){
  //do something2
})

1.8版本以上的jquery ajax模块默认返回Deferred对象

Deferred和promise将回调函数做拆分,将异步任务的处理和执行分成两部分完成

他们最大的问题就是代码冗余,包装之后的代码都需要通过then,done来执行后面的内容,也导致层次感不清晰

那有没有一种比较无感,简单的写法呢?

那就是协程,
我之前也是在这个地方困惑了很久,
前面说的大多日常用到过,也清楚一些原理,
关于协程用到的就少了,我们来分析下吧。

直接看一下协程的例子:

function asnycJob() {
 // ...其他代码
 var f = yield readFile(fileA);
 // ...其他代码
}

阮一峰老师的原话:

上面代码的函数 asyncJob 是一个协程,它的奥妙就在其中的 yield 命令。它表示执行到此处,执行权将交给其他协程。也就是说,yield命令是异步两个阶段的分界线。 协程遇到 yield 命令就暂停,等到执行权返回,再从暂停的地方继续往后执行。它的最大优点,就是代码的写法非常像同步操作,如果去除yield命令,简直一模一样。

之前没理解的原因就是没好好读这两句话,今认真看了一下,茅塞顿开。重要的有这么几点

首先asnycJob这个方法就是一个协程

yield相当于return,会返回当前程序的执行状态

当执行到yield,程序挂起等待返回后继续执行。

挂起这段时间去执行其他协程函数

Generator函数是ES6对协程函数的实现,

Generator函数的特点就是可以暂停代码执行。

跟协程函数一样,遇到yield关键字就暂停代码执行,

跟普通函数的区别在于Generator函数不会反悔结果,而是返回指针对象,

通过指针的next方法移动指针指向下一个yield关键字位置。

也就是说Generator函数的分阶段执行是由next方法控制的。

使用了Generator函数之后会对我们的代码有多大的改变呢?

fangction* gen(){
  var url = 'user/get/info';
  var data = yield $.get({url:url});
  console.log(data.userName);
}

你不需要担心远程接口的返回时机,完全按照同步的方式写代码就行。

但是也有缺点,Generator函数把一步操作做的很简洁,但对流程的管理却不方便,

上面的例子如何执行?

var g = gen();
g.next();
g.next();

next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,

表示当前阶段的信息( value 属性和 done 属性)。value 属性是 yield 语句后面表达式的值,表示当前阶段的值;

done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。

你需要执行两次.next方法,来将你的Generator函数执行完毕。

关于如何自动化异步任务的流程管理,就需要co,thunk,async的帮助了

原文:Generator 函数的含义与用法

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
Html5生成验证码的示例代码
May 10 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
vue开发移动端底部导航条功能
Apr 08 #Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 #Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 #Javascript
JS快速实现简单计算器
Apr 08 #Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 #Javascript
You might like
php5 图片验证码实现代码
2009/12/11 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jcrop基本参数一览
2013/07/16 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
住房公积金接收函
2014/01/09 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
2016年元旦主持词
2015/07/06 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL