拥抱ES6——OSS JavaScript SDK开发手记

JavaScript作为当下最火的语言（之一），结合OSS能够创建出非常丰富的跨前后端的应用。现在，OSS正式推出JavaScript SDK，使用OSS的 前后端 同学 都 可以方便地使用。

ES6

首先，什么是ES6？

其实ES6是最新版本的ECMAScript，也就是JavaScript标准。

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. > ES6 is a significant update to the language...

ES6包含了众多重要的更新，但是今天对我们最重要的就是Generator Function，因为它可以让我们用同步的方式写异步代码：

var creds = yield  applySTSToken();
var client = new OSS(creds);
var result = yield client.list();
console.log(result);

上面的代码包含了两个异步的操作，applySTSToken和list，如果没有generator，我们就需要在applySTSToken的callback中做list，然后在list的callback中做log，比如这样：

applySTSToken(function (creds) {
  var client = new OSS(creds);
  client.list(function (result) {
    console.log(result);
  });
});

如果上面的代码看起来也“还可以”的话，那么当异步操作多起来之后，再考虑错误处理的场景，代码将会变得非常复杂。不得不说callback很锻炼大脑，但是有高科技为什么不利用呢？

这看起来不错，但是如何实现的呢？这篇文章介绍了如何实现Promise（这真是个好名字）。最关键的地方就是yield让控制流跳转到其他代码执行，相应的事件(callback)发生时，通过next让控制流回到上次yield的地方继续执行，这样就达到了“异步非阻塞”的效果。

目前主流的Chrome/Firefox版本都已经支持ES6的大部分功能了。主流的Safari版本和移动端浏览器目前还不支持ES6，但是我们后面会讲到如何做兼容性转换。

功能

SDK目前支持OSS的绝大部分功能，包括上传/下载文件、分片上传、Bucket管理、文件管理等，常用的上传/下载也有多样的玩法：

  • 上传本地文件
  • 上传Buffer内容
  • 流式上传
  • 分片上传
  • 下载到本地文件
  • 流式下载

安装

npm install ali-oss co

上传文件

使用put接口上传一个Object：

var OSS = require('ali-oss');
var co = require('co');
var fs = require('fs');

var client = new OSS({
  accessKeyId: 'access key id',
  accessKeySecret: 'access key secret',
  region: 'oss-cn-hangzhou',
  bucket: 'my-bucket',
});

co(function* () {
  // put from local file
  yield client.put('file', '/tmp/x');

  // put from Buffer
  yield client.put('buffer', new Buffer('hello world'));

  // put from Stream
  yield client.put('stream', fs.createReadStream('/tmp/x'));
}).catch(function (err) {
  console.log(err);
});

下载文件

使用get和getStream方法下载文件：

co(function* () {
  // get as content
  var result = yield client.get('object');
  console.log(result.content);

  // download as file
  yield client.get('object', '/tmp/x');

  // pipe to stream
  yield client.get('object', fs.createWriteStream('/tmp/x'));

  // get as stream
  var result = yield client.getStream('object');
  result.stream.pipe(fs.createWriteStream('/tmp/y'));
}).catch(function (err) {
  console.log(err);
});

管理Bucket

使用putBucketLifecycle等接口来设置Bucket的属性。注意，目前OSS不支持Bucket相关的跨域请求，所以在浏览器中不能使用Bucket的管理接口。

co(function* () {
  var result = yield client.putBucketLifecycle('bucket', 'region', [
    {
      id: 'delete after one day',
      prefix: 'logs/',
      status: 'Enabled',
      days: 1
    },
    {
      prefix: 'logs2/',
      status: 'Disabled',
      date: '2022-10-11T00:00:00.000Z'
    }
  ]);
}).catch(function (err) {
  console.log(err);
});

HTTP Headers

SDK的每个方法都可以设置和获取HTTP Headers：

co(function* () {
  // set headers
  var result = yield client.put('object', '/tmp/x', {
    headers: {
      'content-type': 'application/javascript; charset=utf8'
    }
  });

  // get headers
  console.log(result.res.headers);
}).catch(function (err) {
  console.log(err);
});

前端后端

