耿直咸鱼

function getUndefinedStateErrorMessage(key, action) {
  const actionType = action && action.type
  const actionDescription =
    (actionType && `action "${String(actionType)}"`) || 'an action'

  return (
    `Given ${actionDescription}, reducer "${key}" returned undefined. ` +
    `To ignore an action, you must explicitly return the previous state. ` +
    `If you want this reducer to hold no value, you can return null instead of undefined.`
  )
}

function getUnexpectedStateShapeWarningMessage(
  inputState,
  reducers,
  action,
  unexpectedKeyCache
) {
  const reducerKeys = Object.keys(reducers)
  const argumentName =
    action && action.type === ActionTypes.INIT
      ? 'preloadedState argument passed to createStore'
      : 'previous state received by the reducer'

  if (reducerKeys.length === 0) {
    return (
      'Store does not have a valid reducer. Make sure the argument passed ' +
      'to combineReducers is an object whose values are reducers.'
    )
  }

  if (!isPlainObject(inputState)) {
    return (
      `The ${argumentName} has unexpected type of "` +
      {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] +
      `". Expected argument to be an object with the following ` +
      `keys: "${reducerKeys.join('", "')}"`
    )
  }

  const unexpectedKeys = Object.keys(inputState).filter(
    key => !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key]
  )

  unexpectedKeys.forEach(key => {
    unexpectedKeyCache[key] = true
  })

  if (action && action.type === ActionTypes.REPLACE) return

  if (unexpectedKeys.length > 0) {
    return (
      `Unexpected ${unexpectedKeys.length > 1 ? 'keys' : 'key'} ` +
      `"${unexpectedKeys.join('", "')}" found in ${argumentName}. ` +
      `Expected to find one of the known reducer keys instead: ` +
      `"${reducerKeys.join('", "')}". Unexpected keys will be ignored.`
    )
  }
}

/*
	assertReducerShape(reducers)函数
	输入值分析：
		- reducers 
	输出分析：
		- reducers 
*/
function assertReducerShape(reducers) {
  Object.keys(reducers).forEach(key => {
    const reducer = reducers[key]
    const initialState = reducer(undefined, { type: ActionTypes.INIT })

    if (typeof initialState === 'undefined') {
      throw new Error(
        `Reducer "${key}" returned undefined during initialization. ` +
          `If the state passed to the reducer is undefined, you must ` +
          `explicitly return the initial state. The initial state may ` +
          `not be undefined. If you don't want to set a value for this reducer, ` +
          `you can use null instead of undefined.`
      )
    }

    if (
      typeof reducer(undefined, {
        type: ActionTypes.PROBE_UNKNOWN_ACTION()
      }) === 'undefined'
    ) {
      throw new Error(
        `Reducer "${key}" returned undefined when probed with a random type. ` +
          `Don't try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` +
          `namespace. They are considered private. Instead, you must return the ` +
          `current state for any unknown actions, unless it is undefined, ` +
          `in which case you must return the initial state, regardless of the ` +
          `action type. The initial state may not be undefined, but can be null.`
      )
    }
  })
}

