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

最新资讯
百亿保健帝国权健是如何一步步覆灭的?

百亿保健帝国权健是如

从“丁香医生”发布质疑文章,到束某某等16人被依法批准
LG CEO:智能手机业务虽然常年亏损 但LG不会放弃

LG CEO:智能手机业务虽

LG CEO乔晟金(Jo Seong-jin)近日表示,虽然LG的智能手机
瑞信:Q1全球智能手机产量将下跌19% 5年来最低水平

瑞信:Q1全球智能手机产

瑞士信贷(Credit Suisse)今日发布报告称,今年第一季度
苏宁易购:苏宁控股拟受让员工持股计划所持股份

苏宁易购:苏宁控股拟受

苏宁易购发布公告称,公司实控人、控股股东张近东的一致
字节跳动新社交产品疑似“多闪”,仍以短视频为基础

字节跳动新社交产品疑

字节跳动从腾讯的社交主战场发起正面攻击,已经是迟早的
王慧文回应美团涉足游戏领域:就试试 别多想

王慧文回应美团涉足游

针对美团点评涉足游戏领域的传闻,美团点评高级副总裁王
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图