Browserify, Babel等优秀工具的出现，使得我们能够在前后端共用一套代码。OSS JavaScript SDK基于Node.js开发，通过Browserify和Babel产生适用于浏览器的代码，使得OSS JavaScript SDK同时支持在浏览器中和Node.js环境中使用。

在浏览器中使用

用户在浏览器中使用SDK时，首先在<head>标签中包含如下<script>标签：

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.1.4.min.js"></script>

就可以在代码中使用OSS对象：

<script type="text/javascript">
  var client = new OSS({
    region: '<oss region>',
    accessKeyId: '<Your accessKeyId(STS)>',
    accessKeySecret: '<Your accessKeySecret(STS)>',
    stsToken: '<Your securityToken(STS)>',
    bucket: '<Your bucket name>'
  });

  OSS.co(function* () {
    var result = yield client.list({
      'max-keys': 10
    });
    console.log(result);
  }).catch(function (err) {
    console.log(err);
  });
</script>

注意：上面的代码中用OSS.co代替co，同样的，如果用到了Buffer，也要使用OSS.Buffer代替。browser.js中显示了SDK暴露给浏览器的全部对象。

我们提供一个demo，使用OSS JavaScript SDK开发了一个浏览器应用，提供上传文件/上传文本/列出文件/下载文件 四个功能，效果如下：

Build SDK

只需要在SDK的代码目录执行npm run build-dist命令，就可以生成用于浏览器的SDK lib：

git clone https://github.com/ali-sdk/ali-oss.git
cd ali-oss
npm install
npm run build-dist
# output
# dist/aliyun-oss-sdk.js
# dist/aliyun-oss-sdk.min.js

Build用户代码

上述的例子中使用SDK的代码使用了function*和yield等ES6的特性，这在支持ES6的浏览器（主流版本的Chrome/Firefox）中可以直接运行，若要用于更多的浏览器，则需要使用Browserify和Babel进行兼容性转换：

npm install -g browserify
npm install babelify babel-preset-es2015
echo '{ "presets": ["es2015"] }' > .babelrc
browserify app.js -t babelify > app-babel.js

转换后只需要在<script>标签中包含转换后的代码文件即可：

<script src="app-babel.js"></script>

发布

在SDK的开发过程中，每发布一个版本，我需要手动做以下几件事情：

  • 修改ChangeLog
  • 修改package.json中的版本
  • 生成版本的tag
  • 生成dist/aliyun-oss-sdk.min.js
  • 发布到npm
  • aliyun-oss-sdk.min.js发布到cdn

这么多步骤，不出错是几乎不可能的。所以我们使用git-extras和git-pre-hooks，让发布过程变成"All-in-One"，具体参考package.json。

首先确保在master分支，然后npm依赖都安装好了：

git checkout master
npm install

发布过程：

vi package.json and change "version" to 4.2.0
git changelog -n -t 4.2.0
git release 4.2.0

是不是如丝般顺滑？

致谢 @苏千 大大，@不四 大大

时间： 2024-09-15 08:45:42

拥抱ES6——OSS JavaScript SDK开发手记的相关文章

开心网辅助程序开发手记（三）：实现停车功能

在前面的两篇手记中,较为详细的介绍了如何借助工具对网页进行分析及如何编写代码实现一些简单的功能.如果还有后续手记,笔者将只简单记录<开心网辅助程序>开发过程中碰都的主要问题及解决方法. 在这篇手记中,笔者将简单描述如何实现简单的停车功能,并且制作一个简单的界面用于呈现系列手记的开发成果. 一.识别好友私家车位中的免费车位:把车停到免费车位中可是会分文无收到,所以千万不能把车停到免费车位上了. 通过Firebug调试发现,当玩家点击"争车位"中部Flash中的停车按钮时,pa

在JavaScript SDK里使用SoundCloud API

SoundCloud开发出了一款可被开发者使用的API,这款API能使开发者获得他们想要的几乎任何数据.但是该API的用法有些混乱,特别是对初学者来说,因为此时的SoundCloud API开发文档和文档示例使用的都是SDK(软件开发工具箱)的不同版本. SoundCloud介绍链接地址: http://baike.sogou.com/v128528573.htm SoundCloud API和SoundCloud SDK之间有什么区别呢?从根本上说,SoundCloud API是一个URL的集

[译] 新一代 JavaScript 的开发图谱（2017）