/*
	combineReducers函数用于合并reducers
		输入参数说明：
			- reducers：多个reducer
		输出说明：
			- combination 函数 （后面具体分析）
*/
export default function combineReducers(reducers) {
  /*
  	mock:
  	reducers = {
  		reducer1: reducer1,
  		reducer2: reducer2,
  		...
  		reducern: reducern,
  	}
  	维护两个变量：
  		reducerKeys = [reducer1, reducer2, ..., reducer3]
  		finalReducers = {}
  */
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  
  // 以下是浅复制的过程...   得到finalReducers 
  // 遍历reducers
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]
	
    // process.env.NODE_ENV用于判断生产环境或开发环境
    if (process.env.NODE_ENV !== 'production') {
      if (typeof reducers[key] === 'undefined') {
        warning(`No reducer provided for key "${key}"`)
      }
    }
	
    // 如果reducer是一个函数，就添加到finalReducers里面
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
    
  const finalReducerKeys = Object.keys(finalReducers)

  // This is used to make sure we don't warn about the same
  // keys multiple times.
  let unexpectedKeyCache
  if (process.env.NODE_ENV !== 'production') {
    unexpectedKeyCache = {}
  }

  // 校验reducers中的reducer
  let shapeAssertionError
  try {
    assertReducerShape(finalReducers)      // --------往上翻这个函数做了什么
  } catch (e) {
    shapeAssertionError = e
  }
	
    
  /*
  	combination函数：
  	输入参数分析：
  		- state：初始值为空对象
  		- action：一个对象 {type:xxx, data:xxx}
  */
  return function combination(state = {}, action) {
    if (shapeAssertionError) {
      throw shapeAssertionError
    }

    if (process.env.NODE_ENV !== 'production') {
      const warningMessage = getUnexpectedStateShapeWarningMessage(
        state,
        finalReducers,
        action,
        unexpectedKeyCache
      )
      if (warningMessage) {
        warning(warningMessage)
      }
    }
	
    /*
      维护两个变量：
      	hasChanged = false
      	nextState = {}
    */
    let hasChanged = false   // 用于监听状态有没有改变的
    const nextState = {}
    /*
    	mock:
    	finalReducers = {
            reducer1: reducer1,
            reducer2: reducer2,
            ...
            reducern: reducern,
  		}
  		
  		finalReducerKeys = [reducer1, reducer2, reducer3, ...]
  		
    */
    for (let i = 0; i < finalReducerKeys.length; i++) {  // 遍历finalReducers
      const key = finalReducerKeys[i]					// reducer1, reducer2, reducer3, ...
      const reducer = finalReducers[key]                 // 获取当前reducer: reducer1, reducer2, reducer3
      const previousStateForKey = state[key]             // 获取当前reducer在state
      const nextStateForKey = reducer(previousStateForKey, action)  // reducer纯函数加工状态获得新的state
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action) // --------往上翻这个函数做了什么
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey                  // nextState里面存入新的state [key=key, value=新的state]
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey   // 小状态改变否？？？
    }
      
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length   // 整体状态改变否？
    return hasChanged ? nextState : state   // 改变了 返回nextState 否则 返回state 
  }
}

function bindActionCreator(actionCreator, dispatch) {
  return function() {
     /*
     	apply修改this指向
     */
    return dispatch(actionCreator.apply(this, arguments))
  }
}

export default function bindActionCreators(actionCreators, dispatch) {
  // 参数校验
  /*
    如果actionCreators是一个函数，那么就需要bindActionCreator进行一些处理
    并且看到bindActionCreator返回的是一个函数
    
    如果actionCreators不是一个object（排除null），报错！
  */
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${
        actionCreators === null ? 'null' : typeof actionCreators
      }. ` +
        `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  // 维护一个参数boundActionCreators是一个对象，初始为空对象
  const boundActionCreators = {}
  
  /*
  	遍历actionCreators，如果actionCreator是一个函数，bindActionCreator后返回一个函数
  	最终返回boundActionCreators对象，key为原来的key，value为函数形式
  */
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

const funcs = [a, b, c];

function a(x) {
    return x+2;
};
function b(x) {
    return x+3;
};
function c(x) {
    return x+10;
};

console.log(compose(...funcs)(3))  // 18 = 3 + 2 + 3 + 10 

import compose from './compose'

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    // 创建一个store
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }
    
    // 下面的代码主要是对dispatch进行包装
	
    /*
    	middlewareAPI是一个对象，包含getState方法和dispatch方法（起到包装的作用）
    */
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)   // 闭包
    }
    /*
    	我们知道，多个middlewares是采用链式调用的解构的
    	首先把每个middleware都包装成一个函数
    	然后很好地用到了compose函数，对这些中间件进行嵌套执行，初始参数为store.dispatch
    	store.dispatch --M1--> res1 --M2--> res2 --M3--> ... --M N--> final res   
    */
    // map： middleware -> middleware(middlewareAPI)，相当于返回的是middleware(middlewareAPI)一次调用后的结果
    // 具体看example_redux_thunk里的{dispatch, getState} => next => action => {}这个部分
    // 所以chain相当于是
    /*
    	[
    		(next) => (action) => {},            ---M1
    		(next) => (action) => {},            ---M2
    		(next) => (action) => {},            ---M3
    		...
    	]
    	
    	经过compose之后
    	dispath等于
    	M2(M1(M3(stroe.dispatch)))的结果  
    	
    	[这一步就是利用洋葱模型一步一步再包装dispatch]
    	
    	代入洋葱模型想一想是不是特别容易理解？
    
    */
    const chain = middlewares.map(middleware => middleware(middlewareAPI))  
    dispatch = compose(...chain)(store.dispatch)   // 利用中间件一层层包装dispatch，生成一个新的dispatch

    return {
      ...store,    // 对象解构
      dispatch     // 同名属性覆盖
    }
  }
}

