zoukankan      html  css  js  c++  java
  • 自己写个扩展把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,更多的实现方法就需要你们自己思考着去写了,别人嚼烂了不香.
      嘿嘿,我闪人先.

  • 相关阅读:
    Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决
    事务传播机制Propagation.REQUIRES_NEW
    @ApiImplicitParams、ApiImplicitParam的使用
    启动微服务项目的时候报redisInit错误---本地启动redis服务
    Swagger介绍及使用
    mybaitis框架-trim标签
    pgadmin怎样创建新的连接
    微服务项目启动
    管理中第一可怕之事(2) . 分类: 项目管理 2014-06-25 18:54 257人阅读 评论(0) 收藏
    管理中第一可怕之事(1) . 分类: 项目管理 2014-06-25 18:53 264人阅读 评论(0) 收藏
  • 原文地址:https://www.cnblogs.com/see7di/p/2247745.html
Copyright © 2011-2022 走看看