本文讲的是[译] 新一代 JavaScript 的开发图谱(2017), 原文地址:A Map To Modern JavaScript Development 原文作者:Santiago de León 译文出自:掘金翻译计划 译者:gy134340 校对者:IridescentMia,Tina92 过去 5 年里你一直使用 REST 接口.或者你一直在优化搜索公司里庞大的数据库.又或者你一直在给微波炉写嵌入式软件.自从你用 Prototype.js 来对浏览器进行面向对象编程已经过去很久了,

在 oss php sdk进行crc64校验

背景 使用oss php sdk上传下载文件时为了确保数据的一致性,可以使用crc64校验,与使用md5相比,crc64可以便上传/下载边校验.oss是同时支持这两种校验的 总所周知,php计算能力弱的特征,本文章还提供一种在php中嵌入c代码实现crc64校验算法,以大幅提升上传下载性能 使用php实现crc64检验算法 <?php /** * @return array */ function crc64Table() { $crc64tab = []; // ECMA polynomial

oss php sdk+laravel搭建图片处理静态网站

背景和目标 接着上两篇继续写oss php sdk+laravel搭建静态网站. 主要说下静态网站的重要部分图片服务,现在很多的网站上都会用到大量的图片, 图片在网页传输中占据很大的数据量, 图片处理也是影响网站性能的重要因素.这篇文章主要结合oss的图片处理功能介绍如何利用oss + laravel搭建一个低成本高性能的静态服务器. 静态网站图片服务架构简单回顾 静态网站图片服务器架构可能经历了如下几个阶段: 网站初期可能我们业务和图片服务都在一台服务器, 图片访问也不多, 要访问的图片个数也

使用oss c sdk自定义上传和下载callback

       前段时间使用阿里云官网提供的OSS C SDK上传和下载数据,想在上传和下载过程中对数据进行一些简单的自定义预处理,看了一下oss c sdk的具体实现,大致了解如何通过自定义上传和下载的callback达到上述目的,这里做一个简单的分享.        OSS C SDK在上传和下载数据时使用了CURL进行通信,之前简单学习过CURL的一些知识,知道CURL提供了一系列Callback,在上传下载时对数据进行一些处理,大家感兴趣的话可以参考: http://curl.haxx.s

Kinect for Windows SDK开发入门(十四)进阶指引 上

前面十三篇文章介绍了Kinect SDK开发中的各个方面的最基础的知识.正如本系列博闻标题那样,这些知识只是Kinect for windows SDK开发的入门知识.本文将会介绍Kinect进阶开发需要了解一些知识(beyond the basic). 读者可能会注意到,在学习了前面十三篇文章中关于Kinect开发的方方面面,如影像数据流.景深摄像机.骨骼追踪.麦克风阵列.语音识别等这些知识后,离开发出一些我们在网上看到的那些具有良好用户体验的Kinect应用程序还是显得捉襟见肘.Kinect

Kinect for Windows SDK开发入门(二)基础知识 上

上篇文章介绍了Kinect开发的环境配置,这篇文章和下一篇文章将介绍Kinect开发的基本知识,为深入研究Kinect for Windows SDK做好基础. 每一个Kinect应用都有一些基本元素.应用程序必须探测和发现链接到设备上的Kinect传感器.在使用这些传感器之前,必须进行初始化,一旦初始化成功后,就能产生数据,我们的程序就能处理这些数据.最后当应用程序关闭是,必须合理的释放这些传感器. 本文第一部分将会介绍如何探测初始化几释放传感器,这是非常基础的话题,但是对于基于Kinect开

利用数码相机SDK开发图像采集应用程序

数码相机作为一种目前常见的消费类商品,其基本工作原理是利用CCD光耦器件将光信号转变为电信号,经过A/D转换.数据压缩等处理后经串口或USB口在PC端应用程序控制下将图片(多为JPEG格式)传送到PC机的硬盘中. 目前PC端的应用程序都由相机制造商所提供.很少有人注意到一些数码相机制造商为开发人员提供了相对丰富的SDK(Software Development Kit)资源,便于有关人员利用数码相机进行图像采集和监测方面的开发工作.SDK开发套件一般由头文件(.H).库文件(.lib)和动态链接