资讯频道 → Web前端
阅读更多

0顶
0踩

Web前端

原创新闻 【探秘ES6】系列专栏（十）：更深入了解生成器

2015-08-14 17:12 by 副主编 mengyidan1988 评论(5) 有5043人浏览
JavaScript 前端开发 ES6

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权，将持续对该系列进行翻译，组织成【探秘ES6】系列专栏，供大家学习借鉴。本文为该系列的第十篇。

本文接下来继续讲述有关生成器的更多特性。

回顾

在上一篇文章中，主要介绍了有关生成器（Generators）的基本用法。生成器函数与常规函数类似，其主要区别是生成器函数体不会一次全部运行。它会按部分来执行，当碰到yield表达式的时候会暂停执行。

例如： 
function* someWords() {
  yield "hello";
  yield "world";
}

for (var word of someWords()) {
  alert(word);
}

接入来就生成器用法作进一步介绍。

如何关闭生成器

生成器还有几个特性需要介绍下：
  • generator.return()
  • the optional argument to generator.next()
  • generator.throw(error)
  • yield*

先看一个常规的cleanup程序： 
function doThings() {
  setup();
  try {
    // ... do some things ...
  } finally {
    cleanup();
  }
}
doThings();

cleanup方法关闭的是连接或文件，释放系统资源，或仅是更新DOM来关闭一个运行中的spinner。该方法用于检视程序是否正常结束，所以在finally区块调用。

换用生成器来写会怎么样呢？ 
function* produceValues() {
  setup();
  try {
    // ... yield some values ...
  } finally {
    cleanup();
  }
}
for (var value of produceValues()) {
  work(value);
}

生成器写法有个细微区别：work(value)的调用在区块外进行。如果它抛出异常，对于cleanup会有影响吗？或者说对于含有break或return语句的for-of循环，cleanup又是怎样处理的？答案是ES6会继续执行。

在之前讨论迭代器（iterator）和for-of循环的时候，我们知道迭代器接口含有由程序自动执行的可选方法.return。生成器也支持该方法。调用myGenerator.return()方法会使生成器执行任何finally区块然后退出，其功能类似于yield转入return语句。

要注意的是.return()的自动执行并不是所有语言都支持的，只有符合迭代协议的语言才支持。所以生成器会在不执行finally区块前被进行垃圾回收。其具体工作过程是：生成器在任务执行过程中被冻结，然后进行一些设定操作。如果这时某点有异常抛出，for循环会捕获它但不马上处理，随后使生成器执行.return()。待生成器执行完毕后并关闭后，for会继续对之前的异常进行处理。

生成器管理

到目前为止，对生成器的讲述都是它本身，那么对于用户端而言，生成器还能做更多的事吗？先看一个对话：



这里用户是命令者，但这不是唯一与生成器打交道的方式。接下来会再详细讲述有关生成器的异步编程。

先思考下如果.next()调用者向生成器传回一个值会有什么结果？这样的变更会出现如下新的对话：



可见，yield与return的不同；yield表达式是有值的。 
var results = yield getDataAndLatte(request.areaCode);

该特性可以做很多事情：
  • 调用getDataAndLatte()。例如在上图中返回字符串“get me the database records for area code...”
  • 暂停生成器，输出字符串值；
  • 在这过程中，程序是一直运行的；
  • 直到调用.next({data: ..., coffee: ...})。我们把对象存入本地变量results然后继续执行下一行代码。

其完整代码是： 
function* handle(request) {
  var results = yield getDataAndLatte(request.areaCode);
  results.coffee.drink();
  var target = mostUrgentRecord(results.data);
  yield updateStatus(target.id, "ready");
}

先重温yield的功能：暂停生成器，向调用者回传一个值。但是情况出现了变化！这里的生成器需要调用者承担管理者的角色，这是对原函数的功能拓展。

那么管理者角色究竟是什么呢？例如以下代码： 
function runGeneratorOnce(g, result) {
  var status = g.next(result);
  if (status.done) {
    return;  // phew!
  }

  // The generator has asked us to fetch something and
  // call it back when we're done.
  doAsynchronousWorkIncludingEspressoMachineOperations(
    status.value,
    (error, nextResult) => runGeneratorOnce(g, nextResult));
}

要使它正常运作，需要创建一个生成器并运行： 
runGeneratorOnce(handle(request), undefined);

在之前的文章中，我们说过Q.async()是一个示例库可使生成器执行异步操作并自动运行，.runGeneratorOnce与它类似。

事实上，生成器yield的对象是Promise对象，这需要学习并掌握，掌握好之后，异步算法的编写将会变得容易。

异常处理

知道runGeneratorOnce会如何处理异常吗？它会忽略它！

这不是最好的做法，生成器需要知道发生了什么状况。具体做法是调用generator.throw(error)而不是generator.next(result)。这会使yield表达式进行异常抛出。类似于.return()，生成器会被销毁，但如果当前的yield点处于try区块，catch和finally区块可帮助生成器进行异常恢复。

