0x01 Day.js

功能介绍

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，它和 Moment.js 的 API 设计保持完全一样。如果你曾经使用过 Moment.js, 那么你就已经知道如何使用 Day.js 了 ，因为它们二者的 API 完全一致。目前，Day.js 在 github 上有接近 40000 个 star，其官网地址：https://day.js.org/。

显著特点

1. 体积小

Day.js 体积非常小，大小才 2KB。

2. 设计简单，逻辑清晰

Day.js 的所有 API 操作都会返回一个新的 Dayjs 对象。这样设计是为了避免 bug 的产生，节约调试的时间。

3. 兼容性好

Day.js 的源码文件可以直接保存到自己工程本地，全部源码截图如下：

入门介绍

1. 安装

执行如下命令进行本地工程安装：

npm install dayjs --save

2. API 演示

Day.js 有很多 API 来解析、处理、校验、增减、展示时间和日期，具体示例如下：

dayjs('2018-08-08') // 解析

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展示

dayjs()
  .set('month', 3)
  .month() // 获取

dayjs().add(1, 'year') // 处理

dayjs().isBefore(dayjs()) // 查询

3. 国际化

Day.js 支持国际化，但是除非手动加载，多国语言默认是不会被打包到工程里的。具体操作可以参考如下代码：

import 'dayjs/locale/es' // 按需加载

dayjs.locale('es') // 全局使用西班牙语

dayjs('2018-05-05')
  .locale('zh-cn')
  .format() // 在这个实例上使用简体中文

4. 插件

插件是一些独立的程序，可以给 Day.js 增加新功能和扩展已有功能，示例如下：

import advancedFormat from 'dayjs/plugin/advancedFormat' // 按需加载插件

dayjs.extend(advancedFormat) // 使用插件

dayjs().format('Q Do k kk X x') // 使用扩展后的API

0x02 qs

功能介绍

qs 是一个轻量的 URL 参数转换的 JavaScript 库。

显著特点

qs 功能非常强大且应用广泛，在 github 上有 7.2K 个 star，仓库地址：https://github.com/ljharb/qs。

入门介绍

1. 安装

执行如下命令进行本地工程安装：

npm i qs

2. API 演示

解析字符串和转换字符串示例：

var qs = require('qs');
var assert = require('assert');

var obj = qs.parse('a=c');
assert.deepEqual(obj, { a: 'c' });

var str = qs.stringify(obj);
assert.equal(str, 'a=c');

3. 解析对象

解析对象，示例代码如下：

assert.deepEqual(qs.parse('foo[bar]=baz'), {
    foo: {
        bar: 'baz'
    }
});

4. 解析数组

利用 qs 解析数组时，可以使用中括号‘[]’，示例代码如下：

var withArray = qs.parse('a[]=b&a[]=c');
assert.deepEqual(withArray, { a: ['b', 'c'] });

除此之外，还可以利用索引序号，示例代码如下：

var withIndexes = qs.parse('a[1]=c&a[0]=b');
assert.deepEqual(withIndexes, { a: ['b', 'c'] });

0x03 js-cookie

功能介绍

js-cookie 是一个简单的、轻量的处理 cookies 的 JavaScript 库。目前，js-cookie 在 github 上有 19.7K 个 star，仓库地址：https://github.com/js-cookie/js-cookie。

显著特点

1. 支持目前所有的主流浏览器。

2. 支持存储任意类型的字符。

3. 同时支持 ES 和 AMD。

4. 支持自定义编解码存储字段。

入门介绍

1. 安装

执行如下命令进行本地工程安装：

npm i js-cookie

2. 工程引入

js-cookie 针对不同的模式，需要使用不同的版本，mjs 后缀的版本适用于 ES 模块，js 后缀的版本适用于 UMD 模块，下面演示 ES 模块的使用方法： 

<script type="module" src="/path/to/js.cookie.mjs"></script>
<script type="module">
  import Cookies from '/path/to/js.cookie.mjs'

  Cookies.set('foo', 'bar')
</script>

3. 设置cookie

设置一个有效期为七天的 cookie 信息，示例方法：

Cookies.set('name', 'value', { expires: 7 })

在当前页面和路径下，保存一个有效期为7天的 cookie 信息，示例方法：

Cookies.set('name', 'value', { expires: 7, path: '' })

4. 读取cookie

如果只有上述两个设置语句，在读取 cookie 时会遇到如下结果：

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

也可以在不知道 key 的情况下，读取所有的可见 cookie 信息，示例代码如下：

Cookies.get() // => { name: 'value' }

5. 删除cookie

删除cookie时需要明确关键字key，示例代码如下：

Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!

0x04 Chart.js

功能介绍

