JS设计模式学习存档
2022-02-21 本文已影响0人
米卡卡米
<!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>
</head>
<body>
<button id="add">
xxxxxssjkskjskj
</button>
</body>
<script>
// 策略模式 以下代码改造权限判断。---抛弃if else
//开放封闭原则：软件实体应该是可扩展，而不可修改的。
//也就是说，对扩展是开放的，而对修改是封闭的。
//策略
const jobList = ['YK', 'QD']
var strategies = {
//查看角色
checkRole: function (value) {
return value === 'juejin';
},
//查看等级
checkGrade: function (value) {
return value >= 1
},
checkJob: (value) => {
return jobList.indexOf(value) > 1
}
}
//添加策略事件
var Validator = function () {
this.cache = [];
this.add = function (value, method) {
this.cache.push(function () {
return strategies[method](value);
})
}
//检查
this.check = function () {
for (let i = 0; i < this.cache.length; i++) {
let valiFn = this.cache[i];
var data = valiFn();
if (!data) {
return false
}
}
return true;
}
}
//开始检查权限
var compose1 = function () {
var validator = new Validator();
const data1 = {
role: 'juejin',
grade: 3
}
validator.add(data1.role, 'checkRole')
validator.add(data1.grade, 'checkGrade')
const result = validator.check();
return result
}
//输出结果：ture or false
console.log(compose1())
//---策略模式结束
//发布--订阅模式 中间放了一个盒子，发布到盒子里，订阅的去盒子里找对应的内容。
//1.相互独立、2.存在一对多关系、3.依赖模块不稳定。4.团队各自开发。
const EventEmit = function () {
this.events = {};
//定义
this.on = function (name, cb) {
console.log(this.events[name])
if (this.events[name]) {
this.events[name].push(cb);
console.log('if')
}
else {
this.events[name] = [cb]
console.log('else')
}
}
//触发
this.trigger = function (name, ...cb) {
if (this.events[name]) {
this.events[name].forEach(element => {
element(...cb)
});
}
}
}
//使用
let event = new EventEmit();
event.on('success', () => {
console.log('更新')
})
event.on('success', () => {
console.log('更新2')
})
event.trigger('success')
////----发布、订阅模式结束
////装饰器模式 允许向一个对象添加新的功能，但是不改变其结构。
class Player {
constructor(name) {
this.name = name;
}
//自我介绍
sayName() {
console.log('my name is ' + this.name)
}
//我的武器只有我的拳头
fire() {
console.log('i can only punch!')
}
}
//构造一把枪
class gun {
constructor(player) {
player.fire = this.fire
}
fire() {
console.log('i shoot with my pistol!')
}
}
//使用
const player = new Player('mika')
player.sayName()
player.fire()
const playwithgun = new gun(player)
playwithgun.fire()
//装饰者模式结束==
//代理模式：代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。排除掉一些不必要的访问请求
//https://plc.jj20.com/up/allimg/911/050916125K7/160509125K7-11.jpg
//虚拟代理-图片预加载
var myImage = (function () {
var imgNode = document.createElement('img');
document.body.appendChild(imgNode);
return {
setSrc: function (src) { imgNode.src = src }
}
})()
//创建代理 预加载loading
var proxyImage = (function () {
var img = new Image;
img.onload = function () {
myImage.setSrc(this.src)
}
return {
setSrc: function (src) {
myImage.setSrc('./logo.gif');
img.src = src
}
}
})();
proxyImage.setSrc('http://question.museum24h.com/zy/static/img/1-3-2.21c5091.jpg')
//防抖-学习
let btn = document.getElementById('add')
btn.addEventListener('click', debounce(addOne, 2000))
function addOne() {
console.log('add')
}
function debounce(fun) {
console.log(';??我被点击了')
let timer = null;
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
console.log('??')
fun()
}, 1000)
}
}
</script>
</html>
