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

資訊專欄INFORMATION COLUMN

Angular 根據(jù) service 的狀態(tài)更新 directive

Y3G / 2134人閱讀

摘要:分別是表達(dá)式,事件傳遞,和的計算屬性。問題我有一個,其中包含一些狀態(tài)信息比如連接狀態(tài)和電量。現(xiàn)在我需要做一個去展示這些狀態(tài)。因為渲染的時候也許已經(jīng)更新了。

TL;DR

這篇文章講解了三種根據(jù) service 的狀態(tài)更新 directive 的做法。分別是 $watch 表達(dá)式,事件傳遞,和 controller 的計算屬性。

問題

我有一個 readerService ,其中包含一些狀態(tài)信息(比如連接狀態(tài)和電量)。現(xiàn)在我需要做一個 directive 去展示這些狀態(tài)。因為它只需要從 readerService 中獲取數(shù)據(jù),不需要任何外部傳值,所以我直接把 service 注入進(jìn)去。但如何更新就成了一個問題。

service 的代碼如下。

const STATUS = {
  DETACH: "DETACH",
  ATTACH: "ATTACH",
  READY:  "READY"
}

class ReaderService {
  constructor() {
    this.STATUS = STATUS

    // The status will be changed by some callbacks
    this.status = STATUS.DETACH
  }
}

angular.module("app").service("readerService", readerService)

directive 代碼如下:

