【云驻共创】六大必看 JavaScript 仓库,让你工作效率翻倍!

举报
liuzhen007 发表于 2022/07/15 01:44:58 2022/07/15
【摘要】 古人云:工欲善其事,必先利其器。代码开发也是一样的,掌握几款常用且好用的 JavaScript 工具库可以大大提升我们日常的工作效率。本文梳理了六个前端必看的 JavaScript 工具库(Day.js、qs、js-cookie、chart.js、flv.js、axios),对它们的功能特性和入门教程进行了介绍,希望可以帮助到大家。

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 库?

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。