新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'
                        },
                    ]
                }
            ]
        }
    ]
});</pre> 

    為了找到一個節點，你可以傳遞任意一個有效的目錄結構作為參數，就可以在這個樹中搜索。

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 
來自：http://www.infoq.com/cn/news/2015/01/new-javascript-libraries

                    

                        
 本文由用戶 jopen  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/1cb10d                        
                        
 JavaScript