吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 934|回复: 10
收起左侧

[讨论] 论ES6中Generator函数在实际开发中的应用

[复制链接]
pilot34 发表于 2022-7-27 15:48
本帖最后由 pilot34 于 2022-8-2 13:14 编辑

Generator函数是ES6提供的一种异步编程解决方案,其形式上也是一个普通函数,但与普通函数有着很多不同,其有几个显著的特征,如下:
  • function关键字与函数名之间加星号 "*"
  • 函数体内使用 yield 表达式来定义不同的内部状态
  • 调用 Generator函数,返回一个遍历器对象(Iterator Object)
  • 依次调用遍历器对象的next方法,可以遍历 Generator函数内部的每一个状态
那么,基于Generator函数自身的特点,它都在实际开发中都有哪些应用呢?
比如:前端做抽奖,可以使用它来做:抽奖次数有限,不同的人来抽奖,抽奖一次,抽奖次数变少一次,直至没有抽奖次数为止。
实现伪代码如下:
[JavaScript] 纯文本查看 复制代码
{
  // 抽奖逻辑的伪代码
  function print(count) {
    // 执行一段抽奖逻辑
    // ...
    console.log(`剩余${count}次`);
  }

  // 执行抽奖的方法
  function* draw(count) {
    while(count > 0) {
      count--;
      yield print(count);
    }
  }

  let startDrawing = draw(6);//例如初始时抽奖次数为6次

//添加抽奖点击按钮
  let btn = document.createElement('button');
  btn.id = 'action';
  btn.textContent = '开始抽奖';
  document.body.appendChild(btn);

//添加按钮点击监听事件
  document.getElementById('action').addEventListener('click', function(){
    startDrawing.next();
  }, false);
}

大家如有兴趣或对这方面有研究有想法,不妨畅所欲言,讨论讨论,共同进步~。

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

wuaidacongming 发表于 2022-7-27 16:11
感谢楼主分享
boxer 发表于 2022-7-27 16:18
js给人的感觉就像是小学生设计的, 后面各种缝缝补补
nanqian 发表于 2022-7-27 16:36
云烟成雨 发表于 2022-7-27 16:40
这也没讲清楚到底怎么用的,我还是去百度一下吧
 楼主| pilot34 发表于 2022-7-27 17:40
nanqian 发表于 2022-7-27 16:36
最后那个false的作用是啥呀

添加事件监听的第三个参数。默认是false为冒泡,这里也可以不加;true为捕获。更详细的,自己求助度娘吧。
sgvvvv 发表于 2022-7-27 21:02
一般就是异步函数用吧 不过这个还要手动next
日常的话感觉还是async await用的比较多
nanqian 发表于 2022-7-28 00:47
pilot34 发表于 2022-7-27 17:40
添加事件监听的第三个参数。默认是false为冒泡,这里也可以不加;true为捕获。更详细的,自己求助度娘吧 ...

想起来了
 楼主| pilot34 发表于 2022-7-28 13:58
sgvvvv 发表于 2022-7-27 21:02
一般就是异步函数用吧 不过这个还要手动next
日常的话感觉还是async await用的比较多

是的,在处理多个有关联的异步请求时,同步的方式处理异步,它比Promise的链式then更方便,更整洁。它与Generator的使用场景不同吧。
steven026 发表于 2022-8-1 21:06
还是没明白这个function*有什么特别的意义,LZ发的抽奖应用,完全可以用普通的function实现

[JavaScript] 纯文本查看 复制代码
  // 具体抽奖逻辑的方法
  function print(count) {
    // 执行一段抽奖逻辑
    // ...
    console.log(`剩余${count}次`);
  }
 
  // 执行抽奖的方法
  function draw(count) {
    if(count > 0) {
      print(count);
    }
  }
 
  let startDrawing = 6;//例如初始时抽奖次数为6次
 
//添加抽奖点击按钮
  let btn = document.createElement('button');
  btn.id = 'action';
  btn.textContent = '开始抽奖';
  document.body.appendChild(btn);
 
//添加按钮点击监听事件
  document.getElementById('action').addEventListener('click', function(){
    draw(startDrawing--);
  }, false);
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 11:07

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表