自己写个扩展把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(){});

//Mootoolsajax
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();
}
});

  好了,有了上边的代码,接下来那就完全可以像写jquery一样去写mootools了,当然了jq的方法很多个,我这里只写了两个外加一个ajax,更多的实现方法就需要你们自己思考着去写了,别人嚼烂了不香.
  嘿嘿,我闪人先.

posted @ 2011-11-14 02:48 PHP群:223494678 阅读(...) 评论(...) 编辑 收藏