MooTools和jQuery库继承实现class切换对比 « 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2010年07月22日，星期四，20:40，归类于 jQuery相关。阅读 80604 次, 今日 1 次 6 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=962

一、我眼中的MooTools库和jQuery库

如果要我对MooTools库和jQuery库给个形象化的认识，那么我觉得MooTools库属于刚劲派，含阳刚之气；而jQuery有如婉约派，有些女人的味道。就功能与使用而言，MooTools库就是武装后的JavaScript，有不少高级装备，但需要手把手操作，小菜鸟往往用不来；而jQuery是变形后的JavaScript，直接塞给你一些的遥控器，按按方向键和按钮就可以做控制，所以即使新手也能简单把玩。

MooTools库我也是最近才开始接触，其思想与jQuery是完全不同的，MooTools库还是JavaScript，但貌似有着很多传统opp语言的印记，就这一点来讲，我个人是不喜欢的，不是我不喜欢OPP编程，而是不喜欢把JavaScript非得带到类似OPP语言的路子上，就好像计算机是个热门专业，孩子报考大学，其本来更适合做生物的，结果父母硬要他报考计算机一样。相比之下，jQuery虽然也是JavaScript写的，但是，jQuery的思想让JavaScript变成了与其他语言不一样的语言（让JavaScript成为了JavaScript，而不是像其他语言）。个人觉得，jQuery是站在了js的立场上，而MooTools是站在了C++/Java的立场上。

您可以狠狠地点击这里：MooTools库1.2中文在线文档

二、对比所用的简单实例

本文的核心是展示MooTools和jQuery库在处理继承上的差异，所以呢，实例是尽量简单的。本文从头至尾就一个实例，非常简单常用的一个例子，就是实现标签class的切换（本例为：添加和删除）。举个例子吧：
一个div标签，其有个类为box，box类的CSS代码如下：

.box{width:500px; height:200px; background:#34538b;}

很简单的CSS代码，一个div，高度200像素，宽度50像素，背景色为#34538b，如果这个标签放在body内，则预览后会有如下效果：
简单div效果张鑫旭-鑫空间-鑫生活

现在我们添加另外一个样式，就是土黄色的背景色样式，如下：

.default{background:#947536;}

我们可以通过给这个class为”box”的div增加一个class “default”来改变这个div的背景色，例如：

<div class="box default"></div>

则结果会如下：
背景色变为土黄色张鑫旭-鑫空间-鑫生活

这就是贯穿本文的实例。同时，为了演示如何在MooTools和jQuery库下传递可自定义参数，我们还需要另外一个背景色，例如：

.hover{background-color:#a0b3d6;}

效果如下图：
淡蓝色背景色张鑫旭-鑫空间-鑫生活

三、具体的代码与实现

首先，无论使用哪个JavaScript库，代码的CSS部分与html部分是完全一致的，如下：

.box{width:500px; height:200px; background:#34538b;}
.default{background:#947536;}
.hover{background-color:#a0b3d6;}

<div class="box"></div>

下面的就是重头戏，js代码：

1. MooTools
js部分代码如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript">
var fn = new Class({
    defaults: {
        hoverClass: "default"    
    }, //一些默认的参数
    initialize: function(elements, options){
        //初始化
        this.container = elements;
        //参数覆盖合并
        this.settings = $extend(this.defaults, options || {});
        this.fnClassToggle();
    },
    fnClassToggle: function(){
        var cl = this.settings.hoverClass;
        if(cl){
            this.container.each(function(term, index){
                term.addEvent("mouseenter",function(){
                    this.addClass(cl);                                 
                });
                term.addEvent("mouseleave",function(){
                    this.removeClass(cl);                             
                });                     
            });
        }
    }
});
</script>
<script type="text/javascript">
window.addEvent("domready",function(){
    //var myFn = new fn($$(".box"));
    var myFn = new fn($$(".box"),{
        hoverClass: "hover"
    });
    myFn.fnClassToggle();	
});
</script>

您可以看到，在window.addEvent方法内有行注释掉的代码，如果没有下面的var myFn = new fn($$(".box"),{hoverClass: "hover"});则fnClassToggle()方法会调用默认的hoverClass参数值 – “default”，也就是本文第二部分展示的土黄色了。关于此效果您可以狠狠地点击这里：MooTools下背景色土黄色切换demo

不过上面这段MooTools下的js实现的效果是：鼠标经过class为box的元素，其添加class “hover”，鼠标移出时，移出刚刚添加的class名”hover”，这种class的添加于去除所产生的效果就是div背景色的切换，也就是我们经常说的鼠标悬停背景色切换效果。下面的jQuery下的代码与之一样。

2. jQuery
js部分代码如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$.fn.extend({
    fnClassToggle: function(options){
        var defaults = {
            hoverClass: "default"    
        }; //默认的一些参数
        var settings = $.extend({}, defaults, options || {});
        $(this).each(function(index, term){
            var cl = settings.hoverClass;
            if(cl){
                $(term).hover(function(){
                    $(this).addClass(cl);                    
                },function(){
                    $(this).removeClass(cl);    
                });
            }
        });
    }    
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    //$(".box").fnClassToggle();	
    $(".box").fnClassToggle({
        hoverClass: "hover"						
    });	
});
</script>

与上面的MooTools实现的是一样的效果，传递的是一样的参数，都使用了继承实现鼠标悬停效果，对于具体的一些不同之处，例如extend方法，each方法，DOM ready等，这里不做具体讲解，这不是本文重点，关于继承的差异，我觉得看代码比我在这里唾液乱飞的饶舌更有用。您可以仔细对比两种库下方法的不同，这对于理解这两种库还是相当有帮助的。

您可以狠狠地点击这里：jQuery下背景色土黄色切换demo