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

資訊專(zhuān)欄INFORMATION COLUMN

高級(jí) Vue 組件模式 (7)

Caizhenhao / 733人閱讀

摘要：使用目標(biāo)到目前為止，僅從組件自身的角度來(lái)看，它已經(jīng)可以滿足大多數(shù)的業(yè)務(wù)場(chǎng)景了。但我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，就是當(dāng)前組件的狀態(tài)對(duì)于調(diào)用者來(lái)說(shuō)，完全是黑盒狀態(tài)，即調(diào)用者無(wú)法初始化，也無(wú)法更改組件的開(kāi)關(guān)狀態(tài)，這在一些場(chǎng)景無(wú)法滿足需求。

07 使用 State Initializers 目標(biāo)

到目前為止，僅從 toggle 組件自身的角度來(lái)看，它已經(jīng)可以滿足大多數(shù)的業(yè)務(wù)場(chǎng)景了。但我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，就是當(dāng)前 toggle 組件的狀態(tài)對(duì)于調(diào)用者來(lái)說(shuō)，完全是黑盒狀態(tài)，即調(diào)用者無(wú)法初始化，也無(wú)法更改組件的開(kāi)關(guān)狀態(tài)，這在一些場(chǎng)景無(wú)法滿足需求。

對(duì)于無(wú)法初始化開(kāi)關(guān)狀態(tài)的問(wèn)題，倒是很好解決，我們可以在 toggle 組件聲明一個(gè) prop 屬性 on 來(lái)代表組件的默認(rèn)開(kāi)關(guān)狀態(tài)，同時(shí)在 mounted 生命周期函數(shù)中將這個(gè)默認(rèn)值同步到組件 data 相應(yīng)的屬性中去。

對(duì)于無(wú)法更改開(kāi)關(guān)狀態(tài)的問(wèn)題，似乎無(wú)法簡(jiǎn)單通過(guò)聲明一個(gè) prop 屬性的方式來(lái)解決，并且如果我們期望的更改邏輯是異步的話，同樣無(wú)法滿足。

因此這篇文章著重來(lái)解決這兩個(gè)問(wèn)題：

toggle 組件能夠支持開(kāi)關(guān)狀態(tài)的初始化功能

toggle 組件能夠提供一個(gè) reset 方法以供重置開(kāi)關(guān)狀態(tài)

重置開(kāi)關(guān)狀態(tài)可以以異步的方式進(jìn)行

實(shí)現(xiàn) 初始化開(kāi)關(guān)狀態(tài)

為了使 toggle 組件能夠支持默認(rèn)狀態(tài)的傳入，我們采用聲明 prop 屬性的方式，如下：

on: {
  type: Boolean,
  default: false
}

之后在其 mounted 生命周期對(duì)開(kāi)關(guān)狀態(tài)進(jìn)行同步，如下：

mounted() {
    this.status.on = this.on;
  }

這樣當(dāng)我們期望 toggle 以開(kāi)的狀態(tài)進(jìn)行渲染時(shí)，可以這樣調(diào)用組件：


  ...
重置開(kāi)關(guān)狀態(tài)

為了能夠從外部更改 toggle 組件的開(kāi)關(guān)狀態(tài)，我們可以在組件內(nèi)部聲明一個(gè)觀測(cè) on prop 屬性的監(jiān)聽(tīng)器，比如：

watch: {
  on(val){
    // do something...
  }
}

但如果這么做，會(huì)存在一個(gè)問(wèn)題，即目標(biāo)中關(guān)于開(kāi)關(guān)狀態(tài)的更改邏輯的編寫(xiě)者是組件調(diào)用者，而 watch 函數(shù)的編寫(xiě)者是組件實(shí)現(xiàn)者，由于實(shí)現(xiàn)者無(wú)法預(yù)知調(diào)用者更改狀態(tài)的邏輯，所以使用 watch 是無(wú)法滿足條件的。

讓我們換一個(gè)角度來(lái)思考問(wèn)題，既然實(shí)現(xiàn)者無(wú)法預(yù)知調(diào)用者的邏輯，何不把重置開(kāi)關(guān)狀態(tài)的邏輯全部交由調(diào)用者來(lái)實(shí)現(xiàn)？別忘了 Vue 組件也是可以傳入 Function 類(lèi)型的 prop 屬性的，如下：

