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 保护变量不被随意修改------优雅的编程的更多相关文章
- JavaScript 使用闭包保护变量 防止污染
使用JavaScript编写插件或团队协作时,可使用闭包来解决此类以下两个问题: 1.定义过多全局变量,可能会造成全局变量命名冲突: 2.在插件内定义变量,需要保护该变量不被轻易修改: 优点:可以把局 ...
- JavaScript 基础 (变量声明, 数据类型, 控制语句)
创建: 2017/09/16 更新: 2017/09/24 更改标题 [JavaScript 概要]-> [JavaScript 基础] 完成: 2017/09/25 更新: 2017/10/0 ...
- 从头开始学JavaScript (八)——变量
原文:从头开始学JavaScript (八)--变量 一.变量分类: 基本类型值:null.undefined.number.string.Boolean: 引用类型值:保存在内存中的对象,如:Obj ...
- 【详解JavaScript系列】JavaScript之变量
一 概述 本篇文章将讲解JavaScript中的变量,大致内容归结为: 1.变量定义 包括变量声明和变量初始化 2.变量种类 包括局部变量和全局变量 3.变量链式作用域及访问 二 内容 (一)变量 ...
- JavaScript函数变量作用域
变量作用域 在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量. 如果两个不同的函数各自申明了同一变 ...
- JavaScript传递变量:值传递?引用传递?
今天在看 seajs-2.2.1/src/util-events.js源码,里面有段代码不是很理解: var events = data.events = {} // Bind event seajs ...
- python保护变量(_),私有变量(__),私有方法,
上图为常规代码 私有变量(__),私有方法:只是解释器换名字了,可以通过方法/实例字典发现改后的名字: 保护变量,解释器不做任何处理:只是开发者约定的,尽量不要改动: 此时实例无法修改__age属性值 ...
- JavaScript之变量(声明、解析、作用域)
声明(创建) JavaScript 变量 在 JavaScript 中创建变量通常称为"声明"变量. 一.我们使用 var 关键词来声明变量: var carname; 变量声明之 ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
随机推荐
- angularjs <input>标签获取时间显示问题
一般的后台管理中,几乎每个管理后台都有设置新密码的功能,但是获取的时候为了好看,都有统一用一定的标签,比如input标签,ng-model来控制显示数据,但是在获取时间的时候用会显示错乱 代码为: & ...
- iOS面试题之内存管理
本文围绕内存管理的几种方法展开叙述. 1.内存管理是什么? 内存管理,就是对内存资源进行优化. 2.内存管理的三种方法? Objective-C的内存管理主要有三种方式ARC(自动内存计数).MRC( ...
- CCF|中间数|Java
import java.util.*; public class tyt { public static void main(String[] args) { Scanner in = new Sca ...
- Kotlin学习的一些心得
1.工程manifest中的application节点有冲突时,添加 xmlns:tools="http://schemas.android.com/tools" tools:re ...
- macos openssl 生成rsa证书 -mark
创建私钥 openssl genrsa -out rsa_private_key.pem 1024 创建无密码私钥 openssl pkcs8 -topk8 -inform PEM –nocrypt ...
- php bz2扩展安装
php bz2扩展安装 2017年09月22日 14:14:36 Cookie_1030 阅读数:1781 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn ...
- zabbix实现自动发现功能添加磁盘监控
zabbix实现对磁盘动态监控 - Lenwood 原文 http://www.cnblogs.com/baizhantang/p/3253246.html 主题 Linux命令 zabbix 前言 ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- class 写在 import的位置 类的名字第一个字母大写 后面没括号 ES6
class 写在 import的位置 类的名字第一个字母大写 后面没括号 class ObTableDataClass {}或者 const ObTableDataClass = class { in ...
- 浏览器title失去焦点时改变title
document.addEventListener('visibilitychange', function() { var isHidden = document.hidden; if (isHid ...