QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

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

关注

评论

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

科学防控 云天励飞打造抗疫全场景方案

科技新消息

关于防御性编程,你应该知道的事

架构精进之路

编程 4月月更

手绘模型图带你认识Kafka服务端网络模型

华为云开发者联盟

kafka 多线程 网络模型 Reactor多线程 Processor

书单 | 一季度重磅级上榜新书!

博文视点Broadview

国内20家优秀一线低代码平台推荐,经典收藏

J2PaaS低代码平台

低代码 开发工具 低代码平台 J2PaaS低代码

蒙牛2021年报:数智化大脑为乳业插上腾飞翅膀

科技新消息

深入理解 Page Cache

mazhen

Linux Performance Linux Kenel PageCache

Kubernetes官方java客户端之五:proto基本操作

程序员欣宸

4月月更

实施知识管理过程中存在的问题(内附解决方案)

小炮

知识管理

压测做的不对,等于白做

基调听云

性能测试 压测 全链路压测

【PIMF】OpenHarmony啃论文成长计划——浅谈中间件

离北况归

中间件 OpenHarmony 啃论文

Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件

蒋川

Vue vue devtools

Linux 管道操作符详解

CRMEB

人工智能融合赋能平台,赋能智慧城市智能化升级

脑极体

整机生产制造头部厂商雷神科技加入龙蜥社区

OpenAnolis小助手

Linux 开源 整机

TDengine 应用实录:存储缩减超过 60%,HBase 等集群指数级下线

TDengine

数据库 tdengine 物联网

大数据培训程序员面试屡次碰壁怎么办

@零度

面试 大数据开发

PolarDB-X 正式发布2.1.0版本,Paxos 重磅开源

阿里云数据库开源

数据库 阿里云 开源 分布式 PolarDB-X

VMware Workstation Pro虚拟机网络设置

DS小龙哥

4月月更

洞见科技荣获隐私计算新势力奖!创始人姚明出席华夏时报「2022智能数据论坛」

洞见科技

隐私计算 数据智能

程序员不好招了吗,web前端培训应该怎么学习

@零度

前端开发

制造业企业数据平台建设最佳实践分享

华为云开发者联盟

数字化转型 数据平台 制造业 华为工业云平台 数据应用

java培训浅谈程序员怎么避免面试过程中碰壁

@零度

面试 JAVA开发

深圳“摘星”!但常态化疫情防控工作不可松

科技新消息

云天励飞全场景方案助力科技防疫

科技新消息

GPU时代来临!

Finovy Cloud

人工智能 gpu GPU服务器

如何保证同事的代码不会腐烂?一文带你了解 阿里巴巴 COLA 架构

Zhendong

Java 架构 4月月更

实战异地多活架构之王者荣耀商城

晨亮

「架构实战营」

【课程汇总】OpenHarmony全场景Demo数字管家系列课(附链接)

OpenHarmony开发者

OpenHarmony 数字管家

领域驱动设计入门与实践[下]

LigaAI

团队管理 DDD 领域驱动设计思想 LigaAI

天翼云新一代V5云主机,Kvm之生,Xen之死!

天翼云开发者社区

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