随着移动互联网的发展，二维码已经成为了不可或缺的一部分。从购物、支付、扫码登录等功能中，我们可以看到二维码的应用越来越广泛。而在前端开发中，我们也经常需要生成二维码。本文将介绍如何使用 ES9 的 Generator 实现一款轻量级、零依赖的二维码生成工具。
了解 Generator
ES6 引入了 Generator，它是一种异步编程的解决方案。相比较传统的回调函数和 Promise，Generator 更好的解决了异步编程带来的一系列问题。例如 Generator 通过 yield 关键字来实现异步任务之间的暂停和恢复，使得代码的可读性和可维护性更强。
除此之外，Generator 还可以用于实现协程和状态机，因此在实际应用中，Generator 可以有更广泛的用途。
实现二维码生成
接下来，我们将通过 Generator 实现一款二维码生成工具。在此之前，我们需要了解几个概念：
- QR Code：QR Code（二维码）是由 QR Code 规格定义的，在二维平面上按照一定规律分布的黑白相间的正方形。通过扫描二维码包含的信息就可以获得相关的内容。
- JavaScript QR Code：JavaScript QR Code 是一款在浏览器环境下使用的二维码生成库，它能够快速生成各种样式的二维码，并支持调整二维码大小、前景色、背景色等多种自定义选项。
我们将 JavaScript QR Code 库作为二维码生成工具的基础，通过 Generator 实现二维码生成的过程。我们的二维码生成器需要完成以下几个任务：
- 检查依赖库是否加载成功。
- 渲染二维码画布。
- 将二维码渲染到画布中。
- 输出二维码图像。
-- -------------------- ---- -------
--------- ------------------- - --- ---- - ---- ----- - ------- ---------- - ------- -
-- -----------
-- ---------------- -
----- --- ------------- ------- --- ----------
-
----- -- - --- ---------- -----------------------
-----------------
----------
-- -------
----- ------ - ---------------------------------
------------ - -----
------------- - -----
----- --- - ------------------------
------------- - -----------
--------------- -- ----- ------
-- ----------
----- ----- - ---- - --------------------
----- ----- - ---- - --------------------
--- ---- --- - -- --- - -------------------- ------ -
--- ---- --- - -- --- - -------------------- ------ -
------------- - -------------- ---- - ----- - -----------
----- - - --------------- - -- - ------ - -------------- - --------
----- - - --------------- - -- - ------ - -------------- - --------
--------------------------- - ------- -------------- - ------- -- ---
-
-
-- -------
----- ------- - -------------------
------ --------
-我们实现的二维码生成器接收三个可选参数：text（需要编码的文本）、size（二维码大小，默认为 200px）、color（前景色，默认为黑色）、background（背景色，默认为白色）。生成二维码的过程通过一个 Generator 函数来实现。
运行上述代码，即可在浏览器中生成二维码。值得注意的是，我们使用了 ES6 的 yield 关键字来实现异步函数。我们可以在调用生成器时，通过 generator.next() 来控制异步任务的执行。
总结
本文介绍了如何使用 Generator 实现一款轻量级、零依赖的二维码生成工具。我们利用 JavaScript QR Code 库来生成二维码，并使用 Generator 函数来完成生成器的逻辑实现。通过本文的学习，我们可以更加深入地了解 Generator 的原理，并了解异步编程的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65016c4d95b1f8cacdf251f0