JavaScript protection variables are not arbitrarily modified------elegant programming

/** 1. If in rendertitle,rendercontent, such total data who can modify, unsafe * improved * 1. Specify a method to modify the data, if you want to modify the data can only go this method * * Action represents a Command object, is a normal JS object, at least need a field control command type types, other fields feel free * **/Const Change_font_sile= ' Change_font_sile ';//set a closure, protect the variable, and call it by the return value .functionCreateStore () {Let appState={fontSize:' 26px ', title:{text:Title, Color:' Red '}, content:{text:' Class capacity ', Color:' Green '        }    }    //protection variables are modified, deep clonesLet getstate= () =Json.parse (Json.stringify (appState)); //ways to change variablesLet dispatch= (action) ={        Switch(action.type) { CaseCHANGE_FONT_SILE:appState.fontSize=action.fontsize; default:                return; }    }    //returns the interface for modifying and fetching values  return{getState, dispatch}}let store=createstore ();//Accessor value functionfunctionRendertitle () {Let Titleele= Document.queryselector (' #title '); Titleele.innerhtml=store.getstate (). Title.text; TitleEle.style.color=store.getstate (). Title.color; TitleEle.style.fontSize=store.getstate (). fontSize;}functionrendercontent () {Let Titleele=document.queryselector ("#content"); Titleele.innerhtml=store.getstate (). Content.text; TitleEle.style.color=store.getstate (). Content.color; TitleEle.style.fontSize=store.getstate (). fontSize;}functionRenderapp () {rendertitle (); Rendercontent ()}//Modify the appstate inside the initial value, a single modified fileStore.dispatch ({type:change_font_sile,fontsize: ' 30px '}) Renderapp ();

JavaScript protection variables are not arbitrarily modified------elegant programming