修改runGeneratorOnce来实现.throw()是另一种不错的策略。请记住由生成器抛出的异常都会被传回调用者。所以generator.throw(error)会把异常抛回除非生成器主动捕获了异常。

所以当生成器遇到yield表达式并暂停时，会出现如下的几种情况：
  • 若调用了generator.next(value)，在这种情况下，生成器会恢复到前次退出的位置；
  • 若调用了generator.next(value)，选择性地返回一个值。在这种情况下，生成器不会进行恢复，而仅是执行finally区块；
  • 若调用了generator.throw(error)，生成器就会把yield表达式作为函数回调看待并抛出异常；
  • 如果没有进行任何调用，生成器便如同被永久冻结了。


让生成器一起工作

再举多一个生成器函数例子，功能是连接两个遍历对象： 
function* concat(iter1, iter2) {
  for (var value of iter1) {
    yield value;
  }
  for (var value of iter2) {
    yield value;
  }
}

在ES6可简写为： 
function* concat(iter1, iter2) {
  yield* iter1;
  yield* iter2;
}

普通yield表达式的输出是单个值，一个yield*表达式会遍历全部迭代器并输出所有值。

相同的语法能帮助解决一个有趣的问题：如何在生成器内调用另外的生成器： 
function* factoredOutChunkOfCode() { ... }

function* refactoredFunction() {
  ...
  yield* factoredOutChunkOfCode();
  ...
}

写在最后

关于生成器的讲述到此结束，希望对读者有所帮助。（译者：伍昆，责编：陈秋歌）

原文链接：ES6 In Depth: Generators, continued

本译文遵循Creative Commons Attribution Share-Alike License v3.0

欢迎加入CSDN前端交流群2：465281214，进行前端技术交流。
  • 大小: 39.9 KB
  • 大小: 57.1 KB
