• 一周学会Mootools 1.4中文教程:(7)汇总收尾


      转眼之间已经第七课了,这也将成为最后一课,如果这7课下来您感觉水平没有达到预想的水平,没关系您可以继续关注本站的博文,我会陆续发一些类似的文章帮您提升水平,另外我最近打算和群里的几个Mootools爱好者制作一下Mootools1.4的chm版中文API手册,如果您对此感兴趣可以来群里一起讨论(QQ群号:16648471)

      我们今天的课程主要讲解一下Mootools的class,因为Mootools的class通常用于对插件的封装,所以讲完了class之后我会实际开发一个插件并详细说明插件的开发过程.
    在Mootools中使用Class构造函数创建一个类有两种方式,也就是传递两种不同类型的参数给构造函数,第一种也是标准方式传递一个对象字面量,这个对象字面量可以包括你为类添加的所有属性、方法。例如:

    复制代码
        var Person = new Class({ 
    //初始化
    initialize: function (name, age) {
    this.name = name;
    this.age = age;
    },
         //创建一个方法
    log: function () {
    console.log(this.name + ',' + this.age);
    }
    });

    var mark = new Person('mark', 24);
    mark.log(); // returns 'mark,24'
    复制代码
      第二种是传递一个普通函数,mootools会自动把这个函数包装成只含一个initialize键值的对象字面量,然后你可以使用implement方法对类进行扩展,例如:
    复制代码
        var Person = new Class(function (name, age) { 
    this.name = name;
    this.age = age;
    });
    Person.implement('log', function () {
    console.log(this.name + ',' + this.age);
    });
    var mark = new Person('mark', 24);
    mark.log(); // returns 'mark,24'
    复制代码
     

      当然推荐使用的还是第一种方式,直观明了。你如果使用标准方式建立了一个类,也是可以使用implement和Extends对类进行扩展或继承,当然了这部分内容已经超出了我们一周学会Mootools的范畴,所以如果您对此感兴趣可以看官方文档.

      接下来我会开发一个插件,用来演示class的使用.这个插件的效果是:http://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html
    所不同的是,之前我是直接使用function实现的,而现在是使用class封装过了,下边是实现代码.

    复制代码
    <script  src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
    <body id='a'>
    <h2 class='a'>Single images</h2>
    <div id='bsfdimg' style='background:url("http://www.eg-live.com.tw/@upload/2182/07_7e4cb.jpg") no-repeat scroll -50px -50px transparent;260px;height:200px;' w='392' h='600'></div>
    <script type='text/javascript'>

    var MoveBKimg=new Class({
    initialize:function(){//初始化
    this.$L=0;
    this.$T=0;
    },
    Todo:function(i,opt){
    this.opt={
    bw:opt.bw || 0, //容器宽度
    bh:opt.bh || 0,
    iw:opt.iw || 0, //图像宽度
    ih:opt.ih || 0,
    X:opt.X || 0, //鼠标的clientX坐标
    Y:opt.Y || 0
    };o=this.opt;
    if(!i || !o.iw || !o.ih || !o.bw || !o.bh){return false;}

    o.iw=o.iw-o.bw; //图像实际可被移动的x轴范围
    o.ih=o.ih-o.bh;

    var P=i.getStyle('background-position');P=P.split(" ");//取得目前背景图的position值,并拆分转为Int型
    P[0]=P[0].toInt();P[0]=(P[0].abs()>o.iw)?((P[0]<0)?-o.iw:o.iw):P[0];//背景图目前的X偏移,并对值进行2次修正
    P[1]=P[1].toInt();P[1]=(P[1].abs()>o.ih)?((P[1]<0)?-o.ih:o.ih):P[1];

    console.log(o.X+'|'+o.Y);
    if(o.X>this.$L){//往右移鼠标图片往左跑
    this.$L=o.X;
    P[0]=(o.iw<(P[0]-10))?o.iw:(P[0]-10);
    }
    if(o.X<this.$L){//往左移鼠标图片往右跑
    this.$L=o.X;
    P[0]=((P[0]+10)>0)?0:(P[0]+10);
    }
    if(o.Y>this.$T){//往下移鼠标图片往上跑
    this.$T=o.Y;
    P[1]=(o.ih<(P[1]-10))?o.ih:(P[1]-10);
    }
    if(o.Y<this.$T){//往上移鼠标图片往下跑
    this.$T=o.Y;
    P[1]=((P[1]+10)>0)?0:(P[1]+10);
    }
    i.setStyle('background-position',''+P[0]+'px '+P[1]+'px');//重新给背景图的position赋值
    }
    });

    El=$('bsfdimg');//选择dom
    var MoveBKimg=new MoveBKimg();//实例化class,在实例化的过程中会自动执行initialize,并创建两个变量赋值为0,这两个变量的作用是和鼠标目前的坐标做比对,这样才能知道鼠标是往什么方向移动了
    El.addEvent('mousemove',function(event){//给dom节点绑定事件
         //调用类的Todo方法,调用的时候传递dom节点和options
    MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y});
    })
    复制代码


    我说一下这一句:

     MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y});

    这里的El即为$('bsfdimg')

    {bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y}
    这一句里的bw就是div容器的宽度,bh是div容器的高度,iw是图像的实际宽度,ih是图像的实际高度
    图像的实际宽度和高度为了准确性所以我直接使用php取得并赋值的,当然了,你也可以使用其他任意你能想到的方法来取得图像宽度和高度.
    X:event.client.x,Y:event.client.y
    这两个分别是鼠标相应事件的坐标,不需要修改.

    event来自El.addEvent('mousemove',function(event){对事件的绑定时的传值.

    http://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html
    在上边这篇文章内的效果是使用了function,并没有使用class封装,大家可以比较一下二者的差异.

    好了,我们的一周学会Mootools1.4到此也该画一个句号了.

    如果感觉还是有所不足,推荐你阅读一下下边的几篇文章相信会对你有所帮助的
  • 相关阅读:
    福利贴——爬取美女图片的Java爬虫小程序代码
    select多选 multiple的使用
    Android笔记---点击事件的四种写法
    二叉排序树的插入与删除
    hdu 5269 ZYB loves Xor I &amp;&amp; BestCoder Round #44
    linux 下同步异步,堵塞非堵塞的一些想法
    JavaScript编程随笔
    《从零開始学Swift》学习笔记(Day 51)——扩展构造函数
    What&#39;s Wrong With Hue Oozie Editor?
    2015.7个人反思小结以及兴许规划
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/5368805.html
走看看 - 开发者的网上家园