function createThunkMiddle(extraArgument) {
    return ({dispatch, getState} => (next) => (action) => {   // 典型的柯里化函数
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);   // 洋葱模型可以提前返回
        }
        
        return next(action);
    })
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddle;

export default thunk;

const initState = {...};

rootReducer = (state = initState, action) => {...return {...}};

import $$observable from 'symbol-observable'

import ActionTypes from './utils/actionTypes'
import isPlainObject from './utils/isPlainObject'

/*
	此函数用于创建Redux store（store可以认为是一个管理state的仓库）
		值得注意的是：
			- dispatch是改变state的唯一方法【核心概念2：state只读】
			- app里面只能有一个store【核心概念1:单一数据源】：
				如果你的app有很多模块的话，你可以通过多个reducer来管理，通过combineReducer来组合reducer
				
	参数说明：
		1. reducer {Function} 通过前面的说明已经知道reducer是一个纯函数，用于初始化状态和加工状态
		2. preloadedState {any} 初始状态
		3. enhancer {Function} 增强器（可认为是拓展功能），比如中间件等等 Redux 附带的唯一存储增强器是`applyMiddleware()`。
	返回值说明：
		store
			有如下功能：
			- read state 读取状态                     - getSate
			- dispatch action 调度动作			      - dispatch
			- subscribe to changes  监听变化          - subscribe
			
			[replaceReducer和observable不是很重要]

*/
export default function createStore(reducer, preloadedState, enhancer) {
  /*
  	Step1：参数校验
  		1. 校验1：直接传入多个enhancers的情况，下面注释说明了，你可能是传入了多个enhancers，直接传入是不对的，你需要把它们组合（compose them）
  		2. 检验2：没传入初始状态的情况，也就是你只穿了两个参数，那么你的第二个参数应该是enhancer，而preloadedState为undefined
  		3. 校验3：检验enhancer是不是一个函数
  		4. 校验4：reducer是不是一个函数
  */
  if (
    (typeof preloadedState === 'function' && typeof enhancer === 'function') ||
    (typeof enhancer === 'function' && typeof arguments[3] === 'function')
  ) {
    throw new Error(
      'It looks like you are passing several store enhancers to ' +
        'createStore(). This is not supported. Instead, compose them ' +
        'together to a single function.'
    )
  }

  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }

    return enhancer(createStore)(reducer, preloadedState)
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.')
  }
	
  /*
  	Step2：定义内部变量
  		1. 变量1：currentReducer = reducer             | 当前的reducer 
  		2. 变量2：currentState = preloadedState        | 当前的state：可被getState()获取
  		3. 变量3：currentListeners = []                | 监听列表
  		4. 变量4：nextListeners = currentListeners     | 监听列表
  		5. 变量5：isDispatching = false                | 是否正在被dispatch（调度）
  */
  let currentReducer = reducer
  let currentState = preloadedState
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false
	
  /*
  	 ensureCanMutateNextListeners函数：
  	 	生成currentListeners的浅拷贝，可以把nextListeners作为临时调度列表
  	 	这可以防止消费者调用的任何错误在调度过程中订阅/取消订阅
  
  */
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  /*
  	getState函数
  		返回当前状态（currentState）
  */
  function getState() {
    /*
    	获取state的时候必须保证这个reducer已经结束工作了，store已经接收到新的state了，才能调用getState
    */
    if (isDispatching) {
      throw new Error(
        'You may not call store.getState() while the reducer is executing. ' +
          'The reducer has already received the state as an argument. ' +
          'Pass it down from the top reducer instead of reading it from the store.'
      )
    }

    return currentState
  }

    
  /*
  	subscribe函数：作用是订阅监听
  		任何时候dispatch一个action都会调用这个函数【一触即发！】
  		调用action后state object tree的部分可能已经改变了
  		所以可以再去调用getState()读取回调内的当前状态树	
  		
  	参数说明：
  		- listener：监听到变化后执行的函数，比如subscribe(function() {console.log(1)}) 变化后打印1
  	返回值说明：
  		- unsubscribe {Fuction}： 返回一个具有取消订阅功能的函数
  
  */
  function subscribe(listener) {
    /*
    	listener必须是一个函数
    		举个例子，listener是一个render函数，调用subscribe就会重新渲染某部分的页面（取决于你的render函数需要render什么）
    */
    if (typeof listener !== 'function') {
      throw new Error('Expected the listener to be a function.')
    }
	
    /*
    	同理：获取state的时候必须保证这个reducer已经结束工作了，store已经接收到新的state了，才能调用getState
    	这也就是说明，顺序是 dispatch action -> state改变 -> 被subscribe(listener) 监听到 -> 获取新的状态 -> listener函数调用
    	举例： 计时器：dispatch action [目的在于使得value+1] -> value状态改变 -> 被subscribe(render) 监听到 -> 获取新的state -> 重新渲染
    */
    if (isDispatching) {
      throw new Error(
        'You may not call store.subscribe() while the reducer is executing. ' +
          'If you would like to be notified after the store has been updated, subscribe from a ' +
          'component and invoke store.getState() in the callback to access the latest state. ' +
          'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
      )
    }
	
    // Sub-Step1: 设置isSubscribed 为 true
    let isSubscribed = true
	
    // Sub-Step2: (1) 浅复制currentListeners[当前的监听列表]，(2) 把监听函数push到监听列表中
    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    /*
    	unsubscribe函数：具有取消订阅功能
    */
    return function unsubscribe() {
      // 只有isSubscribed为true的才能被取消订阅
      if (!isSubscribed) {
        return
      }
	
      /*
      	同理：正在被执行的不能取消订阅
      */
      if (isDispatching) {
        throw new Error(
          'You may not unsubscribe from a store listener while the reducer is executing. ' +
            'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
        )
      }
		
      // sub-step3: 修改isSubscribed 为 false
      isSubscribed = false
	
      // sub-step4: 浅复制监听列表
      ensureCanMutateNextListeners()
        
      // sub-step5: 监听完毕，从列表中删除它
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
      currentListeners = null
    }
  }
    
  /*
  	 dispatch函数：[调度函数] 划重点！回顾：这是改变状态的唯一方法！！！！！ 【核心概念2：state只读】
  	
  	dispatch被调用后，reducer将会被调用，store通过转发dispatch(action) 中包含的previousState和action给redeucer，reducer返回newState给store，React component可以通过getState获取newState
  	注意：基本实现仅仅支持普通对象的操作，如果的状态是一个Promise Obserable thunk等等，你需要借助与中间件（middleware） 【后面介绍】
  		参数说明：
  			- action 是一个object，格式为 {type:xxx, data:xxx}
  		返回值说明：
  			- {Object} 为了方便，返回action对象，但是里面的data是经过更改了
  */ 
    
  function dispatch(action) {
    /*
    isPlainObject函数不贴代码了~看源码的意思，isPlainObject就是用来判断action是不是一个对象
    */
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }
	
    /*
    只有定义了action.type才能进行后续操作，所以type不能是undefined
    */
    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
          'Have you misspelled a constant?'
      )
    }
	
    /*
    正在被dispatch的action不能传入到reducer中处理
    */
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }
	
    /*
    sub-step1：
    	- 切换isDispatching为true
    	- currentState为currentReducer(currentState, action)处理后返回的state
    		reducer函数举例：
    		function currentReducer(state={count:0}, action) => {
    			if (action.type === 'INCREMENT') {
    				return {...state, count: state.count+1}
    			}
    		}
    执行完毕后，也就是currentState返回后，
    切换isDispatching为false
    */
    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
	
    /*
    sub-step2：
    	触发listener函数
    */
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
	
    return action
  }
	
    
  /*
  	replaceReducer函数：替换store当前使用的reducer来计算 state
  		不是特别重要，就是替换当前的reducer
  		
  */
  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }

    currentReducer = nextReducer

    dispatch({ type: ActionTypes.REPLACE })
  }
    
   /*
	observable函数：
		不重要~暂时不说了
   */
  function observable() {
    const outerSubscribe = subscribe
    return {
   
      subscribe(observer) {
        if (typeof observer !== 'object' || observer === null) {
          throw new TypeError('Expected the observer to be an object.')
        }

        function observeState() {
          if (observer.next) {
            observer.next(getState())
          }
        }

        observeState()
        const unsubscribe = outerSubscribe(observeState)
        return { unsubscribe }
      },

      [$$observable]() {
        return this
      }
    }
  }

  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

