Mootools 1.2教程(18)——Class 类(第一部分)

作者:Fdream 来源:Fdream博客 时间:2008-12-19 12:45:00 

原文地址:30 Days of Mootools 1.2 Tutorials - Day 18 - Classes part I

Class(类)(第一部分)

阅读上一讲:Mootools 1.2教程(17)——手风琴插件

今天我们将讲一下用MooTools来创建和使用类的一些基本知识。

简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能。在一个内容牵涉较多的项目中,类会显得难以置信的有用。

变量

在前面一系列的课程中,我们已经学习过了Hash对象中键值对(key/value pair)的使用方式,因此,下面的这个例子中创建了一个类,它只包含了一些变量,你看起来可能会觉得非常的熟悉:

参考代码: 

// 创建一个名为class_one的类 
// 包含两个内部变量 
var Class_one = new Class({ 
    variable_one : "I'm First", 
    variable_two : "I'm Second" 
});


类似地,你可以通过类似访问hash中的变量的方式来访问其中的变量,注意一下,在下面的代码中,我们创建了一个我们在上面定义的Class_one类的实例。

参考代码:  

var run_demo_one = function(){ 
    // 创建类Class_one的一个实例,名称为demo_1 
    var demo_1 = new Class_one(); 
    // 显示demo_1中的变量 
    alert( demo_1.variable_one ); 
    alert( demo_1.variable_two );

    

方法/函数

方法是指一个指定的类中的函数(通俗地说就是一个类中的函数就叫做方法,换了个叫法而已)。这些方法必须通过这个类的实例来调用,而类本身不能调用它们。你可以像定义一个变量来定义一个方法,不同的是你需要给它指定一个静态的值,给它指定一个匿名函数:

参考代码: 

var Class_two = new Class({ 
    variable_one : "I'm First", 
    variable_two : "I'm Second", 
    function_one : function(){ 
        alert('First Value : ' + this.variable_one); 
        }, 
    function_two : function(){ 
        alert('Second Value : ' + this.variable_two); 
    } 
});


注意一下上面例子中的关键字this的使用。由于在上面的方法中操作的变量都是类内部的变量,因此你需要通过使用关键字this来访问这些变量,否则你将只能得到一个undefined值。

参考代码: 

// 正确 
working_method : function(){ 
    alert('First Value : ' + this.variable_one); 
}, 
// 错误 
broken_method : function(){ 
    alert('Second Value : ' + variable_two); 
}


调用新创建的类中的方法就像访问那些类的变量一样。

参考代码: 

var run_demo_2 = function(){ 
    // 实例化一个类class_two 
    var demo_2 = new Class_two(); 
    // 调用function_one 
    demo_2.function_one(); 
    // 调用function_two 
    demo_2.function_two(); 
}

 

标签:Mootools,类,教程,javascript
0
投稿

猜你喜欢

  • Ext.js源码研读总结

    2009-03-04 12:06:00
  • CSS框架的利与弊

    2007-12-06 12:59:00
  • mysql存储过程学习总结

    2011-07-04 12:03:53
  • 记录密码的asp代码

    2009-11-02 10:50:00
  • 实例演练ASP+XML编程

    2007-10-11 13:53:00
  • CSS教程:关于网页图片的属性的介绍

    2008-10-31 12:02:00
  • 安装MySQL错误归档处理

    2008-12-22 14:50:00
  • 彻底弄懂CSS盒子模式之二(导航栏实例)

    2007-05-11 16:52:00
  • XML卷之实战锦囊(1):动态排序

    2008-09-05 17:20:00
  • SQL Server日志文件总结及日志满的处理

    2009-03-25 16:17:00
  • MySQL查询优化

    2009-03-09 14:41:00
  • 亚马逊购物用户体验分析(三)

    2009-10-25 12:53:00
  • 实例讲解如何利用crontab定时备份MySQL

    2009-01-04 13:06:00
  • CSS3变换入门

    2010-01-30 13:29:00
  • BOF、EOF 属性

    2009-05-11 12:37:00
  • SQL查询效率-100w数据查询只要1秒

    2008-08-20 18:25:00
  • 教你如何利用SQL Server保护数据

    2010-06-07 14:18:00
  • 英文版面设计的8个禁忌

    2009-10-14 20:42:00
  • 蚁群算法js版

    2008-10-08 10:15:00
  • PHP curl get post 请求的封装函数示例【get、post、put、delete等请求类型】

    2023-05-25 01:24:18
  • asp之家 网络编程 m.aspxhome.com