js设计模式笔记

/*
    设计模式
*/

// 观察者模式
// class Task{
//     taskList:Function[] = []
//     addTaskList(fn:Function){
//         this.taskList.push(fn)
//     }
//     defTask(row:Number){
//         this.taskList.forEach(cb=>{
//             cb(row)
//         })
//     }
// }

// class Observer{
//     constructor(fn:Function,task:Task){
//         task.addTaskList(fn)
//     }
// }
// let task = new Task()

// let caijun = new Observer((item:Number)=>{
//     if(item<100){
//         console.log('蔡钧不接受这个任务')
//     }else{
//         console.log('蔡钧接受这个任务')
//     }
// },task)

// let congcong = new Observer((item:Number)=>{
//     if(item<50){
//         console.log('聪聪不接受这个任务')
//     }else{
//         console.log('聪聪接受这个任务')
//     }
// },task)

// task.defTask(100) //下发通知

// 栈

// class Shed {
//     shedList:Function[] = []
//     push(row:Function){
//         this.shedList.push(row)
//         console.log('入栈后结果为',this.shedList)
//     }
//     pop(){
//         if(this.shedList.length){
//             let cb = this.shedList.pop() as Function
//             cb()
//         }else{
//             console.log('此栈为空栈')
//         }
//     }
//     clear(){
//         for(let i=this.shedList.length-1;i>=0;i--){
//             this.shedList[i]()
//         }
//     }
// }
// let shed = new Shed()
// shed.push(()=>{
//     console.log('1')
// })
// shed.push(()=>{
//     console.log('12')
// })
// shed.push(()=>{
//     console.log('12')
// })
// shed.clear()

//队列用shift方法

//工厂模式

// class HtmlNodeFactory {
//     createTag(){
//         console.warn('不可直接调用抽象工厂构建元素方法')
//     }
//     createStyle(style:String){
//         console.warn('不可直接调用抽象工厂构建样式方法')
//     }
//     createText(text:String){
//         console.warn('不可直接调用抽象工厂构建文件方法')
//     }
//     createElement(){
//         console.warn('不可直接调用抽象工厂构建节点方法')
//     }
// }

// class PNode extends HtmlNodeFactory{
//     node:{
//         tag?:String,
//         style?:String,
//         text?:String
//     } = {}
//     createTag(){
//         this.node.tag = 'p'
//     }
//     createStyle(style:String){
//         this.node.style = style
//     }
//     createText(text:String){
//         this.node.text = text
//     }
//     createElement(){
//         console.log(this.node)
//     }
// }

// let p = new PNode()
// p.createTag()；
// p.createStyle('width:100px')
// p.createText('测试p节点')
// p.createElement()

//单例模式

// let sinx:SingleDog
// class SingleDog {
//     type:String
//     constructor(type:String){
//         this.type = type
//     }
//     static getInstance(type:String) {
//         // 判断是否已经new过1个实例
//         if (!sinx) {
//             // 若这个唯一的实例不存在，那么先创建它
//             sinx = new SingleDog(type)
//         }
//         // 如果这个唯一的实例已经存在，则直接返回
//         return sinx
//     }
// }

// const s1 = SingleDog.getInstance('first')
// const s2 = SingleDog.getInstance('second')
// console.log(s2.type)

// 闭包构建单例模式

// class Base{
//     getItem = (key:string)=>{
//         return localStorage.getItem(key)
//     }
//     setItem = (key:string,value:string)=>{
//         return localStorage.setItem(key,value)
//     }
// }

// var vuex = function(){
//     let create:any = null
//     return function(){
//         if(!create){
//             return create = new Base()
//         }
//         return create
//     }
// }()
// let vuex1 = vuex()
// let vuex2 = vuex()

// vuex1.setItem('cj','111')
// console.log(vuex2.getItem('cj'))

//闭包获取多次累积的数

// var Counter = function() {
//     let i = 0;
//     return (row:number)=>{return i+=row}  
//   }();
// console.log(Counter(2))
// console.log(Counter(2))

//深度拷贝
// const json = {
//     key:'key',
//     value:'value',
//     obj:{
//         key:'key',
//         value:'value'
//     },
//     funIf:(row:number)=>{
//         return row<<2
//     }
// }

// function deepCopy(target:any){
//     if(typeof target !=='object' || target==='null'){
//         return target
//     }
//     let copyObj:any = {}
//     for(let i in target){
//         copyObj[i] = deepCopy(target[i])
//     }
//     return copyObj
// }
// console.log(json.obj.key===deepCopy(json).obj.key)  //true

//装饰器
// function funcDecorator(target:any,name:string,descriptor:any) {
//     // console.log('装饰器方法')
//     // descriptor.value = ()=>{
//     //     console.log('装饰器内部方法')
//     // }
//     console.log(target,name,descriptor)
//     descriptor.value = ()=>{
//         console.log('装饰器内部方法')
//     }
// }

// class Button {
//     enabled = true
//     @funcDecorator
//     onClick() { 
//         console.log('我是Func的原有逻辑')
//     }
// }
// let btn = new Button()
// btn.onClick()

// 验证装饰器是否生效
// const button = new Button()
// console.log(button.enabled)

//代理模式
// const visitor = {
//     isLogin:true,
//     isVIP:false
// }
// const userInfo = {
//     name:'xiaoming',
//     age:123,
//     desc:'hello world'
// }
// const webSite = new Proxy(userInfo,{
//     get(target,key){
//         if(!visitor.isLogin){
//             console.log('请登录')
//             return 
//         }else if(key==='desc'&&!visitor.isVIP){
//             console.log('想访问详情请充值vip')
//             return 'none'
//         }else{
//             return Reflect.get(target,key)
//         }
//     }
// })
// console.log(webSite.desc)

// 状态模式
// const stateToProcessor:any = {
//     american() {
//       console.log('我只吐黑咖啡');    
//     },
//     latte() {
//       this.american();
//       console.log('加点奶');  
//     },
//     vanillaLatte() {
//       this.latte();
//       console.log('再加香草糖浆');
//     },
//     mocha() {
//       this.latte();
//       console.log('再加巧克力');
//     }
//   }
  
//   class CoffeeMaker {
//     state:string
//     constructor() {
//       this.state = 'init';
//     } 
//     changeState(state:string) {
//       this.state = state;
//       if(!stateToProcessor[state]) {
//         return ;
//       }
//       stateToProcessor[state]();
//     }
//   }
  
//   const mk = new CoffeeMaker();
//   mk.changeState('latte');