function getState() {
    /*
    	获取state的时候必须保证这个reducer已经结束工作了，store已经接收到新的state了，才能调用getState
    */
    if (isDispatching) {
      throw new Error(
        'You may not call store.getState() while the reducer is executing. ' +
          'The reducer has already received the state as an argument. ' +
          'Pass it down from the top reducer instead of reading it from the store.'
      )
    }

    return currentState
}

function dispatch(action) {	
    /*
    正在被dispatch的action不能传入到reducer中处理
    */
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }
	
    /*
    sub-step1：
    	- 切换isDispatching为true
    	- currentState为currentReducer(currentState, action)处理后返回的state
    		reducer函数举例：
    		function currentReducer(state={count:0}, action) => {
    			if (action.type === 'INCREMENT') {
    				return {...state, count: state.count+1}
    			}
    		}
    执行完毕后，也就是currentState返回后，
    切换isDispatching为false
    */
    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
	
    /*
    sub-step2：
    	触发listener函数
    */
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
	
    return action
}

function subscribe(listener) {
    /*
    	listener必须是一个函数
    		举个例子，listener是一个render函数，调用subscribe就会重新渲染某部分的页面（取决于你的render函数需要render什么）
    */
    if (typeof listener !== 'function') {
      throw new Error('Expected the listener to be a function.')
    }
	
    if (isDispatching) {
      throw new Error(
        'You may not call store.subscribe() while the reducer is executing. ' +
          'If you would like to be notified after the store has been updated, subscribe from a ' +
          'component and invoke store.getState() in the callback to access the latest state. ' +
          'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
      )
    }
	
    // Sub-Step1: 设置isSubscribed 为 true
    let isSubscribed = true
	
    // Sub-Step2: (1) 浅复制currentListeners[当前的监听列表]，(2) 把监听函数push到监听列表中
    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    /*
    	unsubscribe函数：具有取消订阅功能
    */
    return function unsubscribe() {
      // 只有isSubscribed为true的才能被取消订阅
      if (!isSubscribed) {
        return
      }
	
      /*
      	同理：正在被执行的不能取消订阅
      */
      if (isDispatching) {
        throw new Error(
          'You may not unsubscribe from a store listener while the reducer is executing. ' +
            'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
        )
      }
		
      // sub-step3: 修改isSubscribed 为 false
      isSubscribed = false
	
      // sub-step4: 浅复制监听列表
      ensureCanMutateNextListeners()
        
      // sub-step5: 监听完毕，从列表中删除它
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
      currentListeners = null
    }
 }

