ES6（ECMAScript 6），也称 ES2015，是 JavaScript 的新语法标准。它带来了许多新特性，如箭头函数、模板字符串、解构赋值、Promise、类等等。在前端开发领域，掌握 ES6 几乎成为了必备技能。今天，我们将通过一个 Serverless 实战项目，快速入门 ES6。
背景
本文的例子是一个基于腾讯云 Serverless 的应用，核心功能是将用户上传的图片压缩后存储。在实现过程中，我们将使用到 ES6 中的模板字符串、Promise、解构赋值等功能。
准备工作
我们需要准备好腾讯云账号，并在控制台创建一个 COS 对象存储和一个 SCF 函数，这里不再赘述。接下来，我们需要安装一些必要的工具，包括：
- Node.js 和 NPM：这是我们后续使用的主要工具，可以在官网下载安装。
cos-nodejs-sdk-v5：腾讯云 COS SDK for Node.js，可以使用 NPM 安装：npm install --save cos-nodejs-sdk-v5。serverless-js-runtime：用于在腾讯云 Serverless 中支持 Node.js 运行时的插件，可以使用 NPM 安装：npm install --save serverless-js-runtime。uglify-es：用于压缩图片的工具，可以使用 NPM 安装：npm install --save uglify-es。
步骤
1. 配置 Serverless 函数
在控制台中，在您的 Serverless 服务中进入 Function 页面，在左侧导航中的触发器管理中为函数添加触发器。我们会选择对象存储 COS类型，并设置如下参数：
- 事件类型：选择
cos:ObjectCreated:*，表示当 COS 中上传文件后触发函数。 - Bucket 名称：选择您创建的 COS Bucket。
- 前缀匹配：可以填写空格，表示监听 Bucket 中所有对象创建事件。
- 后缀匹配：选择 JPG 和 PNG 文件，即
.jpg和.png。
2. 编写 Serverless 函数
打开您的编辑器，创建 index.js 文件。这个文件会是我们的 Serverless 函数的主体代码，用于压缩图片并将其存储到 COS 中。在顶部，我们将使用 require 函数导入 SDK 和第三方工具：
const COS = require('cos-nodejs-sdk-v5'); const UglifyJS = require("uglify-es"); const JsRuntime = require("serverless-js-runtime"); const runtime = new JsRuntime();
接下来，我们编写主体代码。我们将遍历图片文件列表，使用UglifyJS.minify函数压缩图片并上传到 COS 中。代码如下：
-- -------------------- ---- ------- ------------ - ----- ------- -------- -- - ----- --- - --- ----- --------- ----------------------------- ---------- ------------------------------ -------------- -------------------------- ------- --------------- --- ----- ------ - - -------------- -- ------------- -- ------- -- -- --- ------ ------ -- -------------- - ----- ------ - ----------------------- ----- --- - ---------------------- ----- ------ - ----- ---------------------- ------- ---- ------ ----- ------------ - ----- ----------------------------------- --- - ----- ------------ - ------------------------------ ----- --------------- ------- ------- ---- -------------------- ----- ------------------ --- ----------------------- - ----- ------- - ---------------------- -------------------------- - - ------ ------- --展开代码
在这段代码中，我们首先将 COS 客户端初始化，并定义了一个 result 变量用于存储执行结果。接着，我们遍历 COS 触发器传入的图片列表，使用cos.getObject方法获取图片数据，并使用serverless-js-runtime提供的stream2Buffer方法将图片数据转换为 Buffer。然后，我们使用UglifyJS.minify方法压缩图片，并将结果使用cos.putObject方法存储到 COS 中。最后，我们返回执行结果。
3. 完善 Serverless 函数
在代码中，我们可以使用 ES6 的许多特性来简化代码。比如，我们可以使用解构赋值获取传入的事件数据：
exports.main = async ({ Records: records }, context) => { // ... for (const { cos: { bucket: { name: bucket }, object: { key } } } of records) { // ... } // ... };
我们还可以使用字符串模板化简化代码，将图片存储路径设置为一个子目录：
await cos.putObject({ Bucket: bucket, Key: `compressed/${key}`, Body: resultBuffer.code, });
最后，我们可以使用 Promise 来优化代码。比如，我们可以使用 Promise.all 让压缩和上传并行执行：
-- -------------------- ---- ------- ----- ----------------------------- -- ---- - ------- - ----- ------ -- ------- - --- - - -- -- - ----- ------ - ----- --------------- ------- ------- ---- --- --- ----- ------------ - ----- ----------------------------------- --- - ----- ------------ - ------------------------------ ----- --------------- ------- ------- ---- -------------------- ----- ------------------ --- ----------------------- - ----- ------- - ---------------------- -------------------------- - ----展开代码
结语
在这篇文章中，我们通过一个 Serverless 实战项目，快速入门了 ES6。当然，本文只是 ES6 的冰山一角，还有许多其他特性和用法需要深入学习和掌握。但相信通过这篇文章，您已经能够感受到 ES6 带来的便利和简洁，为您的开发工作带来了更多的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6d4f6a941bf7134cb43b3
