国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 動(dòng)態(tài)數(shù)據(jù)綁定三大難點(diǎn)

姘存按 / 3161人閱讀

摘要：動(dòng)態(tài)數(shù)據(jù)綁定的三個(gè)難點(diǎn)對(duì)象深度問題設(shè)置新對(duì)象是否能夠繼續(xù)響應(yīng)和考慮傳遞回調(diào)函數(shù)本文的目的在實(shí)踐中使用遞歸思想了解設(shè)計(jì)模式中的發(fā)布訂閱模式三大難點(diǎn)如果傳入?yún)?shù)對(duì)象是一個(gè)比較深的對(duì)象也就是其屬性值也可能是對(duì)象，那該怎么辦呢舉個(gè)例子。

動(dòng)態(tài)數(shù)據(jù)綁定的三個(gè)難點(diǎn):



對(duì)象深度問題


設(shè)置新對(duì)象是否能夠繼續(xù)響應(yīng)getter 和 setter


考慮傳遞回調(diào)函數(shù)
本文的目的

在實(shí)踐中使用遞歸思想

了解設(shè)計(jì)模式中的“發(fā)布-訂閱模式”

三大難點(diǎn)

如果傳入?yún)?shù)對(duì)象是一個(gè)“比較深”的對(duì)象（也就是其屬性值也可能是對(duì)象），那該怎么辦呢？舉個(gè)例子。

// 一個(gè)“比較深”的對(duì)象：某些屬性的值也是一個(gè)對(duì)象
let obj = {
     a: 1,
     b: 2,
     c: {
          d: 3,
          e: 4
      }
}

如果設(shè)置新的值是一個(gè)對(duì)象的話，新設(shè)置的對(duì)象的屬性是否能能繼續(xù)響應(yīng) getter 和 setter。舉個(gè)例子。

// 一個(gè)“比較深”的對(duì)象：某些屬性的值也是一個(gè)對(duì)象
 let app1 = new Observer({
         name: "youngwind",
         age: 25
 });

 app1.data.name = {
         lastName: "liang",
         firstName: "shaofeng"
 };

 app1.data.name.lastName;
 // 這里還需要輸出 "你訪問了 lastName "
 app1.data.name.firstName = "lalala";
 // 這里還需要輸出 "你設(shè)置了firstName, 新的值為 lalala"

考慮傳遞回調(diào)函數(shù)。在實(shí)際應(yīng)用中，當(dāng)特定數(shù)據(jù)發(fā)生改變的時(shí)候，我們是希望做一些特定的事情的，而不是每一次都只能打印出一些信息。所以，我們需要支持傳入回調(diào)函數(shù)的功能。舉個(gè)例子。

let app1 = new Observer({
         name: "youngwind",
         age: 25
 });

 // 你需要實(shí)現(xiàn) $watch 這個(gè) API
 app1.$watch("age", function(age) {
         console.log(`我的年紀(jì)變了，現(xiàn)在已經(jīng)是：${age}歲了`)
 });

 app1.data.age = 100; // 輸出："我的年紀(jì)變了，現(xiàn)在已經(jīng)是100歲了"
解決方法

對(duì)象深度問題解決方法

       walk(obj){
           let val;
           for(let key in obj){
               // 這里為什么要用hasOwnProperty進(jìn)行過濾呢？
               // 因?yàn)閒or...in 循環(huán)會(huì)把對(duì)象原型鏈上的所有可枚舉屬性都循環(huán)出來
               // 而我們想要的僅僅是這個(gè)對(duì)象本身擁有的屬性，所以要這么做。               
               if(obj.hasOwnProperty(key)){
                   val = obj[key];
                    //第一大難題:初始化深對(duì)象解決問題 這里進(jìn)行判斷，如果還沒有遍歷到最底層，繼續(xù)new Observer
                   if(typeof val === "object"){
                       new Observer(data)
                   }
                   this.convert(key,val);
               }
           }
       }

使用遞歸的方式 . 利用 typeof 來檢查 val 是否是 object 對(duì)象 ,如果是則進(jìn)行遞歸,檢查其子屬性...遞歸..

設(shè)置新對(duì)象是否能夠繼續(xù)響應(yīng)getter 和 setter

        set: function (valnew) {
            self.watch[key](valnew) // 回調(diào)監(jiān)聽 取代下面那條語句
            //console.log(`你設(shè)置了 ${key}, 新的值為${valnew}`);
            if (typeof newVal === "object") {
                new Observer(valnew);
            }
            if (valnew === val) return;
            val = valnew

        }

同第一個(gè)難點(diǎn),在 setter 處,判斷改變后的屬性值是否是對(duì)象 如果是對(duì)象 則再重新new 一個(gè)Observer出來

考慮傳遞回調(diào)函數(shù)

$watch(key,callback){
       this.watch[key] = callback;
}

仿照 JavaScript 設(shè)計(jì)模式 發(fā)布-訂閱模式 來寫一個(gè)進(jìn)行 setter 時(shí),觸發(fā)函數(shù)

源碼:Vue 動(dòng)態(tài)數(shù)據(jù)綁定三大難點(diǎn)解決源碼
在線學(xué)習(xí)參考資料

發(fā)布-訂閱模式

更多設(shè)計(jì)模式相關(guān)的資料強(qiáng)烈推薦曾探所著《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》

上篇文章Vue 動(dòng)態(tài)數(shù)據(jù)綁定(一)

更多內(nèi)容可以訂閱本人微信公眾號(hào)，一起開啟前端小白進(jìn)階的世界！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86844.html

相關(guān)文章

  • JavaScript學(xué)習(xí)筆記整理：對(duì)象篇

    摘要：函數(shù)式對(duì)象的一個(gè)子類型，中的函數(shù)是一等公民內(nèi)置對(duì)象中還有一些對(duì)象子類型，通常被稱為內(nèi)置對(duì)象。內(nèi)容對(duì)象的內(nèi)容是由一些存儲(chǔ)在特定命名位置的任意類型的值組成的，我們稱之為屬性。 語法 對(duì)象兩種定義形式 聲明(文字)形式 構(gòu)造形式 //聲明(文字)形式 var myObj = { key: value // ... } //構(gòu)造形式 var myObj = new Ob...

    testbird 評(píng)論0 收藏0

  • 詳解vue組件三大核心概念

    摘要：前言本文主要介紹屬性事件和插槽這三個(gè)基礎(chǔ)概念使用方法及其容易被忽略的一些重要細(xì)節(jié)。至于如何改變，我們接下去詳細(xì)介紹單向數(shù)據(jù)流這個(gè)概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個(gè)核心思想是數(shù)據(jù)驅(qū)動(dòng)。 前言 本文主要介紹屬性、事件和插槽這三個(gè)vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件，也可以從這三個(gè)部分展開，它們...

    rickchen 評(píng)論0 收藏0

  • 18年求職面經(jīng)及總結(jié)

    摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫助先說背景微電子科學(xué)與工程專業(yè)學(xué)過兩門和相關(guān)的課程語言和單片機(jī)這個(gè)專業(yè)的唯一好處就是大部分人并不知道這個(gè)專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來,希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫...

    zhangwang 評(píng)論0 收藏0

  • 18年求職面經(jīng)及總結(jié)

    摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫助先說背景微電子科學(xué)與工程專業(yè)學(xué)過兩門和相關(guān)的課程語言和單片機(jī)這個(gè)專業(yè)的唯一好處就是大部分人并不知道這個(gè)專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來,希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫...

    fjcgreat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<