Chart.js 是一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库。Chart.js 在 github 上有 57.5K 个 star，其仓库地址：https://github.com/chartjs/Chart.js/，首先看一下图表示例：

显著特点

1. 包含6种不同的常用图表，每种方式都有酷炫的动画，以及一大堆的定制选项和交互性扩展。

2. 兼容性好。基于HTML5 canvas ，兼容所有现代浏览器，并且支持 IE7/8。

3. 无依赖的超级轻量级产品，gzip后大小仅11.01kb。

4. 智能响应式，如果浏览器改变了大小，Chart.js 会重新调整图表的大小，同时为这个大小提供了完美的缩放粒度。

5. 支持模块化加载，并且每个图表类型都已经分离，可以按需加载项目所需的图表类型。

6. 针对鼠标和触摸设备上提供了对画布工具提示的简单支持，也支持自定义触发事件，能满足复杂的交互需求。

入门介绍

1. 安装

执行如下命令进行本地工程安装：

npm install chart.js

另外，也可以引用 CDN 地址，比如 CDNJS 地址：https://cdnjs.com/libraries/Chart.js ，jsDelivr 地址：https://www.jsdelivr.com/package/npm/chart.js?path=dist。

2. 创建图表

要创建图表，需要先实例化 Chart 类。因此，需要传入要绘制图表的画布的节点、jQuery 实例或 2d 上下文。

html 代码：

<canvas id="myChart" width="400" height="400"></canvas>

js 代码：

// Any of the following formats may be used
const ctx = document.getElementById('myChart');
const ctx = document.getElementById('myChart').getContext('2d');
const ctx = $('#myChart');
const ctx = 'myChart';

获得元素或上下文后，就可以实例化预定义的图表类型或创建自己的图表类型了，示例代码如下：

<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

0x05 flv.js

功能介绍

flv.js 是 bilibili 开源的 HTML5 的视频播放器，使浏览器在不借助 flash 插件的情况下也可以播放 flv 视频文件，是目前比较主流的直播、点播解决方案之一。目前，其在 github 上有 21.3K 个 star，仓库地址：https://github.com/Bilibili/flv.js。

显著特点

1. 支持 H.264+AAC/MP3 编解码器播放。

2. 支持多分片段视频播放。

3. 支持 HTTP FLV 低延迟实时流播放。

4. 基于 WebSocket 的 FLV 实时流播放。

5. 兼容 Chrome、FireFox、Safari 10、IE11 和 Edge 等主流浏览器。

6. 极低的开销和支持硬件加速。

入门介绍

1. 安装

执行如下命令进行本地工程安装：

npm install --save flv.js

2. 编译

flv.js 支持多种形式的编译方式，具体情况如下：

npm ci                 # install dependencies / dev-dependences
npm run build:debug    # debug version flv.js will be emitted to /dist
npm run build          # minimized release version flv.min.js will be emitted to /dist

3. 演示

下面是使用 flv.js 进行视频播放的代码实例：

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

0x06 axios

功能介绍

axios 是一个基于 Promise 的 HTTP 库，可以用在 Node.js 和浏览器上发起 HTTP 请求，支持所有现代浏览器，甚至包括 IE8+。目前，axios 是前端最流行的 ajax 请求库，在 github 上有 94.5k 个 star，仓库地址：https://github.com/axios/axios。

显著特点

1. 支持在浏览器中发送 XMLHttpRequests 请求。

2. 支持在 node.js 中发送 http请求。

3. 基于 promise 的 HTTP 库，支持 promise 所有的API。

4. 支持拦截请求和响应（修改请求数据，只能用’PUT’,'POST’和’PATCH’几个请求方法）。

5. 转换请求和响应数据，响应回来的内容自动转换。

6. 自动转换 JSON 数据。

7. 客户端支持保护安全免受 XSRF 攻击。

入门介绍

1. 安装

执行如下命令进行本地工程安装：

npm install axios

2. 引入

引入 axios 库，可以参考示例代码如下：

const axios = require('axios').default;

3. POST 请求

演示一个 POST 请求，示例代码如下：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

结尾

虽然 JavaScript 本身已经很棒了，但是它的生态圈依然很重要。开发人员在开始一个新的项目时经常喜欢重新造轮子，但这是一个糟糕的想法。如果有类似的工具库，其实我们是可以直接拿过来用的，这样的好处是提高开发效率，缩短开发周期。本文推荐了六个 JS 库，这些工具库都具有丰富的文档，同时也非常的流行，并且还一直在维护中。因此，掌握它们对提升自己的工作效率会有非常大的帮助作用。

本文整理自华为云社区【内容共创】活动第18期。

活动地址：https://bbs.huaweicloud.cn/blogs/364560?needGalaxy=true

任务34：有哪些必看的 JS 库？