/*
* 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 保护变量不被随意修改------优雅的编程的更多相关文章

  1. JavaScript 使用闭包保护变量 防止污染

    使用JavaScript编写插件或团队协作时,可使用闭包来解决此类以下两个问题: 1.定义过多全局变量,可能会造成全局变量命名冲突: 2.在插件内定义变量,需要保护该变量不被轻易修改: 优点:可以把局 ...

  2. JavaScript 基础 (变量声明, 数据类型, 控制语句)

    创建: 2017/09/16 更新: 2017/09/24 更改标题 [JavaScript 概要]-> [JavaScript 基础] 完成: 2017/09/25 更新: 2017/10/0 ...

  3. 从头开始学JavaScript (八)——变量

    原文:从头开始学JavaScript (八)--变量 一.变量分类: 基本类型值:null.undefined.number.string.Boolean: 引用类型值:保存在内存中的对象,如:Obj ...

  4. 【详解JavaScript系列】JavaScript之变量

    一  概述 本篇文章将讲解JavaScript中的变量,大致内容归结为: 1.变量定义 包括变量声明和变量初始化 2.变量种类 包括局部变量和全局变量 3.变量链式作用域及访问 二  内容 (一)变量 ...

  5. JavaScript函数变量作用域

    变量作用域 在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量. 如果两个不同的函数各自申明了同一变 ...

  6. JavaScript传递变量:值传递?引用传递?

    今天在看 seajs-2.2.1/src/util-events.js源码,里面有段代码不是很理解: var events = data.events = {} // Bind event seajs ...

  7. python保护变量(_),私有变量(__),私有方法,

    上图为常规代码 私有变量(__),私有方法:只是解释器换名字了,可以通过方法/实例字典发现改后的名字: 保护变量,解释器不做任何处理:只是开发者约定的,尽量不要改动: 此时实例无法修改__age属性值 ...

  8. JavaScript之变量(声明、解析、作用域)

    声明(创建) JavaScript 变量 在 JavaScript 中创建变量通常称为"声明"变量. 一.我们使用 var 关键词来声明变量: var carname; 变量声明之 ...

  9. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

随机推荐

  1. Python 版本对比

    python2 与 python3可认为代码不通用,你也可以点击Python2.x与3​​.x版本区别来查看两者的不同 python3.6以上支持f-string,一种很方便的变量替换方式 高版本可能 ...

  2. python工具之exccel模板生成报表

    from Db import Db from log import log import xlwt import xlrd from xlutils.copy import copy import s ...

  3. 【转】Java泛型方法

    1. 定义泛型方法 (1) 如果你定义了一个泛型(类.接口),那么Java规定,你不能在所有的静态方法.静态初块等所有静态内容中使用泛型的类型参数.例如: public class A<T> ...

  4. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  5. css3 blur模糊解决ie6-ie9兼容

    css3 blur模糊是css3的新特性,但是不兼容ie6-ie9,以下代码可以解决此问题: filter: progid:DXImageTransform.Microsoft.Blur(Pixel ...

  6. ES6学习笔记(12)----Reflect

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Reflect 1.概述:Object对象的内部方法都能在Reflect中找到,同时Reflec ...

  7. (4)《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型;div与span;<a>元素的链接色;伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

  8. elasticsearch 2.4在head删除数据(使用Delete By Query插件)

    之所以说明是2.4版,是因为不同版本删除的语法不一样(例如跟5.x就不同) 首先安装Delete By Query插件,方式跟安装head插件差不多,安装命令:plugin install delet ...

  9. android 防止bitmap 内存溢出

    在android开发过程中经常会处理网络图片发送内存溢出,那么怎么解决这种问题? 思路: 下载到本地 通过网络获取和文件下载存放到手机中目录 代码: // 获取网络 public InputStrea ...

  10. Quartz使用二 通过属性传递数据

    上一篇介绍了通过context.getJobDetail().getJobDataMap()方式获取传递的数据,其实可以通过定义属性来传递参数 package org.tonny.quartz; im ...