设计模式的学习;

leetcode and mianshi/堆栈.js

@@ -0,0 +1,9 @@
+let a = {n:10}
+let b = a
+b.m = b = {n: 20}
+console.log(a)
+console.log(b)
+
+//https://www.tuicool.com/articles/vUFbeu
+
+// https://www.tuicool.com/articles/eaeUZvy

发布订阅模式.js

@@ -0,0 +1,57 @@
+class EventBus {
+  constructor() {
+    this.events = {}
+  }
+
+  on(key,cb) {
+    if(!this.events[key]) {
+      this.events[key] = []
+    }
+    this.events[key].push(cb)
+  }
+
+  emit(key,...args) {
+    this.events[key] && this.events[key].forEach(cb => {
+      // cb.call(this,...args)
+      console.log('emit')
+      // console.log(cb())
+      // cb(...args)
+      cb.call(this,...args)
+    })
+  }
+
+  off(key, cb) {
+    let index = this.events[key]&&this.events[key].findIndex(item => cb === item)
+    if(index !== -1) {
+      this.events[key].splice(index,1)
+    }
+  }
+}
+
+
+let ev = new EventBus()
+
+function f1(m,n) {
+  console.log('f1',m,n)
+}
+
+function f2(a,b) {
+  console.log('f2', a,b)
+}
+function f3() {
+  console.log('f3')
+}
+function f4() {
+  console.log('f4')
+}
+ev.on('f1',f1)
+ev.on('f2',f2)
+ev.on('f3',f3)
+ev.on('f4',f4)
+// console.log(ev.events)
+ev.emit('f1',1,2)
+ev.emit('f2',f2)
+ev.emit('f3',f3)
+ev.emit('f4',f4)
+ev.off('f1',f1)
+ev.emit('f3',f3)

数组一些常用的方法实现.js

@@ -0,0 +1,28 @@
+Array.prototype.push = function() {
+  for(let i = 0; i< arguments.length; i++) {
+    this[this.length] = arguments[i]
+  }
+  return this.length
+}
+
+Array.prototype.pop = function(){
+  let len = this.length
+  if(len === 0) return
+  let value = this[this.length - 1]
+  this.length -= 1
+  return value
+}
+
+Array.prototype.shift = function() {
+  let len = this.length
+  if(len === 0) return
+  let value = this[0]
+  var newArr = []
+  for(let i = 1; i<len; i++) {
+    newArr.push(this[i])
+  }
+  this = newArr
+  return value
+}
+
+Array.prototype.unshift = 

观察者模式.js

@@ -0,0 +1,41 @@
+class Subject {
+  constructor() {
+    this.state = 0
+    this.observers = []
+  }
+  getState() {
+    return this.state
+  }
+  setState(state) {
+    this.state = state
+    this.notifyAllObservers()
+  }
+  notifyAllObservers() {
+    this.observers.forEach(observer => {
+      observer.update()
+    })
+  }
+  addObserver(observer) {
+    this.observers.push(observer)
+  }
+}
+
+class Observer {
+  constructor(name, subject) {
+    this.name = name
+    this.subject = subject
+    this.subject.addObserver(this)
+  }
+  update() {
+    console.log(`${this.name}update,state:${this.subject.getState()}`)
+  }
+}
+
+let sub = new Subject()
+let o1 = new Observer('o1',sub)
+let o2 = new Observer('o2',sub)
+
+sub.setState('更新')
+
+//一对多，多个观察者对应一个主题对象，当这个主题对象的状态更新的时候，就会通知所有的观察者对象
+// vue的响应式，Dom事件

设计模式之单例模式.js

@@ -0,0 +1,41 @@
+class LoginForm {
+  constructor() {
+    this.state = 'hide'
+  }
+  show() {
+    if(this.state === 'show') {
+      alert('已经显示')
+      return
+    }
+    this.state = 'show'
+    console.log('登录框显示成功')
+  }
+
+  hide() {
+    if(this.state === 'hide') {
+      alert('已经隐藏')
+      return
+    }
+    this.state = 'hide'
+    console.log('登录框隐藏成功')
+  }
+}
+LoginForm.getInstance =  (function() {
+  let instance
+  return function() {
+    if(!instance) {
+      instance = new LoginForm()
+    }
+    return instance
+  }
+})()
+let obj1 = LoginForm.getInstance()
+obj1.show()
+let obj2 = LoginForm.getInstance()
+obj2.hide()
+
+console.log(obj1.state,obj2.state)
+
+console.log(obj1 === obj2)
+
+// vuex redux的store