// 获取按钮和展示value的标签
const spanValue = document.getElementById('value');
const incrementBtn = document.getElementById('increment');
const decrementBtn = document.getElementById('decrement');
// 封装一个reducer函数：纯函数，用于初始化状态和加工状态
/*
            传入两个参数state和action
                {
                    type: xxx,
                    data: xxx,
                }

        */
function count(state, action) {
    if (typeof state === 'undefined') return 0;

    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        default:
            return state;
    }
}

// 创建一个store，参数参数为reducer = count，其余两个参数忽略
const store = Redux.createStore(count);
console.log(store);

// 设置listener函数动态展示数据
const listener = function() {
    spanValue.innerText = store.getState().toString();
}

// 订阅listener
store.subscribe(listener);

// 设置dispatch
incrementBtn.addEventListener("click", () => {
    store.dispatch({type:'INCREMENT'})
})

decrementBtn.addEventListener("click", () => {
    store.dispatch({type:'DECREMENT'})
})

function getRandomColor(bool) {
    // 生成十六进制
    if (bool) {
        let str = '';
        for (let i = 0; i < 6; i++) {
            // Math.random() 取值为0-1   toString(16)转为16进制
            let c = Math.floor(Math.random()*16.toString(16));
            str += c;
        };
      	return `#${str}`
    } else {  // 生成rgba值
        let r = Math.floor(Math.random()*256);
        let g = Math.floor(Math.random()*256);
        let b = Math.floor(Math.random()*256);
        return `rgb(${r}, ${g}, ${b})`;
    }
}

