网络编程
位置:首页>> 网络编程>> JavaScript>> Mootools 1.2教程(18)——Class 类(第一部分)(3)

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

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

标签:Mootools,类,教程,javascript


实现选项功能

当创建类的时候,给类中的一些变量设置一些默认值会非常有用,如果用户没有提供初始输入的话。你可以手动地在初始化方法中设置这些变量,检查每一个输入来看用户是不是提供了相应的值,然后替换相应的默认值。或者,你也可以使用MooTools中Class.extras提供的Options类来实现。

给你的类增加一个选项功能非常简单,就像给类添加一个其他的键值对一样:

参考代码:  

var Myclass = new Class({ 
    Implements: Options



首先不要太着急实现选项的细节问题,我们会在后面的教程中更深入的学习。现在,我们已经拥有一个有选项功能的类了,我们还需要做的就是定义一些默认的选项。和其他的所有东西一样,只需要添加一些需要初始化的键值对就可以了。与定义单个值不一样的是,你需要像下面这样定义一组键值对集合:

参考代码:  

var Myclass = new Class({ 
    Implements: Options, 
    options: { 
        option_one : "First Option", 
        option_two : "Second Option" 
    }



现在我们就有了这些默认的集合,我们还需要提供一个方式来供用户在初始化这个类的时候覆盖这些默认值。你所要做的工作就是在你的初始化函数中增加一行新的代码,而Options类会完成其余的工作:

参考代码: 

var Myclass = new Class({ 
    Implements: Options, 
    options: { 
        option_one : "First Default Option", 
        option_two : "Second Default Option" 
    } 
    initialize: function(options){ 
        this.setOptions(options); 
    } 
})


一旦这个完成以后,你就可以通过传递一组键值对来覆盖任何默认选项:

参考代码: 

// 覆盖所有的默认选项 
var class_instance = new Myclass({ 
    options_one : "Override First Option",   
    options_two : "Override Second Option" 
    }); 

// 覆盖其中的一个默认选项 
var class_instance = new Myclass({ 
    options_two : "Override Second Option" 
})


注意一下初始化函数中的setOptions方法。这是Options类中提供的一个方法,可以让你在实例化一个类的时候设置选项。

参考代码: 

var class_instance = new Myclass(); 
// 设置第一个选项 



一旦设置了选项,你就可以通过变量options来访问它们。

参考代码: 

var class_instance = new Myclass(); 
// 取得第一个选项的值 
var class_option = class_instance.options.options_one; 
// 变量class_option现在的值就为"First Default Option"了



如果你想在类的内部访问这个选项,请使用this语句:

参考代码: 

var Myclass = new Class({ 
    Implements: Options, 
    options: { 
        option_one : "First Default Option", 
        option_two : "Second Default Option" 
    } 
    test : function(){ 
        // 注意我们使用this关键字来 
        // 引用这个类 
        alert(this.option_two); 
    } 
}); 

var class_instance = new Myclass(); 
// 将弹出一个对话框,显示"Second Default Option" 
class_instance.test();



把这些东西组合成一个类,看起来就是这样的:

参考代码: 

var Class_four = new Class({     
    Implements: Options, 
    options: { 
        option_one : "Default Value For First Option", 
        option_two : "Default Value For Second Option", 
    }, 
    initialize: function(options){ 
        this.setOptions(options); 
    },    
    show_options : function(){ 
        alert(this.options.option_one + "\n" + this.options.option_two); 
    }, 
}); 

var run_demo_4 = function ){ 
    var demo_4 = new Class_four({ 
        option_one : "New Value" 
        }); 
    demo_4.show_options(); 


var run_demo_5 = function(){ 
    var demo_5 = new Class_four(); 
    demo_5.show_options(); 
    demo_5.setOptions({option_two : "New Value"}); 
    demo_5.show_options(); 


// 创建一个类class_four的实例 
// 并指定一个名叫new_option的新选项 
var run_demo_6 = function(){ 
    var demo_6 = new Class_four({new_option : "This is a new option"}); 
    demo_6.show_options(); 
}

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com