本文通过实例代码给大家分享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();

总结

以上所述是小编给大家介绍的JavaScript 保护变量不被随意修改的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
乘风破浪的B站,何时能占据C位?

乘风破浪的B站,何时能

这半年来,B站乘风破浪,热点不停。7月9日,路透社援引知情
盖茨:新冠治疗药物应提供给需要的人 而非“出价最高者”

盖茨:新冠治疗药物应提

当地时间7月11日,美国盖茨基金会联席主席比尔·盖茨在
特斯拉在美国大幅下调Model Y价格

特斯拉在美国大幅下调

特斯拉美国官网显示,Model Y起售价下调至50000美元下方
特斯拉9月22日将举行“电池日” 马斯克身价超巴菲特

特斯拉9月22日将举行

北京时间7月11日,特斯拉向美国证券交易日委员会(SEC)递交
杜海涛:未与网利宝直接签过代言合同 积极跟进事件进展

杜海涛:未与网利宝直接

11日,有报道称杜海涛代言的理财产品网利宝爆雷,杜海涛被
传统车企开不下去的4S店,新势力为何加速跑马圈地?

传统车企开不下去的4S

股价一路暴涨至近1400美元,创始人轻松兑现数十亿美元奖
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大