MooTools教程

当前位置:首页>Mootools>MooTools教程>mootools框架教程(2) -Core解析及测试实例

mootools框架教程(2) -Core解析及测试实例

时间:2015-07-13 14:30来源:网络整理 作者:KKWL 点击:
导言:mootools框架教程(2) -Core篇:方法完全解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。

 

  • 导言:mootools框架教程(2) -Core篇:方法完全解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

    说明: Core 类中的核心库是Moo.js和Utility.js,Moo.js里包含了实现OO的基础类,Utility.js提供了最常用的工具函数的封装。

    ---------------------------Moo.js-------------------------------------

    1.mootools使用如下形式构建对象:

    var Cat  = new Class({    initialize: function(name){        this.name = name;    }});var cat = new Cat ('kitty');alert(cat.name);2.Class进行继承,mootools是这样做的:

    var Animal = new Class({     initialize: function(name){      this.name = name;    } });  var Cat = Animal.extend({     initialize: function(name,age){      this.parent(name); //调用Animal的initialize方法      this.age = age;    } });3.Class.implement方法对已经定义好的类进行扩展

    (例如添加方法),用法如下:

    var Person = new Class({      initialize: function(name){         this.name = name;     }   });  Person.implement({    initialize: function(name,age){         this.name = name;         this.age = age;      },      myAction: function(){          alert(this.name+'--'+this.age);      }    });     var p = new Person('zarknight',24);     p.myAction();mootools对Object扩展了一个extend方法,它有两个参数,作用是复制第二个参数对象的所有属性到第一参数对象中去,同名属性将覆盖为第二个参数中的相应属性:

    var firstOb = {       'name': 'John',       'lastName': 'Doe'};   var secondOb = {       'age': '20',       'sex': 'male',       'lastName': 'Dorian'   };   Object.extend(firstOb, secondOb);   //firstOb将变成:   {      'name': 'John',      'lastName': 'Dorian',      'age': '20',      'sex': 'male'   };---------------------------Moo.js-------------------------------------

    4.$type

    作用:基本上是对typeof的扩展,返回输入参数的类型

    例子:

    var x=$type("abcdefg");

    返回值:

    'element'-DOM
    'textnode'-DOM文本节点
    'whitespace'-DOM空白节点
    'array'-数组
    'object'-对象
    'string'-字符串
     'number'-数字
     'boolean'-布尔型
    'function'-函数

    false-如果是未定义或则不是以上列出的类型

    5.$chk

    作用:如果输入参数是数值(包括0)或是对象(不为null或undefined),则返回  true,否则返回false

    例子:

    var x = $chk("abcde"); //true
    var y = $chk(0); //true
    var z = $(null); //false

    6.$pick

    作用:如果第一个参数对象存在(如果为null则也认为为空对象,即不存在的对象),则返回这个对象;否则返回第二个参数对象

    例子:

    var x = $pick("openfdc","zarknight"); //openfdc
    var y = $pick(null,"zarknight"); //zarknight
    var z = $pick(1, 2); //1

    7.$random

    作用:产生一个介于(包括)指定的最大范围值和最小范围值之间的随机整数

    例子:

    var x=$random(1,100); //产生一个1~100之间的随机整数

    8.$clear

    作用:其实就是clearTimeout和clearInterval都调用一遍

    例子:

    var timer1 = setInterval("abc()",1000);
    timer1 = $clear(timer1);
    var timer2 = aFunc.delay(1000); //delay是mootools对Function的扩展,

    具体用法看mootools文档或后文...

    timer2=$clear(timer2);

    补充说明:

    mootools往window对象里的这些属性,用来作为检测浏览器类型的工具:

    window.ie
    window.ie6
    window.ie7
    window.khtml
    window.gecko

 

  • 导言:mootools框架教程(2) -Core篇:主要方法测试实例。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title>mootools-Core</title>
       <script language="javascript" type="text/javascript" src="mootools-1.2-core-jm.js"></script>
      <script language="javascript" type="text/javascript">
      {
        //1. mootools使用如下形式构建对象:
        var Cat = new Class({
          initialize: function(name){
            this.name = name;
          }
        });
        //测试实例
        var cat = new Cat ('kitty');
        alert(cat.name);
        //Class进行继承,mootools是这样做的:
         var Animal = new Class({
         initialize: function(name){
         this.name = name;
         }
         });
         //继承
         var Cat2 = Animal.extend({
         initialize: function(name,age){
         this.parent(name); //调用Animal的initialize方法
         this.age = age;
         }
        });
        //测试实例
        var exCat = new Cat2 ('kitty',20);
        alert(exCat.name+'--'+exCat.age);

        //扩展
         var Person = new Class({
         initialize: function(name){
           this.name = name;
         }
        });
        Person.implement({
        initialize: function(name,age){
           this.name = name;
           this.age = age;
          },
          myAction: function(){
            alert(this.name+'--'+this.age);
          }
        });
        //测试实例
        var p = new Person('zarknight',24);
        p.myAction();
        //6. $pick
        var x = $pick("openfdc","zarknight"); //openfdc
        alert(x);
        var y = $pick(null,"zarknight");  //zarknight
        alert(y);
        var z = $pick(1, 2);  //1
        alert(z);
      }
      </script>
    </head>
    <body>
      <form runat="server">
      <div>
      </div>
      </form>
    </body>
    </html>

------分隔线----------------------------