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 相关文章推荐
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
json 实例详细说明教程
Oct 31 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
Wordpress php 分页代码
2009/10/21 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
基于php split()函数的用法详解
2013/06/05 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python3中eval函数用法使用简介
2019/08/02 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python字典实现伪切片功能
2020/10/28 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
标准版离职证明书
2014/09/12 职场文书
产品委托授权书范本
2014/09/16 职场文书
银行资信证明
2015/06/17 职场文书
趣味运动会赞词
2015/07/22 职场文书
离婚财产分割协议书
2015/08/11 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python