/** 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();
以上就是如何用js保护变量不被随意修改的详细内容。