JS中你需要知道的设计模式换句话说，就是对现有信息的转换。

工厂模式

对于工厂模式的自我解读: 工厂模式就是将产品的具体信息封装好，统一保存在一个类中

方便之处在于，书写麻烦，对于链式操作将变成噩梦，同时一旦Jq名字变化，将是灾难性的

       //这部分就是工厂中的产品
       class Product {
            constructor(name, price){
                this.name = name
                this.price = price
            }
            tellinfo(){
                console.log(this.name + '价格是：' + this.price)
            }
        }
        //这部分就是工厂
        class Creator {
            create(name, price) {
                return new Product(name, price)
            }//返回一个工厂中的商品
        }
        var creator = new Creator()
        var thing = creator.create('nike','700')
        thing.tellinfo()

应用

window.$ = function (selctor){
	return new jQuery(selector)
}

单例模式

一个类只有一个实例

应用：弹窗指令我们运用类的静态方法模拟单例模式的行为

       class Singletest {
            init(){
                console.log('this is singletest')
            }
        }
        Singletest.common = (function(){
            let instance
            return function () {
                if(!instance){
                    instance = new Singletest()
                }
                return instance
            }
        })()
        let one = Singletest.common()
        one.init()
        let two = Singletest.common()
        two.init()
        console.log(one === two)

适配器模式

通过引用别的类，统一导入到一个目标类中，然后在统一在目标类中进行转换

换句话说，就是对现有信息的转换。

应用： vue中的computed属性

      class Adaptor {
           changeAda(){
               return '德国制造插头'
           }
        }
        class Target {
            constructor(){
                this.adaptor = new Adaptor()
            }
            request(){
                let info = this.adaptor.changeAda()
                return `${info}---转换为--- 中国制造`
            }
        }
        var target = new Target()
        console.log(target.request())   //design.html:26 德国制造插头---转换为--- 中国制造

装饰器模式

在保存原有功能的基础上，添加新的功能

     class Circle {
           draw (){
               console.log('this is circle draw')
           }
       }
       class Decorator {
           constructor(circle){
               this.circle = circle
           }
           brandraw(){
               this.circle.draw()
               this.dipict()
           }
           dipict(){
               console.log('this is dipict')
           }
       }
       var one = new Circle()
       one.draw()
       console.log('分割线-----')
       var two = new Decorator(one)
       two.brandraw()

//ES7z中的装饰器
@firsttest
class demo{
}
function(val){
	return 
}

代理模式

并不是直接对目标进行操作，而是找到一个中间商

    class Real{
           constructor(filename){
               this.filename = filename
           }
           display(){
               this.dicwait()
               console.log('this is filename : ' + this.filename)
           }
           dicwait(){
               console.log('holding please')
           }
       }
       class Fake{
           constructor(filename){
               this.filename = new Real(filename)
           }
           display(){
               this.filename.display()
           }
       }
       var one = new Fake('pic.jpg')
       one.display()

适配器模式装饰器模式代理模式

适配器模式：原有功能的好久，对原有功能的替换

装饰器模式：原有功能可用，同时添加了新的功能

代理模式：原有功能可用，但是你只是没有权限使用

观察者模式

主题中发生变化，观察者侦测到即更新

    class Subject {
          constructor(){
              this.state = 0
              this.observers = []
          }
          getState(){
              return this.state
          }
          setState(val){
              this.state = val
              this.notifyAllObserver()
          }
          notifyAllObserver(){
              this.observers.forEach(observer => {
                  observer.updata()
              })
          }
          attach(observer){
              this.observers.push(observer)
          }
      }
      class Observer{
          constructor(name, subject){
              this.name = name
              this.subject = subject
              this.subject.attach(this)
          }
          updata(){
              console.log(`now it is updata and ${this.subject.getState()}`)
          }
      }
      var one = new Subject()
      var o1 = new Observer('o1', one)

      one.setState(666)
      console.log('and then')
      one.setState(777)

迭代器模式

//下面就是迭代器
       class Iterator{
          constructor(val){
            this.list = val.list
            this.index = 0
          }
          next(){
            if(this.hasnext()){
                return this.list[this.index++]
            }
          }
          hasnext(){
            if(this.index >= this.list.length){
                return false
            }
            return true
          }
      }
     //数据传入
      class Container{
          constructor(list){
              this.list = list
          }
          getIterator(){
              return new Iterator(this)
          }
      }
      var test = new Container([1,2,3,4,5])
      var temp = test.getIterator()
      while(temp.hasnext()){
          console.log(temp.next())
      }

状态模式

   class State{
        constructor(light){
            this.light = light
        }
        handle(content){
            console.log(`当前的灯是${this.light}`)
            content.setState(this)
        }
     }
     //集中在context中进行更改
     class Context{
         constructor(){
             this.state = null
         }
         getState(){
             return this.state
         }
         setState(val){
             this.state = val
         }
     }
     var one = new Context()
     var yellow = new State('yellow')
     var green = new State('green')
     var red = new State('red')
     yellow.handle(one)
     console.log(one.getState())
     green.handle(one)
     console.log(one.getState())
     red.handle(one)
     console.log(one.getState())

JS中你需要知道的设计模式