本文通过实例代码给大家分享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 保护变量不被随意修改的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
支付行业下半场:精细化竞争时代开启

支付行业下半场:精细化

据统计,2018年全年,第三方支付机构因违规被处罚的金额超
360金融发行10亿ABS 资金渠道进一步多元化

360金融发行10亿ABS

此次ABS发行,是第一季度360金融获得上交所和深交所共计
酷派市值缩水17亿 地产大佬二公子发力5G前景如何?

酷派市值缩水17亿 地

全球第一个推出双卡双待的手机厂商酷派宣布复牌。
台积电5纳米工艺明年量产 苹果A14处理器率先尝鲜

台积电5纳米工艺明年

台积电CFO称,受5G智能手机需求的推动,台积电5纳米制造工
直击|京东3.71亿港元投资彩生活 打造"4+1智慧社区"

直击|京东3.71亿港元

京东宣布,集团及旗下京东物流集团、京东数字科技集团与
天宫二号受控再入大气层 空间实验室任务圆满完成

天宫二号受控再入大气

此次天宫二号空间实验室成功受控离轨并再入大气层,标志
最新文章
Javascript读写cookie的实例源码

Javascript读写cookie

今天小编就为大家分享一篇关于Javascript读写cookie的
微信小程序登录session的使用

微信小程序登录sessio

这篇文章主要介绍了微信小程序登录session的使用,小编
JavaScript中this用法学习笔记

JavaScript中this用法

在本篇文章里小编给大家分享了关于JavaScript中this用
nodejs微信开发之授权登录+获取用户信息

nodejs微信开发之授权

这篇文章主要介绍了nodejs微信开发之授权登录+获取用
nodejs微信开发之自动回复的实现

nodejs微信开发之自动

这篇文章主要介绍了nodejs微信开发之自动回复的实现,文
node微信开发之获取access_token+自定义菜单

node微信开发之获取ac

这篇文章主要介绍了node微信开发之获取access_token+