用面向对象的方式封装javascript(Animal.js ,Bird.js,People.js)

77321660

浏览: 235597 次
性别:
来自: 武汉

最近访客更多访客>>

liuxh20172017

slsf0919

zanggj0618

YouYouXiao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript prototype Microsoft CSS HTML

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

分享到：

事件监听函数的参数个数 | JavaScript面向对象编程

2009-05-26 14:01
浏览 1337
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

(175797816)华南理工大学信号与系统Signal and Systems期末考试试卷及答案: 内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

深圳建设施工项目安全生产奖惩管理制度.docx: 深圳建设施工项目安全生产奖惩管理制度

离散数学课后题答案+sdut往年试卷+复习提纲资料: 离散数学课后题答案+sdut往年试卷+复习提纲资料

自考04741计算机网络原理真题及答案及课件: 04741计算机网络原理 2018(尚德）.pdf 13年试题（2套）.pdf 2015年10月自考计算机网络原理04741试题及答案解析.docx 2021年4月自考04741计算机网络原理真题及答案.docx 2021年4月自考04741计算机网络原理试卷.bak.docx 计算机网络原理课后题答案全李全龙版自考04741.zip.zip 计算机网络原理课件计算机网络原理课件.rar

C++实现rpc，全程手写: C++实现rpc，全程手写

前端拿到的列表数据里id都一样的处理办法.txt: 前端拿到的列表数据里id都一样的处理办法.txt

最新仿720云全景制作源码-krpano仿720云全景网站源码新增微信支付+打赏+场景红包: 最新仿720云全景制作源码|krpano仿720云全景网站源码（新增微信支付+打赏+场景红包等）是一款基于php+mysql开发制作的全景在线制作网站源码，包含全景图片，全景视频等。数据存储全部存于OSS云端或本地，源码完全开源可自行二次开发。环境要求:PHP5.5.X+MYSQL5.6.X+伪静态熟悉linux系统推荐使用LAMP，web服务器最好使用apache，不要使用nginx(发布大全景图需要时间可能需要20多分钟， nginx超时机制不好控制)。 Windows系统推荐使用phpstudy。Liunx推荐宝塔控制面板apache 前端为HTML5开发，自适应手机版! 1、支持VR虚拟现实、全景视频、环物全景、说一说、点赞评论、重力感应、智能视频嵌入、场景切换热点、加载进度条、地图导航、光晕flash特效、物体全景嵌入、场景自播、场景解说、雷达导航等业内前沿功能。 2、支持windows、Linux、Mac、安卓、IOS等几乎所有的系统观看。支持CDN图片转存，极大的减轻的服务器流量费用。 3、支持用户权限分配。方便会员制收费。

YOLO算法-可乐罐子数据集-336张图像带标签-可乐.zip: YOLO系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法；包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中，文件名末尾是部分类别名称; yolo格式：<class> <x_center> <y_center> <width> <height>，其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值；【注】可以下拉页面，在资源详情处查看标签具体内容；

环境监测系统源代码全套技术资料.zip: 环境监测系统源代码全套技术资料.zip

【编码解码】基于matlab罗利衰落信道编解码器设计【含Matlab源码 9930期】.zip: Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

四轮转向系统横摆角速度控制simulink仿真模型，利用滑模控制算法，基于八自由度车辆模型，控制有比较好的效果，附参考说明: 四轮转向系统横摆角速度控制simulink仿真模型，利用滑模控制算法，基于八自由度车辆模型，控制有比较好的效果，附参考说明。

YOLO算法-工作场所安全隐患数据集-859张图像带标签-倒下的工人-配备个人防护装备的工人-无个人防护装备的工人-火.zip: YOLO系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法；包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中，文件名末尾是部分类别名称; yolo格式：<class> <x_center> <y_center> <width> <height>，其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值；【注】可以下拉页面，在资源详情处查看标签具体内容；

自学考试02331数据结构试题及答案2021-2022: 02142数据结构导论历年真题及答案（2012-2018共13套）.rar 02331数据结构历年真题共267页2009.10-2019.4.rar 24数据结构201704_8.pdf 25数据结构201710_10.pdf 26数据结构201804_11.pdf 27数据结构201810_9.pdf 全国2021年04月高等教育自学考试02331数据结构试题及答案.docx 全国2022年04月高等教育自学考试02331数据结构试题及答案.docx 数据结构-课件.rar 第l六讲.ppt 第一讲.ppt 第七讲.ppt 第三讲.ppt 第九讲.ppt 第二讲.ppt 第五讲.ppt 第八讲.ppt 第四讲.ppt

验收确认单表格.docx: 验收确认单表格.docx

内存搜索工具(易).rar: 内存搜索工具(易).rar

饮食管理系统项目源代码全套技术资料.zip: 饮食管理系统项目源代码全套技术资料.zip

计算机视觉项目：Swin-Transformer 【tiny、small、base】模型实现的图像识别项目：番茄病害图像分类: 【项目简介】代码主干网络采用Swin-Transformer 家族系列，包括【tiny、small、base】三种模型。pretrained和freeze_layers参数为是否采用官方预训练模型和是否仅训练分类头。为了做对比消融试验，优化器采用了Adam和SGD、AdamW三种。损失函数采用多类别的交叉熵、学习率优化策略采用cos余弦退火算法【评估网络】评估的指标采用loss和准确率（accuracy），分别会在训练集和验证集上进行评估、输出、绘制曲线图像。同时会在训练集、验证集进行一系列评估，包含混淆矩阵、recall、precision、F1 score等等曲线图像，以及recall、precision、F1 score、特异度的输出信息等等。【具体各类别的指标在json文件中查看】【如果想要更换数据集训练，参考readme文件】【本项目为8种番茄病害图片（约4k张数据），包含数据集和标签，可以一键运行】

(177121232)windows电脑下载OpenHarmony鸿蒙命令行工具hdc-std: windows电脑下载OpenHarmony鸿蒙命令行工具hdc_std。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

小程序毕业设计项目-音乐播放器: 本项目可以作为小程序毕设项目，主要功能为音乐播放器，主要功能是：可以播放歌曲(采用mp3网络连接实现)、专辑封面播放时可以旋转，能够实现开始和暂停播放，可以点击下一首歌曲，主页面实现动态轮播图

考研学习分享-JAVA-基于Vue+SpringBoot的考研学习分享平台设计与实现（毕业论文）: 考研学习分享功能的描述可以涵盖以下几个主要模块，旨在为考研学生提供一个互动、资源共享、经验交流的平台： 1. 用户注册与个人信息管理学生可以通过邮箱或手机号注册账户，填写个人信息，如姓名、专业、目标院校等。用户可设置学习目标和进度，方便记录自己的学习历程。 2. 学习资料共享用户可以上传、下载考研相关学习资料，如教材、真题、笔记、复习计划等。提供文件分类功能，按学科、院校、难度等进行整理，方便用户查找。支持多种文件格式，如PDF、Word、Excel、图片等。 3. 复习经验分享学生可以发布自己的复习经验文章，分享复习方法、备考心得、时间管理技巧等。提供文章评论和互动功能，其他学生可以点赞、评论、提问，促进经验交流。设置专栏或专题，帮助学生快速找到自己感兴趣的复习内容。 4. 考研小组与社交功能学生可以创建或加入学习小组，组内成员可共享资料、讨论问题、互相鼓励。提供私信、群聊功能，方便学员在小组内进行实时讨论和交流。支持设置小组学习目标和定期检查进度，增加学习动力。 5. 在线课程与讲座提供考研各科目（如英语、数学、政治等）的在线课程资源，用户可以报名参加。

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论