![](https://img-blog.csdnimg.cn/20210312225120588.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
面向对象
面向对象
敢问
书山有路勤为径,学海无涯苦作舟
展开
-
js-俄罗斯方块-面向对象-中介模式-完整版
1.设置Game为中介者类2.方块的状态俄罗斯方块中,下落的方块形态一共有7种,每一种又有不同的状态(方向)S型、Z型、J型、L型、O型、T型、I型这些形态都用一个4*4的矩阵表示3 方块的表示使用二维数组去表示俄罗斯方比如上图的T我们使用二维数组[[0,0,0,0],[1,1,1,0],[1,1,0,0],[0,0,0,0],]块的方块状态将所有的俄罗斯方块的类型和状态都放到一个JSON中,JSON是一个三维数组4 渲染方块5 地图类原创 2020-12-09 17:34:47 · 410 阅读 · 0 评论 -
js 贪吃蛇-设计模式-中介模式
1、本游戏(贪吃蛇)不是像之前一样都写到一个HTML文件中,而是进行了类的拆分,单独用js表示每个类,中介类是Game类,首先引入这个类<script src="js/Game.js"></script>2、页面的初始化,初始化布局不是直接写html标签,而是通过game进行的初始化节点上树<style> *{ margin: 0; padding: 0; } table{ border-collapse: collapse; }原创 2020-12-07 22:50:16 · 309 阅读 · 0 评论 -
js-面向对象-设计模式-中介模式
中介模式:所有的元素包括类都是由统一的这个类(中介类)进行控制、生成、维护和改变状态。例:考试成绩的得分和评级//测试类,承接成绩和状态,返回已有的消息 function Test(name) { this.name = name; this.score = new Score(this.name); this.state = new State(this.score.result); } Test.prototype.ann原创 2020-12-07 15:41:09 · 47 阅读 · 0 评论 -
js-面向对象-设计模式-抽象工厂模式
抽象工厂:提供一个注册方法,然后实例这个类工厂维护一个类的清单,用一个对象来维护所有的类的内容,注册的时候可以提供预审查功能,比如我们要求所有的注册类都必须要有update和render方法,否则不允许注册 function Animale(name,color) { this.name = name; this.color = color; return this; } Animale.prototype.update = f原创 2020-12-07 11:41:40 · 82 阅读 · 0 评论 -
js-面向对象-设计模式-工厂模式
工厂函数能够创建对象,并且函数是()执行不是new执行。简单工厂模式 function createStudents(name,age,sex) { return { name : name, age : age, sex : sex, study : function () { console.log("语数英理化生") }原创 2020-12-07 10:04:30 · 55 阅读 · 0 评论 -
js-面向对象-设计模式-外观模式
外观模式:就是为子系统中的一组接口提供一个公共接口,定义一个高层的接口外观模式下,可以通过请求外观接口,达到请求访问子接口的目的,也可以选择跳过外观接口,访问子系统<script> function start(){ console.log("开始了") } function doing(){ console.log("进行中") } function end原创 2020-12-06 21:16:51 · 81 阅读 · 0 评论 -
js-面向对象-设计模式-命令模式
命令模式的本质就是对命令进行封装,将发出命令的责任和执行命令的责任区分开。每一个命令都是一个操作,请求的一方发出请求操作,要求执行一个命令,接受的一方,收到请求,执行相应的操作<script> var btn = document.getElementById("btn"); //执行的事件对象 var add = { execute : function(){ console.log("增加了") }原创 2020-12-06 20:46:21 · 72 阅读 · 0 评论 -
js-面向对象-设计模式-装饰模式
装饰模式的哲学:不改变原来的类且不适用继承,把一个类的方法增强1、装饰一个属性 function Student(){ } Student.prototype.study = function(){ console.log("语文"); console.log("数学"); console.log("英语"); console.log("理化生"); } //装饰类 function Zh原创 2020-12-06 20:11:17 · 66 阅读 · 0 评论 -
js-面向对象-设计模式-组合模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body&g.原创 2020-12-06 10:08:40 · 150 阅读 · 0 评论 -
js-面向对象-图片loading-设计模式-代理模式
1、传统模式下渲染图片网络卡,会一点一点渲染出结果 function Myimgge(src) { this.oImg = document.createElement("img"); document.body.appendChild(this.oImg); this.src = src; this.getSrc(); } Myimgge.prototype.getSrc = function () {原创 2020-12-05 20:46:36 · 101 阅读 · 0 评论 -
js-面向对象-设计模式-单例模式
1、利用IIFE只执行一次的机制实现var Person = (function(){ var instance = null; return function(name,age){ this.name = name; this.age = age; if(instance){ return instance } ret原创 2020-12-04 23:34:15 · 139 阅读 · 0 评论 -
js面向对象-设计模式-策略模式-表单校验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body&g.原创 2020-12-04 17:57:28 · 206 阅读 · 0 评论 -
js面向对象-设计模式-观察者模式-汇率转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>设计模式-观察者模式</title></head><body> <d.原创 2020-12-03 22:46:04 · 167 阅读 · 0 评论 -
js 面向对象 ------小游戏打气球
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打气球</title></head><style> html{ wi.原创 2020-12-03 15:54:02 · 354 阅读 · 0 评论 -
js面向对象-炫彩小球
<style> *{ margin: 0; padding: 0; } body{ background: #000; } .ball{ width: 80px; height: 80px; background-color: blue; border-radius: 50%; opacity: .5; ani..原创 2020-12-02 22:13:55 · 120 阅读 · 0 评论 -
行走的女神--面向对象--数组的统一管理和定时器操作
<style> *{ margin: 0; padding: 0; } .girl{ width:150px; height: 80px; background: url("girl.png") no-repeat 0 -673px; position: absolute; left: 0; top: 100px; } #b...原创 2020-12-02 16:31:00 · 88 阅读 · 0 评论 -
面向对象编程-红绿灯
1、利用原生的JavaScript实现var honglvdeng = document.getElementsByClassName("honglvdeng")[0]; //console.log(honglvdeng) var inx = 0; honglvdeng.onclick = function () { inx++; inx = inx > 2 ? 0 : inx; this.style.background.原创 2020-12-02 10:27:22 · 599 阅读 · 0 评论 -
js-原型链
第一 第二 第三第四原创 2020-12-01 17:28:01 · 53 阅读 · 0 评论 -
函数上下文this
1:直接圆括号执行 this指的是window对象 IIFE也属于圆括号直接执行 this 只想window例1var obj = { as:100, fun: function(){ alert(this.as)}}var b = obj.funb()//输出undefined例2var a = 300;var obj = { a : 100, b:(function(){ alert(this.a) })(...原创 2020-11-29 18:45:14 · 331 阅读 · 1 评论 -
js-面向对象-设计模式-代理模式
1、传统非代理模式 实例 :送花 function Flower(name){ this.name= name; } var xiaoming = (function(){ var flower = new Flower("玫瑰花"); return { name : "小明", sendFlower : function(target){ target原创 2020-12-05 12:32:38 · 65 阅读 · 0 评论 -
js-面向对象-设计模式-缓存代理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> Factorial .原创 2020-12-05 18:59:07 · 62 阅读 · 0 评论