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 this关键字的问题
Jan 09 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
javascript学习之json入门
2016/12/22 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
python单链表实现代码实例
2013/11/21 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
使用python编写监听端
2018/04/12 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python函数返回不定数量的值方法
2019/01/22 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
员工考核管理制度
2014/02/02 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang