MooTools和jQuery库继承实现class切换对比

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

 

一、我眼中的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

四、源文件下载

难得,我差不多有个把月没有打包过zip文件了,今天,当当当当,看这里:jquery-mootool-extend-test.zip (右键 – [目标|链接]另存为)。

我接触MooTools时间并不长,所以有些内容也是一知半解,不方便具体展开,误人子弟可不好啊。所以呢,本文展示的一些继承的实现可能不是最佳的方法,仅供参考。谢谢!

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. fuyil说道:

    作者文很多,还有源码,感谢!我才接触js,不是很懂这里的内容,不过好像不错,希望能找到我需要的。。。

  2. 山大芋说道:

    提个错:myFn.fnClassToggle();这部多余了,initialize里的this.fnClassToggle();已经做掉了……

  3. seri说道:

    开始以为是用来换皮肤的,结果一看,是用来切换 – -?这个??
    css简单就能实现 – – 这个是为了讲思路么?

  4. narco说道:

    好文,支持下

  5. popo4j说道:

    jQuery是站在了js的立场上,而MooTools是站在了C++/Java的立场上。
    我也很赞同这句话。。。,js这种脚本语言就用他自己的特色来书写代码好了,何必一定要一个劲的往oop这个阵营挤啊,钻啊