javascript 保護變量不被隨意修改------優雅的編程

/*
* 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();