javascript代码的封装_Javascript教程_H5之家 - 中国HTML5教程资源分享第一站

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

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

1Animal.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;
};

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;
};

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;
};

4Test.html 的内容

<HTML xmlns="">
<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>