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

//模擬代碼
//我訂閱了'marry' 事件
wo.on('marry',function(){
 //去參加婚禮酒席
})
//然后他發(fā)布。比如瀏覽器的點擊
// 對應(yīng)的我的 function就會執(zhí)行

var xhr = new XMLHttpRequest ()
 xhr.open('get',url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 divs.innerHTML = '<p>' + this.response + '</p>'
 //
 }
 }
 xhr.responseType = 'json'
 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('渲染')
 // 發(fā)布
 }
 }
 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)
}

//這是一個工廠函數(shù)，可以創(chuàng)建store
const createStore = (reducer) => {
 let state; // 定義存儲的state
 let listeners = [];
 // getState的作用很簡單就是返回當(dāng)前是state
 const getState = ()=> state;
 //定義一個派發(fā)函數(shù)
 //當(dāng)在外界調(diào)用此函數(shù)的時候，會修改狀態(tài)
 const dispatch = (action)=>{
 //調(diào)用reducer函數(shù)修改狀態(tài)，返回一新的狀態(tài)并賦值給這個局部狀態(tài)變量
 state = reducer(state,action);
 //依次調(diào)用監(jiān)聽函數(shù)，通知所有的監(jiān)聽函數(shù)
 listeners.forEach(listener => listener());
 }
 //訂閱此狀態(tài)的函數(shù)，當(dāng)狀態(tài)發(fā)生變化的時候記得調(diào)用此監(jiān)聽函數(shù)
 const subscribe = function(listener){
 //先把此監(jiān)聽 加到數(shù)組中
 listeners.push(listener);
 //返回一個函數(shù)，當(dāng)調(diào)用它的時候?qū)⒋吮O(jiān)聽函數(shù)從監(jiān)聽數(shù)組移除
 return function(){
  listeners = listeners.filter(l => l != listener);
 }
 }
 //默認(rèn)調(diào)用一次dispatch給state賦一個初始值
 dispatch();
 return {
 getState,
 dispatch,
 subscribe
 }
}
let store = createStore(reducer);
//把數(shù)據(jù)渲染到界面上
const render = () => {
 document.body.innerText = store.getState();
}
// 訂閱狀態(tài)變化事件，當(dāng)狀態(tài)變化時用監(jiān)聽函數(shù)
store.subscribe(render);
render();
var INCREASE_ACTION = {type: 'INCREMENT'};
document.addEventListener('click', function (e) {
 //觸發(fā)一個Action
 store.dispatch(INCREASE_ACTION);
})

'use strict'
class EmitterEvent {
 constructor() {
 //構(gòu)造器。實例上創(chuàng)建一個事件池
 this._event = {}
 }
 //on 訂閱
 on (eventName, handler) {
 // 根據(jù)eventName，事件池有對應(yīng)的事件數(shù)組，
 就push添加，沒有就新建一個。
 // 嚴(yán)謹(jǐn)一點應(yīng)該判斷handler的類型，是不是function
 if(this._event[eventName]) {
 this._event[eventName].push(handler)
 } else {
 this._event[eventName] = [handler]
 }
 }
 emit (eventName) {
 // 根據(jù)eventName找到對應(yīng)數(shù)組
 var events = this._event[eventName];
 // 取一下傳進來的參數(shù)，方便給執(zhí)行的函數(shù)
 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 發(fā)布執(zhí)行一次后自動解除訂閱
 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)