0
顶
0
踩
评论 共 5 条 请登录后发表评论
3 楼 rather_lonely 2015-08-14 19:27
dfsadssadfsdf
2 楼 rather_lonely 2015-08-14 19:26
fdsafdsafsdaf
1 楼 rather_lonely 2015-08-14 18:13
     

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • j2ee+flex4

    此小项目是机缘巧合从一个网上的朋友那里拿来的...原本只是为了帮他找个错误 ...2.修改数据库配置文件 conf/ds.config.xml 然后就跑起来吧~ 有问题的话也可以联系小弟~~~ 希望大家共同学习~~

  • java 调用flex_flex调用java

    class="flex.messaging.services...cn.ImageProcess第二个remoting-config-2.xml文件：class="flex.messaging.services.RemotingService">cn.com.testservices-config.xml文件中的server部分：felx调用代码：impo...

  • flex java session_Flex+J2EE获取FlexSession的方法

    -------web.xml文件flex.messaging.HttpFlexSession------Java代码public class GetSeesion {/*** 设置session* */public void setSession(String name,String value){FlexContext.getFlexSession().setAttribute...

  • java调用flex_flex---->flex访问java远程对象

    4+lcds(或者blazeds)flex访问java的一个远程对象方法需要软件：apachetomcat.exe、myeclipse-8.0.0-win32.exe、jdk-6u12-windows-i586-p.exe、FlashBuilder_4_Plugin_LS10.exelcds.war包 或者(blazeds.war)一、环境...

  • <一>Flex(Flex+j2EE)

    步骤：1、新建一个Web Project工程，工程名为：flexDemo2、解压blazeds.war的文件，此时就有两个文件夹 META-INF和WEB-INF, 用解压后的WEB-INF直接覆盖项目中的WEB-INF3、为项目增加Flex支持，右键项目名称，点击...

  • 整合Flex+Java配置篇

    整合Flex+Java配置篇废话就不说了，要想了解Flex的相关内容就请问一下Google，百度吧。切入正题，作为一个Java程序员学习Flex，关心的就是怎样将Flex和Java进行结合交互。带着Java程序员的思维，一开始学习Flex并...

  • flex与J2EE交互

    由于 BlazeDS 需要将 Java 接口 FlexService 暴露给 Flex 前端，因此，我们在配置文件 remoting-config.xml 中将 FlexService 接口声明为一个服务： 清单 6. 定义 flexService 服务 ...

  • myeclipse6.5+flex 3 + tomcat6.0 + ds-console.war环境搭建

    　[b]安装环境：[/b][b]myeclipse6.5([/b][b]里面已经配置好[/b][b]flex3[/b][b]插件[/b][b]) + tomcat6.0 + ds-console.war(lcds)[/b][b]。 　[/b][b]一、首先在[/b][b]myeclipse[/b][b]中设置引入好[/b][b]felx3...

  • Flex入门(二)——Flex+BlazeDs+J2ee小实例

    BlazeDS是一个基于服务器的Java远程调用（remoting）和web消息传递（messaging）技术，使得后台的Java应用程序可以和运行在浏览器上的Flex应用程序能够互相通信。简单来说一个BlazeDS应用包括客户端（Flex

  • Flex + blazeds + J2EE 数据交互入门实例教程(图)

    这是一个FLEX 与JAVA服务端交互的例子, 网上的例子很多, 但很杂乱, 并且会遇到各种问题, 这是我测试编写的实例, 如果您仔细阅读, 并且按步执行, 那么出错的概率就小. 首先需安装配置好FLEX环境, 下载blazeds并得到...

  • java flex web_Flex与Web应用程序整合技术分享

    1.采用BlazeDS进行java应用程序与flex应用程序间的通信。(1)在官网上下载blazeds的开发包，最好下载完整版，里面有一个例子和所有我们所需的所有文件(我下载的是blazeds-turnkey-4.0.0.14931版)。将blazeds.war、ds-...

  • flex与j2ee的结合(flex+Spring)

    本文的开发环境为 Windows 7 Ultimate，Eclipse 3.4，Flex Builder 3（从参考资源获得下载链接）。Java EE 服务器使用 Resin 3.2，当然，您也可以使用 Tomcat 等其他 Java EE 服务器。 现有的 Java EE 应用 假定...

  • Flex+J2EE实例（cairngorm+blazeDS+hibernate+spring） part4 （完）

    Flex+J2EE实例（cairngorm+blazeDS+hibernate+spring） part4 ----add cairngorm 1.添加在libs 下 添加Cairngorm.swc ，此时，具备了cairngorm框架能力 2.运用cairngorm框架 2.1 在flex_src 下创建如下文件夹 ...

  • spring-flex 1.5.2release pom.xml

    &lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.

  • 智慧园区3D可视化解决方案PPT(24页).pptx

    在智慧园区建设的浪潮中，一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点，通过信息化平台与智能硬件的深度融合，为园区带来前所未有的变革。 首先，智慧园区综合解决方案以提升园区整体智能化水平为核心，打破了信息孤岛现象。通过构建统一的智能运营中心（IOC），采用1+N模式，即一个智能运营中心集成多个应用系统，实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”，利用大数据可视化技术，将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上，管理者可直观掌握园区运行状态，实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒，还大幅提升了管理效率，让园区管理更加精细化、智能化。 更令人兴奋的是，该方案融入了诸多前沿科技，让智慧园区充满了未来感。例如，利用AI视频分析技术，智慧园区实现了对人脸、车辆、行为的智能识别与追踪，不仅极大提升了安防水平，还能为园区提供精准的人流分析、车辆管理等增值服务。同时，无人机巡查、巡逻机器人等智能设备的加入，让园区安全无死角，管理更轻松。特别是巡逻机器人，不仅能进行360度地面全天候巡检，还能自主绕障、充电，甚至具备火灾预警、空气质量检测等环境感知能力，成为了园区管理的得力助手。此外，通过构建高精度数字孪生系统，将园区现实场景与数字世界完美融合，管理者可借助VR/AR技术进行远程巡检、设备维护等操作，仿佛置身于一个虚拟与现实交织的智慧世界。 最值得关注的是，智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程，实现降本增效。例如，智能库存管理、及时响应采购需求等举措，大幅减少了库存积压与浪费；而设备自动化与远程监控则降低了维修与人力成本。同时，借助大数据分析技术，园区可精准把握产业趋势，优化招商策略，提高入驻企业满意度与营收水平。此外，智慧园区的低碳节能设计，通过能源分析与精细化管理，实现了能耗的显著降低，为园区可持续发展奠定了坚实基础。总之，这一综合解决方案不仅让园区管理变得更加智慧、高效，更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境，是未来园区建设的必然趋势。

  • labelme标注的json转mask掩码图，用于分割数据集 批量转化，生成cityscapes格式的数据集

    labelme标注的json转mask掩码图，用于分割数据集 批量转化，生成cityscapes格式的数据集

  • （参考GUI）MATLAB GUI漂浮物垃圾分类检测.zip

    （参考GUI）MATLAB GUI漂浮物垃圾分类检测.zip

  • 人脸识别_OpenCV_活体检测_证件照拍照_Demo_1741778955.zip

    人脸识别项目源码实战

  • 人脸识别_科大讯飞_Face_签到系统_Swface_1741770704.zip

    人脸识别项目实战

  • 跟网型逆变器小干扰稳定性分析与控制策略优化simulink仿真模型和代码.zip

    本仿真模型基于MATLAB/Simulink（版本MATLAB 2016Rb）软件。建议采用matlab2016 Rb及以上版本打开。（若需要其他版本可联系代为转换） CSDN详情地址：https://blog.csdn.net/qq_50594161/article/details/146242453sharetype=blogdetail&sharerId=146242453&sharerefer=PC&sharesource=qq_50594161&spm=1011.2480.3001.8118

Global site tag (gtag.js) - Google Analytics