/*
* 1.如果在renderTitle，renderContent里面，這樣總數(shù)據(jù)誰(shuí)都能修改，不安全
* 改進(jìn)
* 1.規(guī)定一個(gè)專門修改數(shù)據(jù)的方法，如果想修改數(shù)據(jù)只能走這個(gè)方法
*
* action代表一個(gè)命令對(duì)象，就是一個(gè)普通的js對(duì)象，起碼需要一個(gè)字段控制命令類型type,其他字段隨意
*
* */
const CHANGE_FONT_SILE='CHANGE_FONT_SILE';
//設(shè)置一個(gè)閉包，把變量保護(hù)起來(lái)，通過(guò)返回值調(diào)用
function createStore() {
  let appState={
    fontSize:'26px',
    title:{
      text:'標(biāo)題',
      color:'red'
    },
    content:{
      text:'類容',
      color:'green'
    }
  }
  //保護(hù)變量被修改，深克隆
  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();
//取值函數(shù)
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里面初始值，單獨(dú)一個(gè)修改文件
store.dispatch({type:CHANGE_FONT_SILE,fontSize:'30px'})
renderApp();