自己写个扩展把Mootools的语法改的和Jquery的语法一模一样

本文主要是介绍自己写个扩展把Mootools的语法改的和Jquery的语法一模一样，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

　　如果你曾经是jquery的写手,而又不想学mootools的语法格式的话,我们可以修改一下mootools的语法格式让其语法格式和jq完全相同,这样你就不但不必在学习mt的语法了,同时还可以体验到mt的优点,在这种状况下我们可以做到不改变jquery已有的任何语句只修改一下对js框架的调用即可(即把对jquery.js的调用换成对mootools.js的调用),保证网站不会出错,听起来是挺唬人.实际上完全能做得到.

　　Mootools有强大的扩展机制,这种机制允许我们随意定制Mootools的语法格式,这是一个好消息,不好的消息是如果想把jquery的语法格式改成mt那打死也做不到,废话不多说我们分别看一下两个例子比较一下Mootools和jquery的语法差别:

//Jquery语句
$('id').css('color','red');
$('id').html('ff');
$('id').click(function(){});

//Jquery的ajax
$.ajax({
    type:"post",url:"?",
    data:"lat=風景&lng=Boston",
    error:function(msg){alert(msg);return false;},
    success:function(msg){
        if(msg.indexOf('Error:')!=-1){alert(msg);return false;}
        alert(msg+'|'+msg.length);
    }
});

//Mootools语句
$('id').setStyle('color','red');
$('id').set('html','ff');
$('id').addEvent('click',function(){});

//Mootools的ajax
var myElement=document.id('myElement');
var myRequest=new Request({
    url:'getMyText.php',
    method:'get',
    onRequest:function(){
        myElement.set('text','loading...');
    },
    onSuccess:function(responseText){
        myElement.set('text',responseText);
    },
    onFailure:function(){
        myElement.set('text','Sorry,your request failed:(');
    }
});
document.id('myLink').addEvent('click',function(event){
    event.stop();
    myRequest.send('userid='+this.get('data-userid'));
});

　　在上边的例子中我分别对照了两种js框架不同的语法结构,细心的童鞋应该能发现两种框架的语法格式其实差异还蛮大的,要把mt的语法修改的和jq一样岂不是天方夜谭,好了,别担心就算不相信我也没关系,但请相信Mt有此能力就行了.

看我的示例代码:

//先来实现一下jquery的html和css方法
Element.implement({
    html:function(value){
        return (typeOf(value)=='string')?this.set('html',value):this.get('html');
    },
    css:function(opt,value){
        switch(typeOf(opt)){
        case 'object':
            this.setStyles(opt);break;
        case 'string':
            if(typeOf(value)=='string'){//$('a').css('color','red');
                this.setStyle(opt,value);
            }else{//console.log($('a').css('color'));
                return this.getStyle(opt);
            }
        }
        return this;
    }
});

//再实现ajax
$.extend({
    ajax:function(options){
        var request;
        options.method=options.type || options.method || 'get';
        if(options.complete){options.onComplete=options.complete;}
        if(options.error){options.onFailure=options.error;}
        if(options.success){options.onSuccess=options.success;}
        if(options.dataType && options.dataType.toLowerCase()=='html' && Request.HTML){
            request=new Request.HTML(options);
        }else if(options.dataType && options.dataType.toLowerCase()=='json' && Request.JSON){
            request=new Request.JSON(options);
        }else{
            request=new Request(options);
        }
        if(options.timeout){request.cancel.delay(options.timeout);}
        return request.send();
    }
});