angular.module("app").directive("readerIndicator", (readerService) => {
  const STATUS = readerService.STATUS

  const STATUS_DISPLAY = {
    [STATUS.DETACH]: "Disconnected",
    [STATUS.ATTACH]: "Connecting...",
    [STATUS.READY]:  "Connected",
  }

  return {
    restrict: "E",
    scope: {},
    template: `
      
{{statusDisplay}}
`, link(scope) { // Set and change scope.statusDisplay here } } })

我嘗試過以下幾種辦法,下面一一介紹。

方法一:$watch

第一個想到的方法就是在 directive 中用 $watch 去監(jiān)視 readerService.status。因為它不是 directive scope 的屬性,所以我們需要用一個函數(shù)來包裹它。Angular 會在 dirty-checking 時計算和比較新舊值,只有狀態(tài)真的發(fā)生了改變才會觸發(fā)回調(diào)。

// In directive
link(scope) {
  scope.$watch(() => readerService.status, (status) => {
    scope.statusDisplay = STATUS_DISPLAY[status]
  })
}

這個做法足夠簡單高效,只要涉及 readerService.status 改變的代碼會觸發(fā) dirty-checking ,directive 就會自動更新。service 不需要修改任何代碼。

但如果有多個 directive 的屬性都受 service status 的影響,那 $watch 代碼就看得比較晦澀了。尤其是 $watch 修改的值會影響其他的值的時候。比如:

// In directive
link(scope) {
  scope.$watch(() => readerService.status, (status) => {
    scope.statusDisplay = STATUS_DISPLAY[status]
    scope.showBattery = status !== STATUS.DETACH
  })

  scope.$watch("showBattery", () => {
    // some other things depend on showBattery
  })
}

這種時候聲明式的編程風(fēng)格會更容易看懂,比如 Ember 或 Vue 里面的 computed property 。這個待會討論。

方法二:$broadcast/$emit + $on

這種思路是 service 每次狀態(tài)改變都發(fā)送一個事件,然后 directive 監(jiān)聽事件來改變狀態(tài)。因為 directive 渲染的時候也許 status 已經(jīng)更新了。所以我們需要在 link 中計算一個初始值。

我最開始是用 $broadcast 去做的。代碼如下:

// In service
setStatus(value) {
  this.status = value
  // Need to inject $rootScope
  this.$rootScope.$broadcast("reader.statusChanged", this.status)
}

// In directive
link(scope) {
  scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]

  scope.$on("reader.statusChanged", (event, status) => {
    scope.statusDisplay = STATUS_DISPLAY[status]
  })
}

但馬上發(fā)現(xiàn) $broadcast 之后 UI 更新總要等 1 秒多(不過 $on 回調(diào)倒是很快)。Google 一番后知道原因是 $broadcast 是向下層所有 scope 廣播,廣播完成后再 dirty-checking 。一個更好的做法是使用 $emit ,它只會向上傳遞事件,不過不管發(fā)送事件還是監(jiān)聽事件都得用 $rootScope

修改后的代碼如下:

// In service
setStatus(value) {
  this.status = value
  // Use $emit instead of $broadcast
  this.$rootScope.$emit("reader.statusChanged", this.status)
}

// In directive
link(scope) {
  scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]

  // Use $rootScope instead of scope
  $rootScope.$on("reader.statusChanged", (event, status) => {
    scope.statusDisplay = STATUS_DISPLAY[status]
  })
}

如果因為某些原因不得不用 $broadcast 的話,你可以在 $on 回調(diào)最后用 $digest$apply 強(qiáng)制觸發(fā) dirty-checking ,這也可以達(dá)到快速更新 UI 的目的。

方法三:controller + property

我個人覺得前兩個方法能解決問題,但代碼維護(hù)性都不太好。$watch 在屬性相互關(guān)聯(lián)的情況下非常難看懂,$emit/$on 需要把一些邏輯寫兩次(初始化 directive 時和回調(diào)執(zhí)行時)。方法一中我提到了有些時候聲明式的屬性比 $watch 更容易看懂。這個方法就是使用 controller 。directive 可以設(shè)置自己的 controller 作為數(shù)據(jù)來源(或者說 view model),我們可以把那些需要計算的屬性作為 controller 的屬性。這樣 dirty-checking 時它們就會自動計算。

// In directive
class ReaderController {
  constructor($scope, readerService) {
    this.readerService = readerService
  }

  get statusDisplay() {
    return STATUS_DISPLAY[this.readerService.status]
  }
}

return {
  // ...
  controller: ReaderController,
  controllerAs: "vm",
  template: `
    
{{vm.statusDisplay}}
` }

這樣一來,大部分邏輯都可以挪到 controller 中。如果沒有 DOM 操作我們甚至可以不寫 link 方法。也沒必要加入額外的 $watch$on 。只是因為 dirty-checking 的特性,綁定到 template 的屬性往往會多計算幾次。所以屬性必須非常簡單。大部分情況下這不會有什么問題。

參考資料

$rootScope.Scope
Angular API ,可以看看里面對 $watch$broadcast$emit , $on 的描述。

$rootScope.$emit() vs $rootScope.$broadcast()
$emit$broadcast 的性能比較。注意后來的 Angular 已經(jīng)解決了性能差異,兩者相差無幾。

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/79084.html

相關(guān)文章

  • [譯] Controller間數(shù)據(jù)共享?最佳實踐:使用Service

    摘要:共享數(shù)據(jù)的最佳策略是什么呢用一些變態(tài)的控制器繼承方案嗎當(dāng)然不是,最簡單容易的方式就是使用服務(wù)。概括創(chuàng)建一個服務(wù)去存放你的數(shù)據(jù),并給數(shù)據(jù)創(chuàng)建和的方法。 原文鏈接 : Sharing Data Between Controllers? Best Practice: Use a Service原文作者 : DAVE CEDDIA譯者 : 李林璞(web前端領(lǐng)域)譯者注:翻譯如有疏漏,歡迎指出...

    Salamander 評論0 收藏0
  • Angular1.x + TypeScript 編碼風(fēng)格

    摘要:組件還包含數(shù)據(jù)事件的輸入與輸出,生命周期鉤子和使用單向數(shù)據(jù)流以及從父組件上獲取數(shù)據(jù)的事件對象備份。 說明:參照了Angular1.x+es2015的中文翻譯,并將個人覺得不合適、不正確的地方進(jìn)行了修改,歡迎批評指正。 架構(gòu),文件結(jié)構(gòu),組件,單向數(shù)據(jù)流以及最佳實踐 來自@toddmotto團(tuán)隊的實用編碼指南 Angular 的編碼風(fēng)格以及架構(gòu)已經(jīng)使用ES2015進(jìn)行重寫,這些在Angul...

    ytwman 評論0 收藏0
  • Angular $rootScope:inprog 問題探究

    摘要:場景和問題這幾天在寫一個。因為狀態(tài)的改變由另一個插件控制,不在的中。前者強(qiáng)制觸發(fā)一次,后者讓一段代碼執(zhí)行完成后觸發(fā)。所以直接在回調(diào)中使用就可以解決問題。參考資料對異常的描述。這種異常附帶在線文檔的方式還是很方便的。 TL;DR 這是一個關(guān)于 $rootScope:inprog 錯誤在什么樣的情況下被觸發(fā),和如何解決的故事。 場景和問題 這幾天在寫一個 service 。這個 servi...

    shiguibiao 評論0 收藏0
  • Angular中使用類Redux工具—ngrx/store

    摘要:因為我們正好要使用,此時我們就可以用的服務(wù)來監(jiān)聽了當(dāng)然,我們不能忘了清空訂閱最后一步就是在有返回的時候調(diào)用表單的現(xiàn)在我們可以在組件里顯示提醒了 原文:Connect Angular Forms to @ngrx/store showImg(https://segmentfault.com/img/bVRpdX?w=1000&h=674); 這篇文章中,我們將要討論如何用ngrx/eff...

    bitkylin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<