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

資訊專欄INFORMATION COLUMN

從零單排系列之寫一個(gè)類vue框架(二)

learn_shifeng / 588人閱讀

摘要：昨天寫了一下節(jié)點(diǎn)綁定的替換，已經(jīng)如何檢測(cè)的方法今天優(yōu)化一下，勉強(qiáng)實(shí)現(xiàn)一個(gè)雙向綁定看下昨天的代碼這里是在實(shí)現(xiàn)雙向綁定之前，先普及一個(gè)和的知識(shí)。如果強(qiáng)行給之前的賦值，就會(huì)發(fā)生無限的情況。畢竟還在正式學(xué)習(xí)期。

昨天寫了一下節(jié)點(diǎn)綁定model的替換，已經(jīng)如何檢測(cè)model 的方法
今天優(yōu)化一下，勉強(qiáng)實(shí)現(xiàn)一個(gè)雙向綁定
看下昨天的代碼




    這里是{{title}}

在實(shí)現(xiàn)雙向綁定之前，先普及一個(gè)set 和 get 的知識(shí)。我說點(diǎn)大白話，反正也不是專業(yè)的。
一個(gè)對(duì)象的key在被賦值 value 的時(shí)候，被攔截，觸發(fā)set方法，set的參數(shù)就是那個(gè) value
但是這個(gè)賦值就會(huì)被攔截了，所以需要給一個(gè)新的key一個(gè)值。然后把value賦值到新的值上面去。如果強(qiáng)行給之前的key賦值，就會(huì)發(fā)生無限set 的情況。

稍微加工了一下




    這里是{{title}}

代碼有些粗劣，但是功能是實(shí)現(xiàn)了。
1.首先 先讀取 new Vue傳入對(duì)象時(shí)候，data 里面的數(shù)據(jù)， 然后對(duì)其進(jìn)行遍歷，給 實(shí)例化對(duì)象添加 同名屬性， 這個(gè)同名屬性主要就是用來被監(jiān)聽set,get（雙向綁定實(shí)現(xiàn)的基本原理）。 也就是 vue.prototype.getData

2.然后呢，去遞歸dom樹（這個(gè)以后再寫，先簡(jiǎn)單就一層，不然寫的內(nèi)容會(huì)增多很多），然后用正則過濾出里面 {{}}類型的節(jié)點(diǎn)，將 這個(gè)節(jié)點(diǎn)的原始內(nèi)容（比如{{title}}保存到這個(gè)節(jié)點(diǎn)的一個(gè)自定義屬性里，我寫的是realData），并將這個(gè)節(jié)點(diǎn)添加到watcher里面去。 也就是vue.prototype.watcher

3.然后呢，在同名屬性被設(shè)置的時(shí)候呢，就觸發(fā)鉤子函數(shù)，將這個(gè)同名屬性所涉及到的節(jié)點(diǎn)的data給更新。 也就是vue.prototype.digest

如果上面的內(nèi)容沒有看的太明白的話，可以參考一下代碼注釋。。。我下線看看怎么優(yōu)化代碼或者優(yōu)化思路，晚上或者明天更新。我還得看看vue的文檔。畢竟還在正式學(xué)習(xí)期。

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

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

相關(guān)文章

  • 從零單排系列之寫一個(gè)類vue框架(一)

    摘要：因?yàn)槲蚁Ｍ@是一個(gè)系列的文章，所以開始之前先簡(jiǎn)單說一下，我?guī)缀鯖]用過這個(gè)框架寫過項(xiàng)目，所以文章中難免會(huì)有一些比較外行的說法。先整理用法，然后再整理自己的框架。 因?yàn)槲蚁Ｍ@是一個(gè)系列的文章，所以開始之前先簡(jiǎn)單說一下，我?guī)缀鯖]用過vue這個(gè)框架寫過項(xiàng)目，所以文章中難免會(huì)有一些比較外行的說法。當(dāng)然，我用過一些時(shí)間的angular，也曾經(jīng)解決過一些同行們vue方面的問題。所以如果有人原因看的...

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

  • 從零開始單排學(xué)設(shè)計(jì)模式「UML類圖」定級(jí)賽

    摘要：從零開始單排學(xué)設(shè)計(jì)模式的國(guó)服排位之旅，今天正式開啟目前段位定級(jí)賽這篇文章來總結(jié)下類圖，本來不打算講類圖的，因?yàn)槲以趯W(xué)習(xí)設(shè)計(jì)模式的時(shí)候，一遇到有關(guān)的就會(huì)自動(dòng)忽略，一看感覺就很復(fù)雜。關(guān)聯(lián)關(guān)系用實(shí)現(xiàn)箭頭來表示。 閱讀本文大概需要 3.5 分鐘。 本篇是設(shè)計(jì)模式系列的開篇，雖然之前也寫過相應(yīng)的文章，但是因?yàn)榉N種原因后來斷掉了，而且發(fā)現(xiàn)之前寫的內(nèi)容也很渣，不夠系統(tǒng)。 所以現(xiàn)在打算重寫，加上距離現(xiàn)...

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

  • 最新【從零單排】系列流出，教你如何實(shí)現(xiàn)字典存儲(chǔ)結(jié)構(gòu)

    摘要：昨天在星球的從零單排系列分享了一篇字典存儲(chǔ)結(jié)構(gòu)的實(shí)現(xiàn)方式，我覺得這篇文章寫的還是蠻好的，就分享給大家了。這周活動(dòng)力度優(yōu)惠開到最大了，現(xiàn)在只要元，邀請(qǐng)朋友還能返現(xiàn)元。 showImg(https://segmentfault.com/img/remote/1460000018992017); 昨天在星球的【從零單排】系列分享了一篇【字典存儲(chǔ)結(jié)構(gòu)的實(shí)現(xiàn)方式】，我覺得這篇文章寫的還是蠻好的，...

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

  • 從零單排學(xué)Redis【黃金】

    摘要：當(dāng)被監(jiān)聽的準(zhǔn)備好執(zhí)行連接應(yīng)答讀取等等操作時(shí)，與操作相對(duì)應(yīng)的文件事件就會(huì)產(chǎn)生，根據(jù)文件事件來為關(guān)聯(lián)對(duì)應(yīng)的事件處理器，從而實(shí)現(xiàn)功能。服務(wù)器使用單線程單進(jìn)程的方式處理命令請(qǐng)求。 前言 只有光頭才能變強(qiáng) 好的，今天我們要上黃金段位了，如果還沒經(jīng)歷過青銅和白銀階段的，可以先去蹭蹭經(jīng)驗(yàn)再回來： 從零單排學(xué)Redis【青銅】 從零單排學(xué)Redis【白銀】 看過相關(guān)Redis基礎(chǔ)的同學(xué)可以知道Re...

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

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

0條評(píng)論

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