HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

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

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

关注

评论

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

简单小巧的右键助手:MouseBoost for Mac让您的工作效率大幅度提高

Rose

mac效率工具 右键助手 MouseBoost激活版

MQTT 5.0特性Inflight Window&Message Queue

EMQ映云科技

物联网 IoT mqtt emqx 企业号 3 月 PK 榜

优秀的录屏软件:Record It Pro 直装激活版

真大的脸盆

Mac Mac 软件 录屏 屏幕录制 录屏软件

Linux进程学习【进程地址】

Yohifo

Linux 学习 运维 后端 进程

开启一个A/B实验到底有多简单?

字节跳动数据平台

云服务 AB testing实战 ab测试 企业号 3 月 PK 榜

Perforce研讨会回顾 | Helix Core在芯片行业的应用实例:芯片项目的版本控制、持续集成及自动化

龙智—DevSecOps解决方案

ci cicd 版本控制 持续集成 芯片开发

专场直播预约 | 邀您探讨KaiwuDB 离散制造业场景解决方案

墨天轮

数据库 解决方案 制造业 国产数据库 KaiwuDB

代码质量与安全 | 免费的静态分析工具好吗?

龙智—DevSecOps解决方案

SAST 静态代码扫描 DAST

CorelDRAW Graphics Suite2023功能介绍

茶色酒

cdr2023

大语言模型必将取代一切?暂时不会!

深数

人工智能 科技 AGI GPT LLM

HTML5智慧农业大棚Web3D可视化系统

2D3D前端可视化开发

智慧大棚 智慧农业 数字农业 大棚三维可视化 数字孪生智慧大棚

盘活存储资源,天翼云HBlock助力企业绿色高效发展!

天翼云开发者社区

深入理解关键字volatile

小小怪下士

Java 程序员 volatile 关键字

GPT-4:不open的OpenAI,终于不再编造事实

鼎道智联

openai ChatGPT4

学完阿里P8面试官推荐的Java高并发核心编程文档后终拿蚂蚁offer

程序知音

Java 并发编程 编程语言 高并发 java架构

全球掀起AI热,天翼云智算能力已就绪!

天翼云开发者社区

PostgreSQL:psql 介绍

天翼云开发者社区

如何利用ChatGPT搞科研?

Openlab_cosmoplat

人工智能 开源社区 ChatGPT

云计算搭上“双碳”,天翼云在绿色算力赛道加速跑

天翼云开发者社区

Portraiture最新版插件新增哪些功能?

茶色酒

Portraiture4

听说火山引擎推出的DataLeap,已经可以支持万级表的数据血缘图谱了!

字节跳动数据平台

大数据 数据治理 数据研发 企业号 3 月 PK 榜

AI笔刷怎样导入?adobe ai笔刷安装教程

Rose

AI画笔 AI教程 Illustrator 2023 下载 AI中文版

Neural Filters神经滤镜插件如何安装?PS神经滤镜插件安装教程

Rose

mac系统 Neural Filters PS滤镜插件 PS20221下载

Atlassian Server用户新选择 | 迁移到数据中心版前,您需要做这些准备(1)

龙智—DevSecOps解决方案

Atlassian Atlassian迁移 数据中心版 server版

Stepn跑鞋GMT系统开发(NFT链游)

薇電13242772558

NFT链游

共铸国云智领未来| 以数字林草之“笔” 绘就塞上江南新图景

天翼云开发者社区

第四朵“云”!全托管的时序数据云平台 TDengine Cloud 正式支持阿里云

TDengine

大数据 tdengine 阿里云 时序数据库 云服务

Ascend CL两种数据预处理的方式:AIPP和DVPP

华为云开发者联盟

人工智能 华为云 昇腾CANN 华为云开发者联盟 企业号 3 月 PK 榜

AntDB-M数据库锁分析,不要错过!

亚信AntDB数据库

数据库 AntDB 国产数据库 AntDB数据库 企业号 3 月 PK 榜

通通透透看无服务器计算:由来、场景和问题

天翼云开发者社区

代码实战带你了解深度学习中的混合精度训练

华为云开发者联盟

人工智能 深度学习 华为云 华为云开发者联盟 企业号 3 月 PK 榜

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