為什么要用classie.js

　　classie是一個(gè) awesome,lightweight script。 用來(lái)添加，移除，toggleDom元素的類(lèi)。那為什么不用jquery呢， 因為jquery相對于這幾個(gè)簡(jiǎn)單的功能太冗余了(just too bloated for your needs)。 classie.js 只有簡(jiǎn)單的81行，去掉注釋?zhuān)瑑H有51行， 我們現在就來(lái)分析源碼。

　　怎么用

　　classie只有4個(gè)方法，分別是：

　　hasClass

　　addClass

　　removeClass

　　toggleClass

　　顧名思義。 使用classie只需要在js代碼中，直接使用classie.hasClass等方法即可。方法中只需要傳遞兩個(gè)參數，第一個(gè)是Element元素，第二個(gè)是需要操作的class名稱(chēng)。
 

　　Classie.js是一個(gè)功能強大并且非常輕量級的腳本，它可以讓你添加、刪除、切換以及檢查DOM中的類(lèi)變的非常容易。

　　很多JavaScript嚴重的核心是圍繞著(zhù)類(lèi)的添加與刪除，今天，CSS3 transitions, transforms, 以及animations開(kāi)始流行，很多非?？岬奶匦Э梢酝ㄟ^(guò)簡(jiǎn)單的添加一個(gè)類(lèi)到一個(gè)元素上創(chuàng )立。比如通過(guò)觸摸如何將圖片過(guò)渡到視圖區？?jì)H僅是給圖片添加幾個(gè)transition屬性，關(guān)聯(lián)觸摸類(lèi)擁有transform屬性，通過(guò)JavaScript觸摸事件添加給圖片添加類(lèi)，這樣就完成了一個(gè)流暢的、漂亮的CSS3 transition.

　　強大的Classie.js

　　如果沒(méi)有一個(gè)像jQuery這樣的庫的話(huà)那么想要添加、刪除類(lèi)將不是一件輕松的事，但是很多時(shí)候JS庫對你的需求來(lái)說(shuō)往往太過(guò)臃腫。我在很多自己需要使用庫的項目里，我發(fā)現僅僅是需要用到類(lèi)的切換/檢查的功能。進(jìn)入 classie.js, 一個(gè)可強大的超級輕量級腳本, 它允許您很容易添加、刪除、切換,和檢查DOM中的類(lèi)。 Classie.js 帶給我們奇妙的和簡(jiǎn)單的實(shí)用性, 不會(huì )讓我們的腳本變得臃腫。畢竟它僅僅只有82行代碼, 1.872 kb大小。下面是一個(gè)簡(jiǎn)單的classie.js實(shí)例 :

　　在上面的例子中, el代表的是我們要查詢(xún)的元素。我們檢查是否它有一個(gè)類(lèi)sweet。如果有, 則刪除它。 如果沒(méi)有, 就添加它。在一個(gè)臃腫的庫的世界里這樣的小腳本現在絕對正確的方式。

　　源碼分析

　　首先介紹一下classList屬性， classList是HTML5為javascipt的class操作新增的API。之前在操作類(lèi)名時(shí)，需要通過(guò)className屬性，className屬性是一個(gè)字符串，使用className操作類(lèi)名會(huì )涉及到很多字符串處理，很麻煩。新增的classList屬性簡(jiǎn)化了這些操作。下面的代碼就是使用classList屬性進(jìn)行了class的操作。

　　if ( 'classList' in document.documentElement ) {

　　hasClass = function( elem, c ) {

　　return elem.classList.contains( c );

　　};

　　addClass = function( elem, c ) {

　　elem.classList.add( c );

　　};

　　removeClass = function( elem, c ) {

　　elem.classList.remove( c );

　　};

　　}

　　支持className屬性的瀏覽器有Firefox3.6+和Chrome。所以在低版本中使用了另外一種寫(xiě)法。

　　else {

　　hasClass = function( elem, c ) {

　　return classReg( c ).test( elem.className );

　　};

　　addClass = function( elem, c ) {

　　if ( !hasClass( elem, c ) ) {

　　elem.className = elem.className + ' ' + c;

　　}

　　};

　　removeClass = function( elem, c ) {

　　elem.className = elem.className.replace( classReg( c ), ' ' );

　　};

　　}

　　其中classReg使用如下方法找到class ：

　　function classReg( className ) {

　　return new RegExp("(^|\s+)" + className + "(\s+|$)");

　　}

　　這里使用的是對className屬性進(jìn)行字符串處理。

　　最后加上toggleClass。

　　function toggleClass( elem, c ) {

　　var fn = hasClass( elem, c ) ? removeClass : addClass;

　　fn( elem, c );

　　}