web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码）
2016-12-03 14:47
633 查看
web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码）
常用 OOP 术语为最大限度地利用本文，您至少应该熟悉面向对象编程及其概念。下面简要描述讨论面向对象开发时使用的一些常用术语。需要说明的是，并非所有 OOP 类型都包含每个概念；例如，基于原型的对象语言（比如 JavaScript）中就没有 “类”。
类
在基于类的面向对象开发中，一个类定义组成一个对象的不同属性和函数。类定义用于生成对象的模板，因此它们应该定义这些对象能够遵守的公共属性和动作。类通常由成员变量和方法构成。
成员变量
对象的成员变量就是该对象的属性。在前面提到的汽车示例中，这些属性包括该汽车的 manufacturermodel、color、cubic capacity，等等。
方法
方法是对象能够执行的动作。例如，一辆汽车能够 accelerate、brake、turn，等等。通常，方法将修改成员变量的值。例如，当一个 car 对象使用 accelerate 方法加速时，它的当前速度属性将增加。许多对象都有一个称为 constructor 的方法，该方法在对象创建后立即被调用。
实例或对象
实例或对象即实际对象本身，而不是用于定义对象的模板。例如，您可能有一个名为 myCar 的对象，它拥有一个汽车模板的属性和方法。在一个对象的实例中，属性将实际拥有值。例如，myCar 可能拥有一个值为 silver 的 color 属性，一个值为 2500 的 cubic capacity 属性。一个对象的属性的当前值称为该对象的状态，该状态可以在该对象的整个生命周期内变化。
继承性
在基于类的 OOP 中，继承性是这样一个过程：子类继承其父类的成员变量和方法。除了继承这些属性和动作之外，子类可以定义自己的成员变量和方法，并提供父类的属性的默认值。例如，您可能有一个 FourByFour 类，它是 Car 类的一个子类。这个子类可以将其父类的 drivetrain 属性的默认值设置为 4WD（四轮驱动）。另外，它可以定义另一个名为 transfer case 的属性，该属性仅适用 4x4 汽车；并定义一个方法，该方法允许您更改其他普通车辆上没有的低速档（low range gear）。
封装
在基于类的 OOP 中，成员变量通常被定义为私有变量，以免被从类本身的范围外访问或修改。有一些称为 “修改器” 的特殊方法，它们允许您定义可以检索或修改类中的私有成员函数的值的方法。这些方法（通常称为 getters 和 setters）允许程序员使用隐藏的信息，使应用程序和其他类只能访问某些属性。这种技术通常称为 “封装”。
抽象
抽象是通过只定义那些在您对象的当前上下文中对该对象很重要的属性和方法来减小对象的复杂性的过程。例如，当您定义一个 Car 类时，可以通过定义一辆汽车拥有的、对其他类型的车辆（比如有蓬货车、卡车、摩托车等）也常见的所有属性，来将这个类进一步抽象为一个 Vehicle 类。这样，Car 类将从 Vehicle 类继承这些属性，就像一个 Motorcycle 类或 Van 类那样。
多态性
在 OOP 上下文中，多态性意味着可以从它的超类继承方法，而不必提供所有方法的相同实现。例如，您有两个 Car 类的两个子类，一个用于自动挡汽车（我们称其为 ATCar），另一个用于手动挡汽车（我们称其为 MTCar）。所有 Car 对象都能加速，因此 ATCar 和 MTCar 都将从它们的父类继承 accelerate 方法。但是，在一个 ATCar 中，当引擎达到某个 RPM 级别时，您的 accelerate 方法将自动调用 change gear 方法。结果，您在 ATCar 子类中覆盖了 accelerate 方法的父类定义，而在 MTCar 中，该方法就是子类从 Car 类继承而来的方法。
本文并不是面向对象编程的一个全面指南。如果您不熟悉上述概念，那么在继续阅读本文之前，有必要跳到 参考资料 部分阅读更多关于 OOP 的资料。
纯 JavaScript 中基本的面向对象示例：
function Car() {}
var myCar = new Car();
console.log(myCar);创建一个实例化对象Car，使用new定义一个新的实例myCar来加载这个Car对象。
function Car() { }
Car.prototype.current_speed = 0;
var myCar = new Car();
console.log(myCar);附加一个成员变量，输出Car {current_speed: 0}
prototype==>原型
加入相应的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>面向对象</title>
<script type="text/javascript">
function Car (){
Car.prototype.current_speed=0;
Car.prototype.accelerate=function(increment){
this.current_speed += increment;
}
}
var myCar=new Car();
myCar.accelerate(30);
myCar.accelerate(20);
console.log(myCar);
</script>
</head>
<body>
</body>
</html>输出：Car {current_speed: 50, accelerate: function}
添加一个构造器函数体：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>面向对象</title>
<script type="text/javascript">
function Car(reg_no){
this.reg_no=reg_no;
console.log('Car with registration no.'+this.reg_no+' create.');
}//添加一个构造函数
Car.prototype.reg_no = '';//变量名
Car.prototype.current_speed =0 ;//变量名
Car.prototype.accelerate=function(increment){
this.current_speed += increment;//方法
}
var myCar=new Car('10C500');
myCar.accelerate(30);
myCar.accelerate(20);
console.log(myCar.current_speed);
</script>
</head>
<body>
</body>
</html>完整的Car原型，综合：
function Car(reg_no) {
this.reg_no = reg_no;
}
Car.prototype.reg_no = '';
Car.prototype.current_speed = 0;
Car.prototype.current_gear = 0;
Car.prototype.accelerate = function(increment) {
this.current_speed += increment;
}
Car.prototype.decelerate = function(decrement) {
this.current_speed -= decrement;
}
Car.prototype.increaseGear = function() {
this.current_gear++;
}
Car.prototype.decreaseGear = function() {
this.current_gear--;
}使用Dojo模拟基于类的OOP：
使用Dojo创建类使用（dojo.declare）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>面向对象</title>
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.declare("Car",null,{
});
var myCar=new Car();
console.log(myCar);
</script>
</head>
<body>
</body>
</html>更为完整的构造函数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>面向对象</title>
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.declare("Car",null,{
reg_no:"",
current_speed:0,
current_gear:0,
constructor:function(reg_no){
this.reg_no=reg_no;
},
accelerate:function(increment){
this.current_speed += increment;
},
decelerate:function(decrement){
this.current_speed -= decrement;
},
increaseGear:function(){
this.current_gear++;
},
decreseGear:function(){
this.current_gear--;
}
});
var myCar=new Car("10C500");
myCar.accelerate(30);
myCar.accelerate(20);
myCar.decelerate(5);
console.log(myCar.reg_no+" travelling at "+myCar.current_speed+" mph.");
</script>
</head>
<body>
</body>
</html>继承性和多继承性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>面向对象</title>
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.declare("Car", null, {//创建最为基础的Car类
reg_no: ""
,current_speed: 0
,current_gear: 0
,constructor: function(reg_no) {
this.reg_no = reg_no;
// 特殊的方法 在类实例化的时候会执行该方法
}
,accelerate: function(increment) {
this.current_speed += increment;
}
,decelerate: function(decrement) {
this.current_speed -= decrement;
}
,increaseGear: function() {
this.current_gear++;
}
,decreaseGear: function() {
this.current_gear--;
}
});
dojo.declare("ATCar",Car,{//创建ATCar类用以继承Car类
/*
相当于有以下变量及方法
reg_no: ""
,current_speed: 0
,current_gear: 0
,constructor: function(reg_no) {
this.reg_no = reg_no;
// 特殊的方法 在类实例化的时候会执行该方法
}
,accelerate: function(increment) {
this.current_speed += increment;
}//同名父类的这方法被覆盖了
,decelerate: function(decrement) {
this.current_speed -= decrement;
}//同名父类的这方法被覆盖了
,increaseGear: function() {
this.current_gear++;
}
,decreaseGear: function() {
this.current_gear--;
}
*/
accelerate:function(increment){
this.inherited(arguments);//通过这个方法重新调用被覆盖的父类
if(increment >= 10){
this.increaseGear();
}
}
,decelerate:function(decrement){
this.inherited(arguments);
if(decrement >= 0){
this.decreaseGear();
}
}
});
var myCar=new ATCar('10CX500');//myCar创建一个新的ATCar，ATCar继承Car类
myCar.accelerate(30);
myCar.accelerate(20);
myCar.decelerate(5);
console.log(myCar.reg_no+" travelling at "+myCar.current_speed+" mph in gear "+myCar.current_gear);
//浏览器中输出：10CX500 travelling at 45 mph in gear 1
</script>
</head>
<body>
</body>
</html>说明：
1.constructor方法是一个特殊的方法。constructor方法会在类实例化的时候调用，并在新对象的作用范围中执行。这表示，this对象指向实例而不是原来的类。constructor方法接受任意数目的实例化参数。
2.this.inherited(arguments)：虽然完全覆盖父类的方法很有用，但有时，继承链上的每个父类的构造函数都应该被执行，以保持原来的功能。这就是this.inherited(arguments)所带来的便利。this.inherited(arguments)会调用父类中的同名方法。
dojo 中的多继承性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>dojo的多继承性</title>
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.declare("Phone",null,{//创建Phone类
phone_number:""
,minutes_remaning:0
,constructor:function(properties){//构造函数
this.phone_number=properties.phone_number;
this.minutes_remaning=properties.minutes_remaning;
console.log("Phone "+this.phone_number+" powered on. You have "+this.minutes_remaning+" minute(s) remaining.");
}
});
dojo.declare("MediaPlayer",null,{//创建MediaPlayer类
disk_space:0
,songs:[]
,constructor:function(properties){
this.disk_space=properties.disk_space;
this.songs=properties.songs;
console.log("Media Player powered on. You have "+this.songs.length+" songs, with"+this.disk_space+" GB free space left.");
}
});
dojo.declare("Smartphone",[Phone,MediaPlayer],{//继承Phone、MediaPlayer类
phone_id:""
,constructor:function(properties){
this.phone_id=properties.phone_id;
console.log("Smartphone ID "+this.phone_id+" boot up complete.");
}
});
var songs=[
{artist:"U2",title:"Vertigo"}
,{artist:"Coldplay",title:"Yellow"}
];
var myPhone=new Smartphone({
phone_number:"(555) 123-456"
,minutes_remaning:60
,disk_space:2.5
,songs:songs
,phone_id:"435434677724"
});
console.log(myPhone);
</script>
</head>
<body>
</body>
</html>输出：Phone (555) 123-456 powered on. You have 60 minute(s) remaining. VM69:8
Media Player powered on. You have 2 songs, with2.5 GB free space left. VM69:18
Smartphone ID 435434677724 boot up complete.
改进多继承性（dojo.mixin）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>改进多继承性（dojo.mixin）</title>
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
var objA={a:1,b:2};
var objB={b:3,c:4};
dojo.mixin(objA,objB);
console.log(objA);
</script>
</head>
<body>
</body>
</html>输出：Object {a: 1, b: 3, c: 4}
dojo.mixin用于扩展一个实例对象，如
var obj = {a:1,b:2}
dojo.mixin(obj,{c:3,d:4})
那么现在的obj为{a:1,b:2,c:3,d:4}
如果objA和objB之间有重复的变量，则进行覆盖。
dojo.mixin的主要作用：
this.phone_number = properties.phone_number;
this.minutes_remaining = properties.minutes_remaining;
可以使用dojo.mixin(this, properties);把这里面的参数全部串联起来，方便快捷。
Dojo 中的打包和模块化开发（dojo.provide、dojo.require ）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>打包和模块化开发</title>
<script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
//把一个Car类打包
dojo.provide("com.ibm.developerworks.dojoseries.Car");
dojo.declare("com.ibm.developerworks.dojoseries.Car",null,{
//Car.js 文件应该存储在相对路径 com/ibm/developerworks/dojoseries/Car.js 中。
});
dojo.provide("com.ibm.developerworks.dojoseries.ATCar");
dojo.require("com.ibm.developerworks.dojoseries.Car");
dojo.declare("com.ibm.developerworks.dojoseries.ATCar","com.ibm.developerworks.dojoseries.Car",{
//这个特殊的类将被存储在相对路径 com/ibm/develoeprworks/dojoseries/ATCar.js 中。然后使用 dojo.require 来加载 Car 类 — 使用它的完整包路径。最后声明这个子类，将完整路径作为第二个参数传递给其父类。
});
</script>
</head>
<body>
</body>
</html>相关学习：
web前端之dojo实际应用及开发六：页面布局（附有源码）
web前端之dojo实际应用及开发五：丰富的用户界面（附有源码）
web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码）
web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码）
web前端之dojo实际应用及开发二：事件处理（附有源码）
web前端之dojo实际应用及开发一：开始dojo（附有源码）
web前端之Dojo与jQuery综合比较分析
web前端之dojo(用javascript语言实现的开源DHTML工具包)
部分内容
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端之dojo实际应用及开发二：事件处理（附有源码）
- web前端之dojo实际应用及开发六：页面布局（附有源码）
- web前端之dojo实际应用及开发一：开始dojo（附有源码）
- web前端之dojo实际应用及开发五：丰富的用户界面（附有源码）
- web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码）
- web前端开发笔记：JavaScript面向对象总结
- 关于“基于消息驱动的面向对象通用C/S应用框架的源码”
- 面向对象与面向过程在软件开发中的应用
- js面向对象开发互联网机顶盒应用头端之四
- 使用 Watir 加速面向 Web 应用的自动化测试程序的开发
- Portal-Basic Java Web 应用开发框架 v2.6.1（源码、示例及文档）
- Portal-Basic Java Web 应用开发框架 v2.6.1（源码、示例及文档）
- js面向对象开发互联网机顶盒应用头端之五
- 面向对象思想在数据库开发方面的应用
- Portal-Basic Java Web 应用开发框架 v2.6.1（源码、示例及文档）
- Portal-Basic Java Web 应用开发框架 v2.6.2 发布（源码、示例及文档）
- Portal-Basic Java Web 应用开发框架（v2.5.4 - 源码、示例及文档可在 Google Code 下载）
- 使用 Watir 加速面向 Web 应用的自动化测试程序的开发
- Portal-Basic Java Web 应用开发框架（v2.5.4 - 源码、示例及文档可在 Google Code 下载）
- 使用 Dojo 开发支持 Accessibility 的 Web 应用