发布于 2016-12-16 22:14:13 | 59 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

MooTools JavaScript WEB应用框架

MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。 它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。 它提供了一个比普通js更面向对象的documentAPI。

---

在今天的教程中，我们将主要学习一下MooTools中类的实现和继承（扩展）。
Fdream注：原文好像少了一部分，因此我自作主张地补充了下面这一段及BaseClass的代码。
在今天的教程中，我们将主要学习一下MooTools中类的实现和继承（扩展）。通过实现和继承，我们可以在子类中使用父类的方法，而不需要再重新声明和实现相同的方法。MooTools中的Class类可以帮助我们轻松地做到这一点。首先，我们定一个基类（base class）。
参考代码：

 
var BaseClass = new Class({ 
// 定义一个方法testFunction 
// 这个方法弹出一个对话框 
testFunction : function(){ 
alert('This function is defined in BaseClass'); 
} 
}); 

现在，我们已经有了一个基类（base class），我们可以通过创建一个新类来实现它从而使用它的全部功能。注意，在下面的例子中，我们的新类没有做任何事情，而只是实现了基类BaseClass。
参考代码：

 
// 创建一个名叫ImplementingClass的类 
var ImplementingClass = new Class({ 
// 我所做的全部事情就是实现Baseclass 
Implements : BaseClass 
}); 

现在，我们就可以创建一个ImplementingClass的实例，并使用在BaseClass中定义的方法。
参考代码：

 
var demo_one = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ImplementingClass(); 
// 调用在BaseClass中定义的testFunction 
test_class.testFunction(); 
} 

demo_one()
你也可以对基类中的变量和初始化函数（构造函数）做同样的事情。如果你在实施类（实现基类的类）中声明了的话，每个你在基类中定义的东西就将被转移到实施类中。
注意：从现在开始，我们下面所有的示例中将全部使用下面这个版本的BaseClass。
参考代码：

 
var BaseClass = new Class({ 
// 把参数赋值给这个类中的inputVariable变量 
initialize: function(input){ 
this.inputVariable = input; 
}, 
// 显示变量inputVariable的值 
testFunction : function(){ 
alert('BaseClass.testFunction() : ' + this.inputVariable); 
}, 
// 为这个类的所有实例定义一个内部变量 
definedVariable : "Defined in BaseClass", 
}); 
var ImplementingClass = new Class({ 
// 重复一遍： 
// 这里我们做的全部事情就只是实现BaseClass 
Implements : BaseClass 
}); 

下面的示例表明：初始化程序、函数调用和变量都可以被访问到，就像它们是属于这个实施类的。
参考代码：

 
var demo_two = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ImplementingClass('this is the input value'); 
// 调用testFunction()（在BaseClass中定义的） 
test_class.testFunction(); 
// 显示变量definedVariable的值 
alert('test_class.testVariable : ' + test_class.definedVariable); 
} 

demo_two()
一旦你实现了一个类，你可以添加任何你想要的功能到你的实施类定义中。
参考代码：

 
var ImplementingClass = new Class({ 
Implements : BaseClass, 
// 下面的这些功能都在BaseClass中定义了 
definedVariable : "Defined in ImplementingClass", 
testFunction : function(){ 
alert('This function is also defined in BaseClass'); 
}, 
// 下面的这些都没有在BaseClass中定义 
anotherDefinedVariable : "Also Defined in ImplementingClass", 
anotherTestFunction : function(){ 
alert('This function is defined in ImplementingClass'); 
} 
}); 

请注意，我们在实施类中重新定义了testFunction和definedVariable，就像我们添加新的函数和变量一样。特别需要注意的是：如果你想在实施类中定义一个已经在基类中定义了的函数或者变量，基类中的定义将会取代实施类中的定义。如果不明白，看看下面的例子就知道了。
参考代码：

 
var demo_three = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ImplementingClass('this is the input value'); 
// (执行BaseClass中定义的方法） 
test_class.testFunction(); 
// 显示变量definedVariable的值（BaseClass中定义的值） 
alert('test_class.testVariable : ' + test_class.definedVariable); 
// （ImplementingClass中定义的方法） 
test_class.anotherTestFunction(); 
// 显示变量anotherDefinedVariable的值（ImplementingClass中定义的值） 
alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable); 
} 

demo_three()
Extends（扩展）
如果你想要覆盖基类中定义的方法和变量，你可以使用Extends。简单地把上面代码中的“Implements”替换成“Extends”就可以了。
参考代码：

 
var ExtendingClass = new Class({ 
// 注意这里用Extends替代了Implements 
Extends : BaseClass, 
// 下面的这些都在BaseClass中定义了 
// 但是我们用extend替代了implements 
// 这将覆盖在BaseClass中的定义 
definedVariable : "Defined in ImplementingClass", 
testFunction : function(){ 
alert('This function is also defined in BaseClass'); 
} 
}); 
var demo_four = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ExtendingClass('this is the input value'); 
// 调用testFunction()（同时在BaseClass和ExtendingClass中都有定义） 
test_class.testFunction(); 
// 显示变量definedVariable的值（同时在BaseClass和ExtendingClass中都有定义） 
alert('test_class.definedVariable : ' + test_class.definedVariable); 
} 

