写点什么

新 JavaScript 库的激动人心之处

  • 2015-01-19
  • 本文字数:1980 字

    阅读完需:约 6 分钟

近期在 GitHub 上出现了大量新的 JavaScript 库,我们要来看一下其中非常棒的一些库。

QuaggaJS: 完全使用 JavaScript 编写的条形码扫描程序

QuaggaJS 是一种条形码扫描程序,完全使用 JavaScript 编写,支持对各种类型的条形码——像 EAN 和 CODE128——的实时定位和解码。

尽管已经存在各种各样的条形码库,但它还是从头编写的,而并没有从流行的 zxing 库移植过来。 QuaggaJS 实现的特性是一种条形码扫描程序,它能够在图形中找到类似于条形码的样式,得到估计的边界框,包括旋转的情况。 这样,你就可以在图形中做很智能的二维码识别。

如果你想要完全利用 QuaggaJS 的优势,那么浏览器需要支持 getUserMedia 这个 API,它在最新版本的 Firefox、Safari、Chrome 和 Opera 中都已经实现。

这个库暴露了以下 API:

Quagga.init(config, callback)
这个方法会根据给定的配置和回调函数对库进行初始化,回调函数会在载入过程完毕后调用。 如果配置了实时检测,那么初始化过程还会请求访问相机。

Quagga.start()
当库初始化之后,start() 方法会启动视频流,并开始对图像进行定位和解码。

Quagga.stop()
如果当前解码器在运行,那么在调用 stop() 之后,解码器就不会再处理任何图像。

Quagga.onDetected(callback)
注册一个回调函数,它会在成功定位和解码一个条形码模式之后触发。 在调用回调函数的时候,解码后的数据会作为第一个参数。

Quagga.decodeSingle(config, callback)
和上述的方法不同,这个方法不会依赖于 getUserMedia,而会在单独的图像上处理。 提供的回调函数和 onDetected 中的一样,会包含解码后的数据作为第一个参数。

The QuaggaJS 示例库中包含了更多示例和用例。

Lining.js: 为 CSS web 排版所用的 JavaScript 插件

Lining.js 是用来处理带有元素的单独行的库。 你只需要在元素上增加 data-lining 属性,就可以使用 Lining.js,然后使用 CSS 来设置它的样式。

在 CSS 中我们已经拥有::first-line 这个选择器,可以在元素的第一行上应用样式。 但并没有类似于::nth-line()、::nth-last-line() 或者::last-line 之类的选择器。 Lining.js 对你的文本提供了完整的行控制,如下示例所示:

复制代码
<div class="poem" data-lining="">Some text...</div>
<style type="text/css">.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>
<script src="YOUR_PATH/lining.min.js"></script>

现在,Lining.js 只支持主要浏览器,像 Chrome、Firefox、Safari 和 Opera。 但不支持 IE。

InteractJS: 使用 JavaScript 实现拖放、缩放和多点触控手势

InteractJS 是一个 JavaScript 模块,它为最新的浏览器(包括 IE8 以上版本)增加了拖放、缩放和多点触控手势,并带有惯性和快照功能。

这个库的主要目的是替换 jQuery UI 所提供的功能。 因此,使用 InteractJS 来编写的 web 应用在智能手机和平板上会更加易用。 InteractJS 是一个轻量级的库,可以与 SVG 技术协作,处理多点触控输入,而把渲染元素以及设置其样式的任务留给了应用程序。

官方的 InteractJS 站点提供了拖拽、快照、缩放和多点触控旋转的示例和用例。

TreeJS: 构建和操作可挂钩的树

Tree.js 是一种用来构建和操作可挂钩的树的 JavaScript 库。 对于查找和遍历目录结构,它是一种很有用的插件。

想象一下,你在 web 应用程序中有一个管理部分,需要浏览文件系统。 那么使用 Tree.js,你就可以像下面这样来展示文件系统:

复制代码
javascript
var myTree = Tree.tree({
    children: [
        {
            name: 'dupuis',
            children: [
                {
                    name: 'prunelle',
                    children: [
                        {
                            name: 'lebrac',
                            job: 'designer'
                        },
                        {
                            name: 'lagaffe',
                            firstname: 'gaston',
                            job: 'sleeper'
                        },
                    ]
                }
            ]
        }
    ]
});

