前端设计模式

1、工厂模式

1.png

Creator就像一个工厂一样 ， 生成一个个Product实例

/*
*  将new操作单独封装
*  遇到new时、就要考虑是否使用工厂模式
*/

class Product {
  constructor (name) {
      this.name = name
  }
 fn1 () {
 }
}
class Creator {
  create (name) {
      return new Product(name)
  }
}
const creater = new Creator()
const  p = creater.create('terry')
console.log(p)

应用场景：

1、 JQuery --- $('div')

class JQuery {
 constructor(selector) {
   const ele = Array.prototype.slice.call(document.querySelectorAll(selector))
   const len = ele.length
   for (let i = 0; i < len; i++) {
     this[i] = ele[i]
   }
   this.selector = selector
   this.length = len
 }
 html() {

 }
 css(data) {

 }
 // ...
}
window.$ = function (selector) {
 return new JQuery(selector)
}

2、React.createElement()

// React.createElement("div", null)
class Vnode {
  ...
}

React.createElement = function(tag, attrs, children) {
  return new Vnode(tag, attrs, children)
}

3、 Vue异步组件

单例模式

系统中被唯一使用的； 一个类只有一个实例；

// 模拟
class SingleObject {
    login() {
       console.log('login')
    }
}
// 静态方法
SingleObject.getInstance = (function() {
  let instance
  return function() {
    if (!instance) {
      instance = new SingleObject()
    }
    return instance
  }
})() 
/**
 * 什么叫单例模式， 每次获取的都是同一个东西
 */
let obj1 = SingleObject.getInstance()
obj1.login()
let obj2 = SingleObject.getInstance()
obj2.login()
console.log('obj1 === obj2', obj1 === obj2) // obj1 === obj2 true  【什么叫单例模式， 每次获取的都是同一个东西】

装饰器模式

观察者模式/发布订阅模式

代理模式