开发学院网页设计 JavaScript 用面向对象的方式封装javascript代码阅读

用面向对象的方式封装javascript代码

　2008-11-14 20:02:19　来源：WEB开发网　　　

核心提示：用面向对象的方式封装javascript 代码 Javascript 虽然是弱类型检查的脚本语言，可是它也有很多面向对象的特性，用面向对象的方式封装javascript代码，因此我们可以模仿java语言的抽象、继承和封装来处理javascript 代码，还是以例子来进行说明，在这里给出3个js 和一个用于测试

用面向对象的方式封装javascript 代码

Javascript 虽然是弱类型检查的脚本语言，可是它也有很多面向对象的特性，因此我们可以模仿java语言的抽象、继承和封装来处理javascript 代码。

还是以例子来进行说明。在这里给出3个js 和一个用于测试的 html。

1、Animal.js 的内容

2、Bird.js 的内容

3、People.js 的内容

4、Test.html 的内容

===== 1 Animal.js 的内容 ===========

// * * * * * * * * * * * * * * * * * * * *
// *　　　 Animal
// * desc:定义一个超类
// * time：2008-11-11
// * author：dxl
// *
// * Dependencies: null
// * * * * * * * * * * * * * * * * * * * /

//定义静态变量
Animal.CREATOR = "上帝";
Animal.HOME = "地球";

//构造器
function Animal(){}

//构造器
function Animal(weight){
//初始化成员变量
　 this.weight = weight;
}

//定义成员变量
Animal.PRototype.weight = 0;//重量

//定义行为方法(公共方法)
Animal.prototype.eat = function (args){
return "吃食";
};
//定义行为方法(公共方法)
Animal.prototype.move = function (args){
return "行";
};

//定义行为方法(私有方法)
Animal.prototype._animalPrivateMethod = function (args){
　 return args.length;
};

=====　　　 1 end　 ====================

===== 2 Bird.js 的内容 ===========

// * * * * * * * * * * * * * * * * * * * *
// *　　　 Bird
// * desc:定义Animal的子类
// * time：2008-11-11
// * author：dxl
// *
// * Dependencies: Animal.js
// * * * * * * * * * * * * * * * * * * * /

//定义静态变量
Bird.SciName = "鸟";

//构造器
function Bird(){}

//构造器
function Bird(weight){
//初始化成员变量
　 this.weight = weight;
}

//Bird 是 Animal 的子类, 继承
Bird.prototype = new Animal();

//定义行为方法(公共方法)
Bird.prototype.eat = function (args){
return "吃生食";
};
//定义行为方法(公共方法)
Bird.prototype.move = function (args){
return "飞行";
};

//定义行为方法(私有方法)
Animal.prototype._birdPrivateMethod = function (args){
　 return args.length;
};

=====　　　 2 end　 ====================

===== 3 People.js 的内容 ===========

// * * * * * * * * * * * * * * * * * * * *
// *　　　 People
// * desc:定义一个Animal的子类
// * time：2008-11-11
// * author：dxl
// *
// * Dependencies: Animal.js
// * * * * * * * * * * * * * * * * * * * /

//定义静态变量
People.SciName = "人";

//构造器
function People(){}

//构造器
function People(weight){
//初始化成员变量
　 this.weight = weight;
}

//People 是 Animal 的子类, 继承
People.prototype = new Animal();

//定义行为方法(公共方法)
People.prototype.eat = function (args){
return "吃熟食" ;
};
//定义行为方法(公共方法)
People.prototype.move = function (args){
return "步行";
};

//定义行为方法(私有方法)
People.prototype._peoplePrivateMethod = function (args){
　 return args.length;
};

=====　　　　 3 end　 ====================

