JavaScript 保护变量不被随意修改的实现代码


Posted in Javascript onSeptember 27, 2017

下面给大家分享代码:

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

Javascript 相关文章推荐
js判断变量是否未定义的代码
Mar 28 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
微信小程序 按钮滑动的实现方法
Sep 27 #Javascript
详解Vue-cli代理解决跨域问题
Sep 27 #Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
javascript 作用于作用域链的详解
Sep 27 #Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 #Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 #Javascript
You might like
在PHP中执行系统外部命令
2006/10/09 PHP
discuz安全提问算法
2007/06/06 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php查询内存信息操作示例
2019/05/09 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Django日志模块logging的配置详解
2017/02/14 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
用python读取xlsx文件
2020/12/17 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
项目安全员岗位职责
2015/02/15 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang