欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 保護變量不被隨意修改的實現(xiàn)代碼

 更新時間:2017年09月27日 11:36:40   作者:八bug哥哥  
本文通過實例代碼給大家分享JavaScript 保護變量不被隨意修改的實現(xiàn)方法,需要的朋友參考下吧

下面給大家分享代碼:

/*
* 1.如果在renderTitle,renderContent里面,這樣總數(shù)據(jù)誰都能修改,不安全
* 改進
* 1.規(guī)定一個專門修改數(shù)據(jù)的方法,如果想修改數(shù)據(jù)只能走這個方法
*
* 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();
//取值函數(shù)
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 保護變量不被隨意修改的實現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • 可以用鼠標拖動的DIV實現(xiàn)思路及代碼

    可以用鼠標拖動的DIV實現(xiàn)思路及代碼

    DIV可以拖動的效果,想必大家都有見到過吧,在本文也為大家實現(xiàn)一個不錯的可以用鼠標拖動的div,感興趣的各位不要錯過
    2013-10-10
  • JavaScript與C# Windows應用程序交互方法

    JavaScript與C# Windows應用程序交互方法

    JavaScript與C# Windows應用程序交互方法...
    2007-06-06
  • JS定時器不可靠的原因及解決方案

    JS定時器不可靠的原因及解決方案

    JavaScript中所有的任務分為同步任務與異步任務,同步任務,顧名思義就是立即執(zhí)行的任務,它一般是直接進入到主線程中執(zhí)行,這篇文章主要介紹了JS定時器不可靠的原因及解決方案,需要的朋友可以參考下
    2022-01-01
  • JavaScript中閉包的詳解

    JavaScript中閉包的詳解

    本文主要介紹了JavaScript中閉包的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • javascript實現(xiàn)蒙版與禁止頁面滾動

    javascript實現(xiàn)蒙版與禁止頁面滾動

    這篇文章主要為大家詳細介紹了javascript實現(xiàn)蒙版與禁止頁面滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • javascript js 操作數(shù)組 增刪改查的簡單實現(xiàn)

    javascript js 操作數(shù)組 增刪改查的簡單實現(xiàn)

    下面小編就為大家?guī)硪黄猨avascript js 操作數(shù)組 增刪改查的簡單實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 基于JavaScript實現(xiàn)拖動滑塊效果

    基于JavaScript實現(xiàn)拖動滑塊效果

    這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)拖動滑塊效果,拖動滑塊時數(shù)字進行變化,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • JavaScript幾種形式的樹結構菜單

    JavaScript幾種形式的樹結構菜單

    今天我主要講3種不同展示的JavaScript樹結構菜單,分別是懸浮層樹(Tree)、右鍵菜單樹(ContextMenu)和節(jié)點樹(TreeMenu),目前都支持無限級層次。
    2010-05-05
  • innerHTML中標簽可以換行的方法匯總

    innerHTML中標簽可以換行的方法匯總

    本文給大家分享的是一個在javascript中使用innerhtml輸出的時候如何實現(xiàn)換行的小技巧,其實很簡單,在需要換行的地方加上\即可
    2015-08-08
  • 解析JavaScript數(shù)組方法reduce

    解析JavaScript數(shù)組方法reduce

    本文主要介紹了JavaScript數(shù)組方法reduce的概述、語法、參數(shù)、工作原理等,由淺入深,便于理解。需要的朋友可以看下
    2016-12-12

最新評論