下面给大家分享代码:
/* * 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();
总结
以上就是javascript实现保护变量不被随意修改的实例的详细内容。