引言：以策略模式举例说明学习设计模式的必要性
设计模式:一个屋子如果要持续往里扔东西的话，为什么不先摆几个柜子呢
//策略模式
//开放原则 封闭原则
let toolObject = {
html(){
//取出对应的值然后使用InnerHTML给对应的节点赋值
/*5行*/
},
bind(){
//替换对应的属性
/*5行*/
},
model(){
//绑定值，并且给对应元素绑定Input事件
/*10行*/
}
}
let dir = ''
function compile(){
let dir = 'xxx'
toolObject[div.slice(2)]()
// if(dir==='v-html'){
// //取出对应的值然后使用InnerHTML给对应的节点赋值
// /*5行*/
// }else if(dir==='v-bind'){
// //替换对应的属性
// /*5行*/
// }else if(dir==='v-model'){
// //绑定值，并且给对应元素绑定Input事件
// /*10行*/
// }else if(dir==='v-if'){
// }
}
单例模式
//单例模式---> 一个类只允许有一个实例
//ES6实现方式
// class MyRedux{
// static storeInstance
// static createStore(){
// if(MyRedux.storeInstance){
// return MyRedux.storeInstance
// }else{
// return MyRedux.storeInstance = new MyRedux()
// }
// }
// }
// let firstStor = MyRedux.createStore()
// let secondStor = MyRedux.createStore()
// console.log(firstStor===secondStor)
//es5实现单例模式
var MyRedux = (function MyRedux(){
var instance;
return function(){
if(instance){
return instance
}else{
return instance = {
defaultState:{
username:'zs'
}
}
}
}
})()
let first = new MyRedux()
let second = new MyRedux()
console.log(first===second)
发布订阅--实现一个redux
发布订阅模式
也称作观察者模式，定义了对象间的一种一对多的依赖关系，
当一个对象的状态发 生改变时，所有依赖于它的对象都将得到通知
//createStor dispatch subscribe
class MyRedux{
constructor(){
this.container = []
}
getState(){
return this.state
}
subscribe(fn){//订阅函数，订阅一些更新逻辑
this.container.push(fn)
}
notify(value){
this.container.forEach((fnItem)=>{
fnItem(value)
})
}
dispatch(action){
this.state = this.reducer(this.state,action)
//this.state如果发生了改变，那么就发布 immer
this.notify(this.state)
}
static instanceStor
static createStor(reducer){
if(MyRedux.instanceStor){
return MyRedux.instanceStor
}else{
let store = new MyRedux()
store.state = reducer(undefined,{})
store.reducer = reducer
return MyRedux.instanceStor = store
}
}
}
const defaultState = {
username:'zhangsan'
}
let stor = MyRedux.createStor((state=defaultState,action)=>{
switch(action.type){
case 'changename':
return {...state,username:action.value}
default:
return {...state}
}
})
stor.subscribe((value)=>{
console.log(value,'仓库值更新后同步刷新组件视图')
})
console.log(stor.getState().username)
stor.dispatch({
type:'changename',
value:'lisi'
})
console.log(stor.getState().username)
实现一个koa的中间件
<!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>
html,body,#container{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
</div>
<script>
class MyKoa{
constructor(){
this.container = []
}
use(fn){
this.container.push(fn)
}
compose(ctx){
//dispatch(0)
//let fn = this.container[0]
let that = this
dispatch(0)
function dispatch(index){
let fn = that.container[index]
if(typeof fn==='function'){
fn(ctx,function next(){
dispatch(index+1)
})
}
}
}
createApp(){
this.compose({req:'req',res:'res'})
return {}
}
}
let app = new MyKoa()
app.use(async (ctx,next)=>{
console.log('11111')
await next()
console.log(ctx.username)
console.log('22222')
})
app.use(async (ctx,next)=>{
console.log('33333')
ctx.username = 'zs'
await next()
console.log('444444')
})
app.createApp()
</script>
</body>
</html>
网友评论