function getColor16() {
    let arr = [];
    for (let i = 0; i < 3; i++) {
        // 生成r/g/b
        arr[i] = Math.floor(Math.random()*256);
        
        // 16进制转换
        arr[i] = arr[i] < 16 ? `0${arr[i].toString(16)}` : arr[i].toString(16);
    }
    return '#' + arr.join('');
}

// test 
console.log(getColor16());   // #6861b8

// src/ setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        "/api",
    createProxyMiddleware({
            //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
            target: "http://localhost:5000", //配置转发目标地址(能返回数据的服务器地址)
            changeOrigin: true, //控制服务器接收到的请求头中host字段的值
            /* changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000 changeOrigin默认值为false，但我们一般将changeOrigin值设为true */
            pathRewrite: {
            "^/api": "" }, //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
        })
    )
}

// 登录请求（我单独写出来了~）
import axios from 'axios';

const { username, password } = values;  // 解构
const data = {
    username,
    password,
}

const response = aixos(
    method: 'POST',
    url, 
    data,
)

router.post('/register', async (req, res) => {
    res.send({msg: 'test接口调用成功！'})
})

// 登录请求（我单独写出来了~）
import axios from 'axios';

const { username, password } = values;  // 解构
const data = {
    username,
    password,
}

const response = aixos(
    method: 'POST',
    url, 
    data: JSON.stringify(data),
    headers: {
    	'Context-type': 'application/json',
    }, 
)

// 登录请求（我单独写出来了~）
import axios from 'axios';
import qs from 'qs';

const { username, password } = values;  // 解构
const data = {
    username,
    password,
}

const response = aixos(
    method: 'POST',
    url, 
    data: qs.stringify(data),
    headers: {
    	'Context-type': 'application/json',
    }, 
)

element.classList.[method](value)

div.classList.add('disabled');
console.log(div.classList);

console.log(div.classList.contains('disabled'));

div.classList.remove('disabled');
console.log(div.classList);

div.classList.toggle('selected');
div.classList.toggle('user');
console.log(div.classList);

const div = document.getElementsByTagName('div')[0];
  
for (let name of div.classList) {
    console.log(name);
}

// src/api/ajax.js
import axios from 'axios';
import qs from 'qs';
import {message} from 'antd';


const instance = axios.create({
    timeout: 10000,
})

