JavaScript 保护变量不被随意修改的实现代码
时间:2019-04-07
本文章向大家介绍JavaScript 保护变量不被随意修改的实现代码,主要包括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 保护变量不被随意修改的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Django ORM的简单总结
- GO语言标准库概览
- 关于自动化平台的动态菜单设计
- go语言网络编程之tcp
- 实现简单的http并发请求,支持:GET、POST、HEAD、PUT
- 【go语言】Goroutines 并发模式(一)
- 【go语言】Goroutines 并发模式(二)
- 从零开始搭建Nginx和Tomcat的web集群环境
- 【翻译】为什么 goroutine 的栈内存无穷大?
- 从PowerVM,KVM到Docker:存储池的配置与调优---第一篇终结(第3子篇)
- goroutine背后的系统知识
- 从PowerVM,KVM到Docker:存储池的配置与调优---第一篇(第2子篇)
- 2017最后一天的学习-TensorFlow
- 从PowerVM,KVM到Docker:存储池的配置与调优---第一篇(第1子篇)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Oracle基本参数(LDAP_DIRECTORY_SYSAUTH)
- C#调用C++编写的DLL
- Oracle基本参数(LOG_ARCHIVE_DEST_n)
- [安装文档]Oracle 12c 单节点安装之安装前准备
- Oracle基本参数(NLS_LANGUAGE)
- Oracle基本参数(NLS_TERRITORY)
- C# 探测器测试系统
- Panuon.UI.Silver使用和介绍
- Oracle基本参数(OPEN_CURSORS)
- Oracle基本参数(PROCESSES)
- C# 中的多态性
- Oracle基本参数(REMOTE_LISTENER)
- C#基于yolov3的行人检测
- yolov3和yolov4检测效果对比
- Oracle基本参数(REMOTE_LOGIN_PASSWORDFILE)