为什么要用classie.js

　　classie是一个 awesome,lightweight script。 用来添加，移除，toggleDom元素的类。那为什么不用jquery呢， 因为jquery相对于这几个简单的功能太冗余了(just too bloated for your needs)。 classie.js 只有简单的81行，去掉注释，仅有51行， 我们现在就来分析源码。

　　怎么用

　　classie只有4个方法，分别是：

　　hasClass

　　addClass

　　removeClass

　　toggleClass

　　顾名思义。 使用classie只需要在js代码中，直接使用classie.hasClass等方法即可。方法中只需要传递两个参数，第一个是Element元素，第二个是需要操作的class名称。
 

　　Classie.js是一个功能强大并且非常轻量级的脚本，它可以让你添加、删除、切换以及检查DOM中的类变的非常容易。

　　很多JavaScript严重的核心是围绕着类的添加与删除，今天，CSS3 transitions, transforms, 以及animations开始流行，很多非常酷的特效可以通过简单的添加一个类到一个元素上创立。比如通过触摸如何将图片过渡到视图区？仅仅是给图片添加几个transition属性，关联触摸类拥有transform属性，通过JavaScript触摸事件添加给图片添加类，这样就完成了一个流畅的、漂亮的CSS3 transition.

　　强大的Classie.js

　　如果没有一个像jQuery这样的库的话那么想要添加、删除类将不是一件轻松的事，但是很多时候JS库对你的需求来说往往太过臃肿。我在很多自己需要使用库的项目里，我发现仅仅是需要用到类的切换/检查的功能。进入 classie.js, 一个可强大的超级轻量级脚本, 它允许您很容易添加、删除、切换,和检查DOM中的类。 Classie.js 带给我们奇妙的和简单的实用性, 不会让我们的脚本变得臃肿。毕竟它仅仅只有82行代码, 1.872 kb大小。下面是一个简单的classie.js实例 :

　　在上面的例子中, el代表的是我们要查询的元素。我们检查是否它有一个类sweet。如果有, 则删除它。 如果没有, 就添加它。在一个臃肿的库的世界里这样的小脚本现在绝对正确的方式。

　　源码分析

　　首先介绍一下classList属性， classList是HTML5为javascipt的class操作新增的API。之前在操作类名时，需要通过className属性，className属性是一个字符串，使用className操作类名会涉及到很多字符串处理，很麻烦。新增的classList属性简化了这些操作。下面的代码就是使用classList属性进行了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+|$)");

　　}

　　这里使用的是对className属性进行字符串处理。

　　最后加上toggleClass。

　　function toggleClass( elem, c ) {

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

　　fn( elem, c );

　　}