<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video::cue {
color: red;
background: rgba(255, 0, 0, 0.5);
margin-bottom: 300px;
line-height: 150px;
}
</style>
</head>
<body>
<!-- <video width="500" controls poster="./video.jpeg" autoplay>
<source src="http://course.media.unipus.cn/edx/course-v1:Unipus+dy_nfce_zh1+20210901/resource/video/b34030ca6259b3337e17a5163edc683b56a1f7b9_720P.mp4#duration=52.6" type="video/mp4">
<track label="英文" kind="subtitles" srclang="cn" src="./video.vtt" default/>
<track label="中文" src="./video.vtt"/>
</video> -->
<button class="showDialog">显示对话框</button>
</body>
<script>
// 设计模式 --> 1、设计原则 2、设计模式：软件开发人员在软件开发过程中面临的一些具有代表性问题的解决方案
// 封装：代码的复用。设计模式：经验的复用
// 设计原则：SOLID（稳定的）
// 单一职责原则
// 开闭原则
// 里氏替换原则：子类可以替换父类
// 迪米特法则：不要和陌生人讲话，不跨级通信
// 接口隔离原则：依赖的接口尽可能的少
// 依赖倒置原则：子类依赖父类，父类不依赖子类；类依赖于基类
</script>
<script>
// 1、单例模式：如 window、document、redux中的store
// class Person {
// static instance;
// constructor(name) {
// if(!Person.instance) {
// this.name = name;
// Person.instance = this;
// } else {
// return Person.instance;
// }
// }
// }
// let zhangsan = new Person('zhangsan');
// let lisi = new Person('lisi');
// console.log(zhangsan === lisi); // true
// // 下面obj1也是一个简单的单例，相当于 new Object()
// let obj1 = {
// name: 'zhangsan',
// age: 18
// };
</script>
<script>
// // 2、通用单例方法
// function createSingleInstance(fn) {
// let instance;
// return function(...args) {
// if(!instance) {
// instance = new fn(...args)
// }
// return instance;
// }
// }
// class Person {
// constructor(name) {
// console.log(name);
// this.name = name;
// }
// }
// class Animal {
// constructor(kind) {
// this.kind = kind;
// }
// }
// let SinglePerson = createSingleInstance(Person);
// let zhangsan = SinglePerson('zhangsan');
// let lisi = SinglePerson('lisi');
// console.log(zhangsan === lisi );
// 单例模式的应用：全局对话框
// class Dialog {
// constructor() {
// let dialog = document.createElement('div');
// dialog.style.display = 'none';
// this.dialog = dialog;
// this.dialogShow = false;
// }
// showDialog() {
// if(!this.dialogShow) {
// this.dialog.innerHTML = '<p>对话框</p>';
// this.dialog.style.display = 'block';
// document.body.appendChild(this.dialog);
// this.dialogShow = true;
// } else {
// console.log('对话框已经显示了');
// }
// }
// }
// let singleDialog = createSingleInstance(Dialog);
// let dialog1 = singleDialog();
// let dialog2 = singleDialog()
// document.querySelector('.showDialog').onclick = function() {
// dialog1.showDialog();
// dialog2.showDialog();
// }
</script>
<script>
// // 工厂模式：最大的事情是将对象的创建和实现分离。上面创建单例的方法也算是工厂模式
// class Yase {
// constructor() {
// this.name = '亚瑟';
// }
// }
// class Luban {
// constructor() {
// this.name = '鲁班';
// }
// }
// function Factory(heroName) {
// switch(heroName) {
// case 'luban':
// return new Luban();
// break;
// case 'yase':
// return new Yase();
// break;
// default:
// console.log('没有英雄');
// break;
// }
// }
// let yase = Factory('yase');
// let luban = Factory('luban');
// console.log(yase, luban);
</script>
<script>
// // 装饰者模式（Decorator）：给对象或者类添加一些额外的功能。extends功能扩展：一般是扩展一些新的功能。而装饰者模式通常是将原有功能变得更强大。
// class Yase {
// constructor() {
// this.name = '亚瑟';
// }
// release() {
// console.log('释放技能');
// }
// }
// let yase = new Yase();
// // yase.release(); // 释放技能
// function hurt() {
// console.log('造成伤害');
// }
// function jump() {
// console.log('旋转跳跃');
// }
// // Function.prototype.Decorator1 = function(fn) {
// // this();
// // fn();
// // }
// // yase.release.Decorator1(hurt); // 释放技能 造成伤害
// // // 装饰者链
// Function.prototype.Decorator2 = function(fn) {
// let _this = this;
// return function() {
// _this();
// fn();
// }
// }
// yase.release.Decorator2(hurt).Decorator2(jump)(); // 释放技能 造成伤害 旋转跳跃
</script>
<script>
// // 观察者模式：两个对象之间的关系（一个是观察者，一个是被观察者）
// // 常见的实例
// document.body.addEventListener('click', function() {
// console.log('点击了屏幕');
// })
// let obj1 = {
// fn1() {
// console.log('fn1更新');
// }
// }
// let obj2 = {
// fn2() {
// console.log('fn2更新');
// }
// }
// // 一个管理事件的类
// class MyEvent {
// constructor() {
// this.handles = {};
// }
// // 添加时间，监听、观察
// addEvent(eventName, fn) {
// // 一个事件名可以绑定多个事件，比如：{myEvent1:[fn1, fn2...], myEvent2: [fn1, fn2...]}
// if(typeof this.handles[eventName] === "undefined") {
// this.handles[eventName] = [];
// }
// this.handles[eventName].push(fn);
// }
// // 触发
// trigger(eventName) {
// // key in obj：判断对象obj中是否存在某个key
// if(!(eventName in this.handles)) {
// throw new Error('事件对象名有误');
// }
// this.handles[eventName].forEach(fn => {
// fn();
// })
// }
// // 移除事件 removeEvent(event, fn);
// removeEvent(eventName, fn) {
// if(!(eventName in this.handles)) {
// console.log('没有这个事件');
// return;
// }
// for(let i=0; i<this.handles[eventName].length; i++) {
// if(this.handles[eventName][i] === fn) {
// this.handles[eventName].splice(i, 1);
// break;
// }
// }
// }
// }
// let myEvent = new MyEvent();
// myEvent.addEvent('myEvent', obj1.fn1);
// myEvent.addEvent('myEvent', obj2.fn2);
// myEvent.removeEvent('myEvent', obj1.fn1);
// setTimeout(() => {
// myEvent.trigger('myEvent')
// }, 1000);
</script>
<script>
// // 代理模式
// let zhangsan = {
// sellHouse(num) {
// console.log("卖了 " + num + " 万元");
// }
// };
// zhangsan.sellHouse(100);
// // 中介卖房子
// let proxySeller = {
// sellHouse(hasSold, num) {
// if(hasSold) {
// zhangsan.sellHouse(num - 2);
// } else {
// zhangsan.sellHouse(num);
// }
// }
// }
// proxySeller.sellHouse(true, 100);
// React、vue中常用于服务器代理，转发请求
// ES6 Proxy 代理对象，可以观察/拦截对象，控制原有对象，也是vue3里面实现数据响应式的核心（后面会讲）
// // 展示图片
// class CreateImg {
// constructor() {
// this.img = document.createElement('img');
// document.body.appendChild(this.img);
// }
// setUrl(url) {
// this.img.src = url;
// }
// }
// let url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi04.c.aliimg.com%2Fimg%2Fibank%2F2013%2F211%2F016%2F791610112_758613609.jpg&refer=http%3A%2F%2Fi04.c.aliimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633009966&t=13cd9cd00dd1b50c1f2158728d79eb2a';
// function proxyImg(url) {
// let createImg = new CreateImg();
// createImg.setUrl('./video.jpeg');
// let img = new Image();
// img.src = url;
// img.onload = () => {
// createImg.setUrl(url);
// };
// }
// proxyImg(url);
</script>
<script>
// // 适配器模式：起转化兼容作用
// function getUsers() {
// return [
// {
// name: 'zhangsan',
// age: 18
// },
// {
// name: 'lisi',
// age: 28
// }
// ]
// }
// // 想得到 [{zhangsan: 18}, {lisi: 28}]
// function Adaptor(users) {
// let arr = [];
// for(let val of users) {
// let obj = {};
// obj[val.name] = val.age;
// arr.push(obj);
// }
// return arr;
// }
// let users = Adaptor(getUsers());
// console.log(users, users.length);
</script>
<script>
// // mixin 混入模式
// class Yase {
// constructor() {
// this.name = '亚瑟';
// }
// }
// class Skills {
// hurt() {
// console.log('造成伤害');
// };
// walk() {
// console.log('打开疾跑');
// };
// release() {
// console.log('释放技能');
// };
// }
// function mixin(receiving, giving) {
// if(typeof arguments[2] !== 'undefined') {
// for(let i = 2; i < arguments.length; i++) {
// receiving.prototype[arguments[i]] = giving.prototype[arguments[i]];
// }
// }
// }
// mixin(Yase, Skills, 'walk', 'hurt', 'release');
// let yase = new Yase();
// console.log(yase);
// yase.walk();
</script>
<script>
// // 享元模式
let userNumber = 10; // 单数是大人，双数是小孩
let horseNum = 0;
class CreateHorse {
constructor(type) {
this.horseNum = horseNum++;
this.type = type ? '大马' : '小马';
this.finish = true;
}
ride(uid) {
return new Promise(resolve => {
console.log(`人 ${uid} 在骑 ${this.horseNum} 号 ${this.type}`)
this.finish = false;
setTimeout(() => {
this.finish = true;
resolve(`人 ${uid} 在骑 ${this.horseNum} 号 ${this.type}，骑行完成。`)
}, 2000);
})
}
}
// // 如果有很多人，会实例化很多 CreateHorse 对象
// for(let i=0; i<userNumber; i++) {
// let horse;
// if(i % 2 === 0) {
// horse = new CreateHorse(false);
// } else {
// horse = new CreateHorse(true);
// }
// horse.ride(i)
// }
// console.log('马的数量: ', horseNum); // 10
// // 享元模式
// let smallHorse = new CreateHorse(false);
// let bigHorse = new CreateHorse(true);
// for(let i=0; i<userNumber; i++) {
// if(i % 2 === 0) {
// smallHorse.ride(i);
// } else {
// bigHorse.ride(i);
// }
// }
// console.log('🐎的数量：', horseNum); // 2
// 完整
class HorsePoll {
constructor() {
this.horse = [new CreateHorse(true), new CreateHorse(true), new CreateHorse(true)];
this.people = [1,2,3,4,5,6,7,8,9,10];
}
rideHorse() {
this.people.forEach(uid => {
let horse = this.getHorse();
if(horse) {
console.log('uid ---> ', uid)
horse.ride(uid).then(res => {
console.log(res);
this.people.shift() && this.rideHorse() && this.people.length;
})
}
})
}
getHorse() {
return this.horse.find(item => item.finish);
}
}
let horsePoll = new HorsePoll();
horsePoll.rideHorse();
</script>
</html>
设计模式
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 面向对象思想设计原则 在实际的开发中，我们要想更深入的了解面向对象思想，就必须熟悉前人总结过的面向对象的思想的设计...
- 设计模式大杂烩（24种设计模式的总结及学习设计模式的几点建议）模式分类 & 传送门 & 对比维度说明 设计原则：设...
- 只有登上山顶，才能看到那边的风光 目录 1.什么设计模式 2.设计模式的发展 3.设计原则6大原则 3.1 开闭原...
- UML类图 用于描述系统中类(对象)本身的组成和类(对象)之间的各种静态关系 类与类之间的关系：依赖、泛化(继承)...
- 什么是单例设计模式？ 单例设计模式就是一种控制实例化对象个数的设计模式。 为什么要使用单例设计模式？ 使用单例设计...
