Javascript のオブザーバー パターンの詳細な説明 (グラフィック チュートリアル)

p.onclick = function click() {
 console.log('click')
}

//模拟代码
//我订阅了'marry' 事件
wo.on('marry',function(){
 //去参加婚礼酒席
})
//然后他发布。比如浏览器的点击
// 对应的我的 function就会执行

var xhr = new XMLHttpRequest ()
 xhr.open('get',url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 ps.innerHTML = &#39;<p>&#39; + this.response + &#39;</p>&#39;
 //
 }
 }
 xhr.responseType = &#39;json&#39;
 xhr.send(null)

//请求
function getData () {
 var xhr = new XMLHttpRequest ()
 xhr.open('get',url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 this.emit('渲染')
 // 发布
 }
 }
 xhr.responseType = 'json'
 xhr.send(null)
}
//渲染
function view () {}
xhr.on('渲染',view)

function view1 () {}
function view2 () {}
function view3 () {}
function view4 () {}
if(我要渲染view1) {
 xhr.on('渲染',view1) //订阅
 xhr.on('渲染',view2)
}else{
 xhr.on('渲染',view3)
 xhr.on('渲染',view4)
}

//这是一个工厂函数，可以创建store
const createStore = (reducer) => {
 let state; // 定义存储的state
 let listeners = [];
 // getState的作用很简单就是返回当前是state
 const getState = ()=> state;
 //定义一个派发函数
 //当在外界调用此函数的时候，会修改状态
 const dispatch = (action)=>{
 //调用reducer函数修改状态，返回一新的状态并赋值给这个局部状态变量
 state = reducer(state,action);
 //依次调用监听函数，通知所有的监听函数
 listeners.forEach(listener => listener());
 }
 //订阅此状态的函数，当状态发生变化的时候记得调用此监听函数
 const subscribe = function(listener){
 //先把此监听 加到数组中
 listeners.push(listener);
 //返回一个函数，当调用它的时候将此监听函数从监听数组移除
 return function(){
  listeners = listeners.filter(l => l != listener);
 }
 }
 //默认调用一次dispatch给state赋一个初始值
 dispatch();
 return {
 getState,
 dispatch,
 subscribe
 }
}
let store = createStore(reducer);
//把数据渲染到界面上
const render = () => {
 document.body.innerText = store.getState();
}
// 订阅状态变化事件，当状态变化时用监听函数
store.subscribe(render);
render();
var INCREASE_ACTION = {type: 'INCREMENT'};
document.addEventListener('click', function (e) {
 //触发一个Action
 store.dispatch(INCREASE_ACTION);
})

'use strict'
class EmitterEvent {
 constructor() {
 //构造器。实例上创建一个事件池
 this._event = {}
 }
 //on 订阅
 on (eventName, handler) {
 // 根据eventName，事件池有对应的事件数组，
 就push添加，没有就新建一个。
 // 严谨一点应该判断handler的类型，是不是function
 if(this._event[eventName]) {
 this._event[eventName].push(handler)
 } else {
 this._event[eventName] = [handler]
 }
 }
 emit (eventName) {
 // 根据eventName找到对应数组
 var events = this._event[eventName];
 // 取一下传进来的参数，方便给执行的函数
 var otherArgs = Array.prototype.slice.call(arguments,1)
 var that = this
 if(events) {
 events.forEach((event) => {
 event.apply(that, otherArgs)
 })
 }
 }
 // 解除订阅
 off (eventName, handler) {
 var events = this._event[eventName]
 if(events) {
 this._event[eventName] = events.filter((event) => {
 return event !== handler
 })
 }
 }
 // 订阅以后，emit 发布执行一次后自动解除订阅
 once (eventName, handler) {
 var that = this
 function func () {
 var args = Array.prototype.slice.call(arguments,0)
 handler.apply(that, args)
 this.off(eventName,func)
 }
 this.on(eventName, func)
 }
}
var event = new EmitterEvent()
function a (something) {
 console.log(something,'aa-aa')
}
function b (something) {
 console.log(something)
}
 event.once('dosomething',a)
 event.emit('dosomething', 'chifan')
 //event.emit('dosomething')
// event.on('dosomething',a)
// event.on('dosomething',b)
// event.emit('dosomething','chifan')
// event.off('dosomething',a)
// setTimeout(() => {
// event.emit('dosomething','hejiu')
// },2000)