===== 4 Test.html 的内容 ===========

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="author" CONTENT="DONG_XUELIN">
<title>采用对象方式封装javascript代码</title>
<script type="text/javascript" src="Animal.js"></script>
<script type="text/javascript" src="Bird.js"></script>
<script type="text/javascript" src="People.js"></script>
<style type="text/CSS">
body{ background:#fff;}
.button{
　 background:#eee;
　 border: #666688 1px solid;
　 padding-right: 2px;
　 padding-left: 2px;
　 font-size: 12px;
　 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#c1c1ce);
　 cursor: hand;
　 color: black;
　 padding-top: 2px;
　 onmouSEOver:expression(onmouseover=function (){this.className='button_over'});
　 onmouseout:expression(onmouseout=function (){this.className='button'});
　 onmousedown:expression(onmousedown=function (){this.className='button_down'});
}
.button_over {
　 background:#fff;
　 border: #666688 1px solid;
　 padding-right: 2px;
　 padding-left: 2px;
　 font-size: 12px;
　 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#c1c1ce, EndColorStr=#ffffff); cursor: hand;
　 color: black;
　 padding-top: 2px;
}
.button_down{
　 background:#fff;
　 border: #666688 1px solid;
　 padding-right: 2px;
　 padding-left: 2px;
　 font-size: 12px;
　 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#c1c1cd, EndColorStr=#ffffff); cursor: hand;
　 color: black;
　 padding-top: 2px;
}
</style>
</HEAD>
<BODY>

<table id="theTable_1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
　 <td> </td>
　 <td align="left" width="20%">Animal weight：</td>
　 <td align="left"><input type="text" id="inputObj_x_id" name="inputObj_x_name" value="1" title="必须输入0-9999内的数字"/></td>
</tr>
<tr>
　 <td> </td>
　 <td align="left" width="20%">Bird weight：</td>
　 <td align="left"><input type="text" id="inputObj_y_id" name="inputObj_y_name" value="10" title="必须输入0-9999内的数字"/></td>
</tr>
<tr>
　 <td> </td>
　 <td align="left" width="20%">People weight：</td>
　 <td align="left"><input type="text" id="inputObj_z_id" name="inputObj_z_name" value="100" title="必须输入0-9999内的数字"/></td>
</tr>
<tr>
　 <td colspan="3">
　 <input type="button" class="button" value="查看结果" />
　 <input type="button" class="button" value="清除控制台" />
　 </td>
</tr>
</table>
<br>
<br>
<table id="theTable_2" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="headRow">
　 <td>console[信息台]</td>
</tr>
</table>
<br>
</BODY>
<div id="console_id" style="height:150;overflow-y:auto;width:100%;"></div>
<SCRIPT language="javascript">
var inputObj_x = document.getElementById("inputObj_x_id");//x input object
var inputObj_y = document.getElementById("inputObj_y_id");//y input object
var inputObj_z = document.getElementById("inputObj_z_id");//z input object
var consoleObj = document.getElementById("console_id");//console div object

//打印信息到控制台
function printMsg2Console(message,color){
if(message == 'undefined') return;
if(!color) color = 'black';

if(consoleObj == 'undefined')
consoleObj = document.getElementById("console_id");

var newChild = document.createElement("<span style='padding-bottom:4px;font-size:12px;color:" + color + "'>");
newChild.innerText = message;
consoleObj.appendChild( newChild );
newChild = document.createElement("<br>");
consoleObj.appendChild( newChild );
newChild.scrollIntoView(true);
}

//清除控制台的信息
function removeConsole(){
if(consoleObj == 'undefined')
　 consoleObj = document.getElementById("console_id");

　 consoleObj.innerHTML = "";
}

//查看动物，鸟，人对象的结果
function viewResult(){
//打印全局变量以及函数执行结果
var x = inputObj_x.value;
var y = inputObj_y.value;
var z = inputObj_z.value;

var animal = new Animal(x);
var bird = new Bird(y);
var people = new People(z);

var result = "animal \tweight = " + animal.weight + "; eat = " + animal.eat() + "; move = " + animal.move()
　 + "\nbird \t\t\tweight = " + bird.weight + "; eat = " + bird.eat() + "; move = " + bird.move()
　 + "\npeople \tweight = " + people.weight + "; eat = " + people.eat() + "; move = " + people.move();

printMsg2Console(result, "black");

}

</SCRIPT>
</HTML>

=====　　　 4 end　 ====================