分享
 
 
 

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

王朝html/css/js·作者佚名  2008-11-15
窄屏简体版  字體: |||超大  

用面向对象的方式封装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>&nbsp;</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>&nbsp;</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>&nbsp;</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" onclick="viewResult() ;" value="查看结果" />

<input type="button" class="button" onclick="removeConsole();" 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 ====================

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有