onReset: {
  type: Function,
  default: () => this.on
},

這樣就將提供重置狀態(tài)的邏輯暴露給了組件調(diào)用者，當(dāng)然，如果調(diào)用者沒(méi)有提供相關(guān)重置邏輯，組件內(nèi)部會(huì)自動(dòng)降級(jí)為使用 on 屬性來(lái)作為重置的狀態(tài)值。

組件內(nèi)部額外聲明一個(gè) reset 方法，在其內(nèi)部重置當(dāng)前的開(kāi)關(guān)狀態(tài)，如下：

reset(){
  this.status.on = this.onReset(this.status.on)
  this.$emit("reset", this.status.on)
}

這里會(huì)首先以當(dāng)前開(kāi)關(guān)狀態(tài)為參數(shù)，調(diào)用 onReset 方法，再將返回值賦值給當(dāng)前狀態(tài)，并觸發(fā)一個(gè) reset 事件以供父組件訂閱。

之后在 app 組件中，可以按如下方式傳入 onReset 函數(shù)，并編寫(xiě)具體的重置邏輯：

// template

...


// script
...
resetToTrue(on) {
  return true;
},
...

運(yùn)行效果如下：

支持異步重置

在實(shí)現(xiàn)同步重置的基礎(chǔ)上，實(shí)現(xiàn)異步重置十分簡(jiǎn)單，通常情況下，處理異步較好的方式是使用 Promise，使用 callback 也可以，使用 Observable 也是不錯(cuò)的選擇，這里我們選擇 Promise。

由于要同時(shí)處理同步和異步兩種情況，只需把同步情況視為異步情況即可，比如以下兩種情況在效果上是等價(jià)的：

// sync
this.status.on = this.onReset(this.status.on)

// async
Promise.resolve(this.onReset(this.status.on))
    .then(on => {
      this.status.on = on
    })

而 onReset 函數(shù)如果返回的是一個(gè) Promise 實(shí)例的話，Promise.resolve 也會(huì)正確解析到當(dāng)它為 fullfill 狀態(tài)的值，這樣關(guān)于 reset 方法我們改版如下：

reset(){
  Promise.resolve(this.onReset(this.status.on))
    .then(on => {
      this.status.on = on
      this.$emit("reset", this.status.on)
    })
}

在 app 組件中，可以傳入一個(gè)異步的重置邏輯，這里就不貼代碼了，直接上一個(gè)運(yùn)行截圖，組件會(huì)在點(diǎn)擊重置按鈕后 1 秒后，重置為開(kāi)狀態(tài)：

成果

你可以下面的鏈接來(lái)看看這個(gè)組件的實(shí)現(xiàn)代碼以及演示：

sandbox: 在線演示

github: part-7

總結(jié)

Function 類(lèi)型的 prop 屬性在一些情況下非常有用，比如文章中提及的狀態(tài)初始化，這其實(shí)是工廠模式的一種體現(xiàn)，在其他的框架中也有體現(xiàn)，比如 React 中，HOC 中提及的 render props 就是一種比較具體的應(yīng)用，Angular 在聲明具有循環(huán)依賴的 Module 時(shí)，可以通過(guò) () => Module 的方式進(jìn)行聲明等等。

目錄

github gist

關(guān)注公眾號(hào) 全棧101，只談技術(shù)，不談人生

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

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

相關(guān)文章

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

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

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

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

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

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

  • 高級(jí) Vue 組件模式 (1)

    摘要：寫(xiě)在前頭去年，曾經(jīng)閱讀過(guò)一系列關(guān)于高級(jí)組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí)組件模式的文章，碰巧最近接手了一個(gè)公司項(xiàng)目，前端這塊的技術(shù)棧是。同時(shí)這個(gè)組件還擁有一個(gè)屬性，用來(lái)初始化的狀態(tài)值。 寫(xiě)在前頭 去年，曾經(jīng)閱讀過(guò)一系列關(guān)于高級(jí) react 組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí) angular 組件模式的文章，碰巧最近接手了一個(gè)公...

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

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

0條評(píng)論

Caizhenhao

男|高級(jí)講師

TA的文章

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