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 相关文章推荐
iframe子父页面调用js函数示例
Nov 07 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
js实现验证码干扰(静态)
Feb 22 Javascript
JavaScript实现音乐播放器
Aug 14 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
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
构建高效的python requests长连接池详解
2020/05/02 Python
家长评语大全
2014/01/22 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
如何用PHP实现多线程编程
2021/05/26 PHP
Python 正则模块详情
2021/11/02 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS