JS面向对象思想(OOP)
直接看js好了,模拟创建一个奥运会
function 奥运会Class(主题) {
// 删除主题
// delete this.主题;
this.主题 = 主题;
this.开幕时间;
this.闭幕时间;
this.公告簿 = "";
//模拟开幕
this.开幕 = function () {
this.开幕时间 = "2012年7月28日03时12分(北京时间)";
this.公告薄 = "奥运主题:" + this.主题 + "\n" + "开幕时间:" + this.开幕时间 + "\n" + "伦敦奥运会开幕了\n";
this.公告发布event(this, this.公告薄);
}
//模拟闭幕
this.闭幕 = function () {
this.闭幕时间 = "2012年8月13日 04:00(北京时间)";
this.公告薄 += this.闭幕时间 + "伦敦奥运会闭幕了\n";
this.公告发布event(this, this.公告薄);
}
//模拟事件的方法
this.公告发布event = function(sender, e) {
}
//构建集合对象
this.国家集合 = new Array();
this.运动员集合 = new Array();
this.裁判集合 = new Array();
this.项目集合 = new Array();
//创建一个通用查询
this.通用查询 = function (对象源, 查询集合对象名称, 查询字段, value) {
for (var aa in 对象源) {
if (aa == 查询集合对象名称) {
var source = 对象源[aa];
if (aa == 查询集合对象名称) {
for (var i = 0; i <= source.length; i++) {
var s = source[i.toString()];
if (s[查询字段] == value) {
return s;
}
}
}
}
}
return null;
}
}
//闭包扩展,在原型上扩展方法
奥运会Class.prototype.添加国家 = function(国家名称, 地区) {
var 国家 = new 国家Class(国家名称, 地区);//创建国家
国家.所属奥运会 = this;
this.国家集合.push(国家);//添加国家到国家集合
this.公告簿 += 国家名称 + " " + 地区 + " " + "已经加入本届奥运会\n";;//发布消息
this.公告发布event(this, this.公告簿);
//动态移除成员 或者是方法等
// delete this.公告簿;
//链式编程,进行优化
return this;
}
奥运会Class.prototype.添加项目 = function(项目名称) {
var 项目 = new 项目Class(项目名称);//创建项目
项目.所属奥运会 = this;
this.项目集合.push(项目);//添加项目到国家项目
//发布消息
this.公告簿 += 项目名称 + " " + "已经加入本届奥运会" + " Number:" + this.项目集合.length + "\n";//发布消息
this.公告发布event(this, this.公告簿);
return this;
}
奥运会Class.prototype.添加裁判 = function(名称, 所属项目) {
var 裁判 = new 裁判Class(名称);//创建裁判
裁判.所属奥运会 = this;
裁判.所属的项目 = 所属项目;
this.裁判集合.push(裁判);//添加裁判到裁判集合
//发布消息
this.公告簿 += 名称 + " " + "裁判已经加入本届奥运会" + " Number:" + this.裁判集合.length + "\n";
this.公告发布event(this, this.公告簿);
return this;
}
奥运会Class.prototype.添加运动员 = function(名称, 国家) {
var 运动员 = new 运动员Class(名称, 国家);//创建运动员
运动员.所属奥运会 = this;
this.运动员集合.push(运动员);//添加运动员到运动员集合
国家.添加运动员(运动员);
//发布消息
this.公告簿 += 名称 + " " + "加入本届奥运会" + " Number:" + this.运动员集合.length + "\n";
this.公告发布event(this, this.公告簿);
return this;
}
//国家对象
function 国家Class(国家名称, 地区) {
this.名称 = 国家名称;
this.地区 = 地区;
this.所属奥运会 = null;
this.运动员集合 = new Array();
this.添加运动员 = function(运动员) {
this.运动员集合.push(运动员);
}
}
// 运动员对象
function 运动员Class(姓名, 所属国家) {
this.姓名 = 姓名;
this.所属奥运会 = null;
this.项目集合 = new Array();
this.所属国家 = 所属国家;
this.添加项目 = function(项目) {
this.项目集合.push(项目);
项目.所属运动员集合.push(this);
}
}
//裁判对象
function 裁判Class(姓名) {
this.姓名 = 姓名;
this.所属奥运会 = null;
this.所属的项目 = null
}
//项目对象
function 项目Class(名称) {
this.名称 = 名称;
this.所属奥运会 = null;
this.成绩 = "";
this.奖牌 = "";
this.所属裁判 = null;
this.所属运动员集合 = new Array();
this.设置比赛成绩 = function() {
}
this.浅表克隆 = function() {
var clone = new 项目Class();
for (var a in this) {
clone[a] = this[a];
}
return clone;
}
this.添加比赛成绩 = function(所属运动员, 成绩单) {
for (var i = 0; i <= this.所属运动员集合.length; i++) {
if (this.所属运动员集合[i.toString()].姓名 == 所属运动员.姓名) {
var s = this.所属运动员集合[i.toString()];
for (var ii = 0; ii <= s.项目集合.length; ii++) {
if (s.项目集合[ii.toString()].名称 == 成绩单.名称) {
var ss = s.项目集合[ii.toString()];
s.项目集合[ii.toString()] = 成绩单;
this.所属奥运会.公告簿 += 所属运动员.姓名 + " " + 成绩单.名称 + " " + 成绩单.成绩 + "\n";
this.所属奥运会.公告发布event(this, this.所属奥运会.公告簿);
return;
}
}
}
}
}
}
<script src="OOP奥运会.js" type="text/javascript">
</script> <script type="text/javascript">
var 奥运会 = new 奥运会Class("游伦敦,看世界!!!!!!!"); function Button2_onclick() { //消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
奥运会.开幕();
} function Button3_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//依次添加国家地区
/* 奥运会.添加国家("中国", "亚洲");
奥运会.添加国家("日本", "亚洲");
奥运会.添加国家("美国", "北美洲");
奥运会.添加国家("德国", "欧洲");
*/ //链式编程,可以这样写,也可以以上面的方式写
奥运会.添加国家("中国", "亚洲").添加国家("日本", "亚洲").添加国家("美国", "北美洲").添加国家("德国", "欧洲"); } function Button4_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//添加运动项目
奥运会.添加项目("跳水").添加项目("举重").添加项目("柔道").添加项目("篮球").添加项目("排球").添加项目("田径");
} function Button5_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//添加裁判
奥运会.添加裁判("张三").添加裁判("李四").添加裁判("陈三"); //为裁判添加运动项目
var 跳水 = 奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水");
var 张三 = 奥运会.通用查询(奥运会 ,"裁判集合" ,"姓名","张三");
跳水.所属裁判= 张三;
张三.所属的项目 =跳水; var 举重 = 奥运会.通用查询(奥运会 ,"项目集合" ,"名称","举重");
var 李四 = 奥运会.通用查询(奥运会 ,"裁判集合" ,"姓名","李四");
举重.所属裁判= 李四;
李四.所属的项目 =举重; var 柔道 = 奥运会.通用查询(奥运会 ,"项目集合" ,"名称","柔道");
var 陈三 = 奥运会.通用查询(奥运会 ,"裁判集合" ,"姓名","陈三");
柔道.所属裁判= 陈三;
陈三.所属的项目 =柔道; } function Button6_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//创建运动员
var 中国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "中国");
奥运会.添加运动员("郭晶晶", 中国); var 日本 = 奥运会.通用查询(奥运会, "国家集合", "名称", "日本");
奥运会.添加运动员("小日本田", 日本); var 美国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "美国");
奥运会.添加运动员("布迪亚 ", 美国);
for (var i = 0; i < 10; i++) { var 中国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "中国");
奥运会.添加运动员("郭晶晶"+i, 中国).添加运动员("Z-" + i, 中国).添加运动员("Z-G" + i, 中国); var 日本 = 奥运会.通用查询(奥运会, "国家集合", "名称", "日本");
奥运会.添加运动员("小日本田"+i, 日本).添加运动员("R-" + i, 日本).添加运动员("R-B" + i, 日本); var 美国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "美国");
奥运会.添加运动员("布迪亚 "+i, 美国).添加运动员("U-" + i, 美国).添加运动员("U-S" + i, 美国); } } function Button7_onclick() { //消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
} //给运动员分配运动项目
var 中国=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","中国");
var 郭晶晶=奥运会.通用查询(中国 ,"运动员集合" ,"姓名","郭晶晶");
var 跳水 =奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水");
郭晶晶.添加项目(跳水); var 日本=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","日本");
var 小日本田=奥运会.通用查询(日本 ,"运动员集合" ,"姓名","小日本田");
小日本田.添加项目(跳水); var 美国=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","美国");
var 布迪亚 =奥运会.通用查询(美国 ,"运动员集合" ,"姓名","布迪亚 ");
布迪亚 .添加项目(跳水); } function Button8_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//为运动设置成绩
var 中国=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","中国");
var 郭晶晶=奥运会.通用查询(中国 ,"运动员集合" ,"姓名","郭晶晶");
var 跳水1 =奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水").浅表克隆(); //先得到要修改数据对象的引用
var 跳水1set =奥运会.通用查询(郭晶晶 ,"项目集合" ,"名称","跳水");
跳水1.成绩="99分";
跳水1set.添加比赛成绩(郭晶晶,跳水1); var 日本=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","日本");
var 小日本田=奥运会.通用查询(日本 ,"运动员集合" ,"姓名","小日本田");
var 跳水2 =奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水").浅表克隆(); var 跳水2set =奥运会.通用查询(小日本田 ,"项目集合" ,"名称","跳水");
跳水2.成绩="25分";
跳水2set.添加比赛成绩(小日本田,跳水2);
} function Button9_onclick() { //消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
奥运会.闭幕();
} </script>
具体效果
喜欢的人可以下载看看,体会OOP思想http://files.cnblogs.com/BABLOVE/JSOOP%E5%A5%A5%E8%BF%90%E4%BC%9A.rar
JS面向对象思想(OOP)的更多相关文章
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 用js面向对象思想封装插件
js是基于原型的面向对象语言,如果你学过java,c#等正统面向对象语言,你会难以理解js的面向对象,他和普通的面向对象不太一样,今天,我们通过封装一个toast插件,来看看js面向对象是如何运行的. ...
- JS面向对象程序设计(OOP:Object Oriented Programming)
你是如何理解编程语言中的面向对象的? 我们研究JS和使用JS编程本身就是基于面向对象的思想来开发的,JS中的一切内容都可以统称为要研究的“对象”,我们按照功能特点把所有内容划分成“几个大类,还可以基于 ...
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
- 谈一谈原生JS中的【面向对象思想】
[重点提前说:面向对象的思想很重要!] 最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...
- JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)
一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)
一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...
- 使用面向对象思想封装js(附实例)
平时在写js时应该用面向对象思想将每一组功能封装成一个模块,可实现模块间的高内聚低耦合.重用.结构清晰........... 如果页面中逻辑复杂.功能多,不使用模块封装是不可想象的,维护起来非常复杂. ...
随机推荐
- Webform Repeater的灵活运用
案例:模拟购物列表 封装实体类: 数据访问类: 用Repeater展示: 1 <%@ Page Language="C#" AutoEventWireup="t ...
- ffmpeg的logo, delogo滤镜参数设置
FFmpeg的添加logo,去logo滤镜的组合共有三种方式: 1. 只有添加logo滤镜 $ ./ffmpeg -i INPUT.FLV \ -vf movie=/opt/logo.png[log ...
- Winform DataTable 客户端操作数据
//创建 DataTable DataTable dt = new DataTable(); dt.Columns.Add("ID"); dt.Columns.Add(" ...
- Linux下源码安装Nginx服务
nginx 安装 linux 系统需要安装必备的开发包,比如 gcc,gcc-c++ 1. openssl (支持 https) https://www.openssl.org/source/ ...
- 【设计模式 - 24】之访问者模式(Visitor)
1 模式简介 访问者模式的定义: 访问者模式将数据结构与数据操作进行了分离,解决了稳定的数据结构和易变的数据操作的耦合问题. 访问者模式的优点: 1) 符合单一职责原则: 2) ...
- GWT 实现文件上传和下载
首先下载两个包 commons-fileupload-?.jar和commons-io-?.jar 将他们配置到你的项目中 先把它们放在 "项目名/war/WEB-INF/lib" ...
- 应用程序无法正常启动0xc0150002 解决方式
我也遇到过此问题,解决的方法: 方案一: 在项目的"属性|配置属性|链接器|常规"中的"启用增量链接"选择"否".此方法阻断了问题产 ...
- android之tween动画详解
android中一共提供了两种动画,其一便是tween动画,tween动画通过对view的内容进行一系列的图像变换(包括平移,缩放,旋转,改变透明度)来实现动画效果,动画效果的定义可以使用xml,也可 ...
- C++中各种数据量类型转换
要在Unicode字符集环境下把CString转化为char* 方法: CString str = _T("D://校内项目//QQ.bmp");//////leo这个NB 可以 ...
- cocos2dx_moveby_n_moveto
对于参数(SEC, POINT)来说,CCMoveTo是移动到WND的绝对的POINT,CCMoveBy是相对当前位置移动一个相当于(0,0)到POINT的向量.