為什么要用classie.js

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

　　怎么用

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

　　hasClass

　　addClass

　　removeClass

　　toggleClass

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

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

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

　　強(qiáng)大的Classie.js

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

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

　　源碼分析

　　首先介紹一下classList屬性， classList是HTML5為javascipt的class操作新增的API。之前在操作類名時(shí)，需要通過className屬性，className屬性是一個(gè)字符串，使用className操作類名會(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。所以在低版本中使用了另外一種寫法。

　　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+|$)");

　　}

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

　　最后加上toggleClass。

　　function toggleClass( elem, c ) {

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

　　fn( elem, c );

　　}