新JavaScript库的激动人心之处

近期在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