/*
* 1.如果在renderTitle，renderContent里面，這樣總數據誰都能修改，不安全
* 改進
* 1.規定一個專門修改數據的方法，如果想修改數據只能走這個方法
*
* action代表一個命令對象，就是一個普通的js對象，起碼需要一個字段控制命令類型type,其他字段隨意
*
* */
const CHANGE_FONT_SILE='CHANGE_FONT_SILE';
//設置一個閉包，把變量保護起來，通過返回值調用
function createStore() {
  let appState={
    fontSize:'26px',
    title:{
      text:'標題',
      color:'red'
    },
    content:{
      text:'類容',
      color:'green'
    }
  }
  //保護變量被修改，深克隆
  let getState=()=>JSON.parse(JSON.stringify(appState));
  //改變變量的方法
  let dispatch=(action)=>{
    switch(action.type){
      case CHANGE_FONT_SILE:
        appState.fontSize=action.fontSize;
      default:
        return;
    }
  }
  //返回出去的修改和取值的接口
 return{
   getState,
   dispatch
 }
}
let store=createStore();
//取值函數
function renderTitle() {
  let titleEle = document.querySelector('#title');
  titleEle.innerHTML = store.getState().title.text;
  titleEle.style.color = store.getState().title.color;
  titleEle.style.fontSize = store.getState().fontSize;
}
function renderContent() {
  let titleEle=document.querySelector("#content");
  titleEle.innerHTML=store.getState().content.text;
  titleEle.style.color=store.getState().content.color;
  titleEle.style.fontSize=store.getState().fontSize;
}
function renderApp() {
  renderTitle();
  renderContent()
}
//修改appState里面初始值，單獨一個修改文件
store.dispatch({type:CHANGE_FONT_SILE,fontSize:'30px'})
renderApp();