// 添加请求拦截器
instance.interceptors.request.use(config => { 
    // console.log('config', config);
    config.headers.Authorization = sessionStorage.getItem('token') || '';
    return config;
}, err => {
    return Promise.reject(err);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
    console.log(response);
    // 我后端是权限校验成功
    if (response.data.msg === '权限校验成功！') {
        window.history.pushState(null, 'home','/');
    } else {
        return Promise.reject(response.data.msg);
    }
}, err => {
    if (err.response) {
        // token失效，回到登录页面
        window.history.pushState(null, 'login','/login');
    }
})

export default function ajax(method='GET', url, data={}, config) {

    return new Promise((resolve, reject) => {
        let promise;
        // 执行异步ajax请求
        if (method === 'GET') {
            promise = instance({
                method:'GET',
                url, 
                params:data,
                ...config,
            })  // params配置指定的是query参数
        } else {
            promise = axios({
                method: 'POST',
                url, 
                data: qs.stringify(data),
                headers: {
                  'Context-type': 'application/json',
                  'Authorization': 'Bearer ' + window.sessionStorage.getItem('token'),
                }, 
                ...config,
            })
        };

        promise.then(response => {
            // 如果成功了，调用resolve(response.data)
            resolve(response);
        }).catch(error => {    // 对所有ajax请求出错做统一处理，这样外层就不用再处理错误了
            // 如果失败了，提示请求后台出错
            reject(message.error(error));
        })
    })
}

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        "/api",
    createProxyMiddleware({
            //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
            target: "http://localhost:5000", //配置转发目标地址(能返回数据的服务器地址)
            changeOrigin: true, //控制服务器接收到的请求头中host字段的值
            /* changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000 changeOrigin默认值为false，但我们一般将changeOrigin值设为true */
            pathRewrite: {
            "^/api": "" }, //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
        })
    )
}

// src/api/index.js
import ajax from './ajax';

// 注册
export const reqRegister = (username, password) => ajax('POST', '/api/register', {username, password});

// 登录
export const reqLogin = (username, password) => ajax('POST', '/api/login', {username, password});

// 权限校验 
export const reqAuth = () => ajax('POST', '/api/auth', {});

// app.js
const express = require('express');

const app = express();

/*
    port: 4000
*/
app.listen(4000, () => {
    console.log('serve is running on port: 4000');
})

// database/init.js
const { Sequelize } = require('sequelize');

const sequelize= new Sequelize('数据库名称', 'root', '你的密码', {
    host: 'localhost',
    port: '3306',
    dialect: 'mysql'
})

require('./database/init')

// database/init.js
const { Sequelize } = require('sequelize');

const sequelize= new Sequelize('test_login', 'root', 'yyy674531', {
    host: 'localhost',
    // @ts-ignore
    port: '3306',
    dialect: 'mysql'
})


// 测试连接
try {
    sequelize.authenticate();
    console.log('Connection has been established successfully.');
  } catch (error) {
    console.error('Unable to connect to the database:', error);
}


module.exports  = {Sequelize, sequelize};  // 这里导出，下面有用！

// database/models/User.js
const { Op, Model, DataTypes } = require('sequelize');
const { Sequelize, sequelize } = require('../init.js');

const User = sequelize.define('users_info', {
    // 应用属性： 禁止null 唯一约束 验证器
    username: {
        type: DataTypes.STRING,  
        allowNull: false,   // 1. 禁止 null 值
        unique: true,   // 2. 唯一约束
    },
    password: {
        type: DataTypes.STRING,
        allowNull: false,
        // validate: {    // 3. 验证器
        //    is: /^[0-9a-f]{64}$/i
        // }
    }
});

// 将模型与数据库同步
/*
    注意：如果表已经存在，使用{force: true}将该表删除 
*/ 
(async () => {
    await User.sync().then(() => {
        console.log('user表模型已经同步');
    })
})();

// router/user.js
const express = require('express');
const router = express.Router();

// middleware that is specific to this router
// router.use(function timeLog(req, res, next) {
//     console.log('Time:', Date.now());
//     next();
// });

// 注册
router.get('/home', (req, res) => {
    res.send({msg: 'Welcome!'});
})

module.exports = router;