为了找到一个节点,你可以传递任意一个有效的目录结构作为参数,就可以在这个树中搜索。

复制代码
javascript
var lebrac = myTree.find('/dupuis/prunelle/lebrac');
lebrac.data() // { name: 'lebrac', job: 'designer' }
lebrac.attr('job'); // designer
lebrac.path(); // /dupuis/prunelle/lebrac

GitHub 上的 The Tree.js 库提供了其他使用挂钩和保证(promises)的案例。

查看英文原文: What’s Exciting in New JavaScript Libraries

2015-01-19 17:119329
用户头像

发布了 340 篇内容, 共 138.9 次阅读, 收获喜欢 13 次。

关注

评论

发布
暂无评论
发现更多内容

gitlab无法通过ssh拉代码

阿呆

#GitLab

【吐血整理】大牛耗时一年最佳总结,让你的app体验更丝滑

欢喜学安卓

android 程序员 面试 移动开发

【性能优化实战】Android架构组件Room功能详解

欢喜学安卓

android 程序员 面试 移动开发

ironSource 在 2021 ChinaJoy 举办多场活动赋能中国开发者

从河南暴雨、疫情反弹看区块链“灾疫”治理

CECBC

TRTC代码示例文档集合完毕!哪里不会点哪里!

腾讯云音视频

腾讯云 音视频 API sdk

当企业遭遇分布式拒绝服务 (DDoS) 攻击时,第一时间该如何进行操作?

九河云安全

下一个颠覆的领域:区块链如何影响审计行业?(下)

CECBC

区块链技术如何有效应对气候变化

CECBC

Hologres揭秘:深度解析高效率分布式查询引擎

阿里云大数据AI技术

2021Java春招面试真题详解,Git-如何优雅地回退代码

策划Java工程师

Java 程序员 后端

android 工作资料!职场中的中年危机

欢喜学安卓

android 程序员 面试 移动开发

立体车库数据管理被卡脖子?织信车库管理系统全面掌控车辆新状况

优秀

低代码

DataPipeline荣膺CFS第十届财经峰会“2021数字化转型推动力奖”

DataPipeline数见科技

大数据 数据融合 数据管理

关于Spring注解开发教程,打包全送你

华为云开发者联盟

Java spring 容器 注解 组件

你使用的SimpleDateFormat类还安全吗?

华为云开发者联盟

Java 安全 线程 高并发 SimpleDateFormat类

频繁出现的分布式拒绝服务 (DDoS) 攻击​,有什么办法可以抵御吗?

九河云安全

Python代码阅读(第2篇):数字转化成列表

Felix

Python 编程 Code Programing 阅读代码

防火墙 Keepalived 异常双活恢复后部分外网访问中断问题分析

Qunar技术沙龙

运维 防火墙 网络 故障诊断 keep-alive

态势感知一屏可视:数治安全,智理未来

一只数据鲸鱼

网络安全 数据可视化 数据监测 数字孪生

分布式拒绝服务 (DDoS) 攻击对企业运维造成的影响分析

九河云安全

FIL分币系统源码|分销商城功能开发模式介绍

Geek_23f0c3

fil Fil算力挖矿分币系统 Filecoin分销商城

基于 Apache APISIX,新浪微博API网关的定制化开发之路

API7.ai 技术团队

Apache 网关 APISIX 微博

迅捷录屏大师 Tech Support

凌天一击

啃书一年多的我,推荐Python初学者不要在乱看书了,有这三本就妥妥的

冇先生

Linux 网络管理技术 OSI 七层模型和 TCP/IP 四层模型

学神来啦

Linux 运维 IP

面试官:你了解JVM的锁优化吗?

百度开发者中心

Java 最佳实践 方法论 语言 & 开发

FastApi-04-请求体-1

Python研究所

FastApi 8月日更

编译脚本:编写CMakeFile(一)

正向成长

CMakeFile

双非本化学跨专业,投岗阿里/滴滴后端三面,最终拿下offer

编程菌

Java 编程 程序员 面试 计算机

2021Java大厂面试集合,java多线程

策划Java工程师

Java 程序员 后端

新JavaScript库的激动人心之处_JavaScript_Philip De Smedt_InfoQ精选文章