demo_four()
使用extends的另外一个有用的功能是，它提供了一个功能：在覆盖基类的初始化方法时，你仍然可以调用基类中的初始化方法。因此，如果你在基类中定义了一个这样的初始化方法：
参考代码：

 
initialize : function(){ 
alert('base class'); 
} 

然后，在扩展类中定义了下面这样一个初始化方法，那么将会弹出两个提示分别显示“base class”和“extending class”。
参考代码：

 
initialize : function(){ 
// 调用父类的构造函数 
this.parent(); 
alert('extending class'); 
} 

如果父类的初始化函数需要参数，请一定要确保在这个初始化函数中又相同的输入参数并传递给父类的构造函数。在下面的示例中，请注意我们没有给input指定任何值——我们只是把它传递给了父类的构造函数，它会自动管理好的。
参考代码：

 
var ExtendingClass = new Class({ 
// 重复一遍：我们在使用扩展方法，而不是实现 
Extends : BaseClass, 
initialize: function(input){ 
// 通过调用this.parent来执行父类的初始化方法 
this.parent(input); 
// 这样我们可以在初始化方法中做一些其他的事情 
// 而不用完全覆盖父类的方法 
this.otherVariable = "Original Input Was : " + input; 
} 
}); 
var demo_five = function(){ 
// 创建我们的扩展类实例 
var test_class = new ExtendingClass('this is the input value'); 
// 调用testFunction 
test_class.testFunction(); 
// 显示变量otherVariable的值 
alert("test_class.otherVariable : " + test_class.otherVariable); 
} 

demo_five()
.implement()方法
你不仅可以使用implements和extends来扩展你的类定义，你还可以使用它们原有的类来一次添加一个功能。在下面的这个示例中，我们将使用一个简单的计算器类（calculator），定义这个类的时候，我们只给了它一个对两个数字做加法运算和一个做减法运算的功能。
参考代码：

 
var Calculator = new Class({ 
// 在初始化的时候指定两个数字 
initialize: function(first_number, second_number){ 
this.first = first_number; 
this.second = second_number; 
}, 
// 把两个数字相加 
// 并返回结果 
add : function(){ 
result = this.first + this.second; 
alert(result); 
}, 
// 把两个数字相减 
// 并返回结果 
subtract : function(){ 
result = this.first - this.second; 
alert(result); 
} 
}); 

如果你只是要对数字做加法或者减法运算，这一切看起来都很好，但是，如果你要对它们做乘法怎么办呢？使用.implement();方法，我们可以给这个类添加一个功能，就像我们已经创建了另外一个以Calculator类为基类的类一样。
参考代码：

 
var demo_six = function(){ 
// 为Calculator类实现 
// 实现一个方法 
Calculator.implement({ 
// 把两个数字相乘 
// 并返回结果 
multiply : function(){ 
result = this.first * this.second; 
alert(result); 
} 
}); 
// 建立一个Calculator类实例 
var myCalculator = new Calculator(100, 50); 
// 调用multiply方法 
myCalculator.multiply(); 
} 

demo_six()
在类教程的第一部分中，我们使用了print_r这个函数来调试javascript。使用implement方法，我们可以让它非常轻松地打印出出一个类中的变量值，只要在Calculator中实现这个方法就行了。
参考代码：

 
var demo_seven = function(){ 
// 为Calculator类实现一个方法 
// 用来打印这个类里面的内容 
Calculator.implement({ 
show_class : function(){ 
alert(print_r(this, true)); 
} 
}); 
// 建立一个Calculator类实例 
var myCalculator = new Calculator(100, 50); 
// 显示类的详细信息 
myCalculator.show_class(); 
} 

demo_seven()
代码示例
虽然很简洁，不过这对于相对比较简单的计算器这个类来说不是一个特别有用的功能。但是，由于MooTools里面的大多数对象都是用相同的方式建立的类，因此我们可以用这种方式来扩充MooTools的类，提供更多功能。下面的例子实现了一个功能，它可以显示任何你想看的HTML的内容结构。这个功能现在就被自动地添加到了任何与你交互的HTML元素，因此你可以给你的元素添加一个showStructure元素的完整描述。
参考代码：

 
var demo_eight = function(){ 
Element.implement({ 
showStructure : function(){ 
var structure = '<pre>' + print_r(this, true) + '</pre>'; 
// 打开一个弹出窗口 
newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes'); 
// 把内容写入到弹出窗口中 
newWindow.document.write(structure); 
} 
}); 
$('demo_eight').showStructure(); 
} 

注意：要让这个示例能正确显示，你需要先允许该页面弹出窗口。

更多学习

下载一个包含你开始所需要的所有东西的zip包

MooTools Class文档

一些非常好的关于更好地利用MooTools类的讨论