写点什么

新 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:119341
用户头像

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

关注

评论

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

多机部署:打造内网服务器集群

左诗右码

Linux 运维

2024年甘肃省7家正规等保测评机构名单汇总

行云管家

网络安全 等保测评 等保测评机构 甘肃

天工一刻 | 一文看懂小模型与端侧模型

新消费日报

面向广大中低负载场景,华为云Flexus 云服务器X实例带来“品价比”新选择

轶天下事

三种高级RAG检索方法帮企业告别冗长文档!

神州数码

Open Interpreter利用Code Interpreter实现本地化

神州数码

生成式推荐系统与京东联盟广告-综述与应用

京东零售技术

大模型 企业号2024年7月PK榜

企业自身数据保护技巧你知道多少?用堡垒机可以实现吗?

行云管家

网络安全 数据安全 堡垒机 企业数据安全

服务端性能测试:行业流行性能监控工具介绍

测试人

软件测试 性能测试 自动化测试 测试开发

自然语言处理与Transformer模型:革新语言理解的新时代

天津汇柏科技有限公司

自然语言处理

文献解读-长读长测序-第十四期|《作为了解棉花驯化的资源,印度棉(Gossypium herbaceum L. Wagad)基因组》

INSVAST

基因组 基因数据分析 生信服务

低代码拖拽式MES系统数据大屏,重塑智能制造新视界

万界星空科技

数字化转型 mes 数据大屏 万界星空科技mes 电子大屏

煤矿安全大模型:微调internlm2模型实现针对煤矿事故和煤矿安全知识的智能问答

汀丶人工智能

人工智能 智能问答

检索生成(RAG) vs 长文本大模型:实际应用中如何选择?

Baihai IDP

AI LLMs 企业号 7 月 PK 榜 rag 长上下文

如何熟悉一个陌生系统

京东零售技术

系统 企业号2024年7月PK榜

手把手教你玩转 Nginx 配置

左诗右码

NGINX Ingress Controller

在(Linux)ubuntu下通过GTK调用libvlc开发视频播放器

DS小龙哥

7月月更

从美图类场景,看火山引擎数据飞轮如何赋能产品增长

字节跳动数据平台

大数据 用户增长 销售 增长 客户

线索系统性能优化实践

京东零售技术

系统 企业号2024年7月PK榜

电机行业MES生产管理系统--助力电机企业数字化转型

万界星空科技

mes 万界星空科技 电机行业 电机MES 电机工厂

柔性算力的创新之作!华为云Flexus X实例以6倍性能,带来旗舰体验

轶天下事

隆重推出 NGINX Gateway Fabric 1.0 版本

NGINX开源社区

nginx Kubernetes k8s nginx 开源版 NGINX Gateway Fabric

iOS端海外推送最佳实现

MobTech袤博科技

MobPush REST API中的创建推送

MobTech袤博科技

新一代柔性算力加速企业轻松上云,Flexus X实例有来头!

轶天下事

如何画一个系统的设计图

京东零售技术

架构 企业号2024年7月PK榜

腾讯云WeData全新升级:数据分类分级管理,构建数据安全屏障

腾讯云大数据

wedata

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