<!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>
网友评论