iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
Modern Web

認真學前端開發 - 以 TodoList 為例系列 第 23

Day-23 如果有一天變得複雜,還能不能繼續改下去?

昨天完成了從 Firebase 讀取待辦清單,但是 SideEffect 沒有完全地處理完

SideEffect 是什麼?

中文解釋是 副作用

在這個 TodoList 中 Side Effect 有

  1. 讀取列表時,提示告訴使用者目前正在讀取
  2. 當讀取失敗的時候要告訴使用者目前狀態
  3. 當做任何當作(新增,刪除,更新)時應該要有狀態的顯示
  4. 失敗或成功都要告知使用者

而目前的 TodoController 的狀況要做到其實要花滿大的工夫,而程式碼邏輯也會變得非常的不簡單

像是更新時要做到更新ing 的狀態可能就要做像這樣的程式碼

document.querySelector('#notification-loading').style.visibility = 'visible';

失敗時也許要加上(以下沒有實測,只是大致想一下情境)

HTML 的某處

<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>
checkItem(index) {
  const item = this.data[index];
  TodoService.updateTodo(item.id, item).then((updatedItem) => {
    this.render();
  }, (error) => {
    // depends on which error type
    $('#error-modal').modal('show');
    $('#error-modal-title').text('更新失敗,請檢查網路連線問題');
  });
}

會發現程式碼寫得越來越大,而且 TodoList 只是個小小的功能而已,未來要擴充功能,只會越來越難加

而且感覺要在 Todo 加上 細項或 due date 我們的 template 也越來越難加

加個新功能 template 和 controller 要一起改,十分痛苦,也許是這樣的 MVC 設計得不夠好導致的結果

Day09的時候有提到目前改的效能會不好,因為每個操作都要重新繪製一遍 DOM List

但其實有很多 Framework 致力於解決開發者踩到的雷,持續地做到關注點分離,好維護的前端程式碼架構,和效能的問題,使得我們開發上不用去想那麼複雜的架構。

前端重要的事情就是將後端的資料做呈現,和讓使用者對資料做一些操作然後與後端做溝通

所以網頁上資料與頁面的綁定就變得十分重要,讓我們來看看有什麼模式在做資料綁定吧

MVVM

參考:

淺談MVVM架構

MVVM是Model-View-ViewModel的縮寫,透過將使用者介面(View)、商業邏輯(ViewModel)與資料(Model)分離的設計模式,達到降低介面設計與程式設計彼此的影響,進而使各別的開發人員能專注於本身的設計,並更加方便測試與整合。

  1. View: 使用者介面區塊,介面設計人員只需要透過Expression Blend工具進行編輯,並利用Binding的方式與ViewModel進行溝通連結。
  2. ViewModel: 商業邏輯區塊,程式設計人員可在此實作商業邏輯,並透過公開的屬性提供給View進行Binding使用。
  3. Model: 資料區塊,用以描述資料實體的簡單類別,也可在此實作商業邏輯及資料庫存取相關功能。
    MVVM設計架構中,上層的物件可以向下存取,但是下層的物件並不會知道上層物件,透過此原則得以做到乾淨的分層與鬆散耦合。

Vue

Vue 是基於 MVVM 的設計架構上做的

  1. Template 樣板(View)
<div id="app-todo">
    <input v-model="todoInput" >
    <button v-on:click="addTodo">新增</button>
  <ol>
    <todo-item
      v-for="item in list"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
  1. Model data
  2. 在 Vue 裡面設定好 data 或讀取資料做 data 設定
data: {
  todoInput: '',
  list: [
    { id: 0, text: '第一個' },
    { id: 1, text: '明天要吃什麼' },
    { id: 2, text: '想看雷低咖咖' }
  ]
}
  1. ViewModel

將 model 和 view 做雙向綁定,只要資料變動 view 就會更動

View 被使用者改變,資料也會被改變

寫起來感覺輕便好寫

參考官方文件寫出的 TodoList

Angular

最新的 Angular 我不太熟悉,不過跟 Vue 一樣是可以很容易做到雙向資料流的綁定

Angular在呈現和資料中間,可以簡單建立雙向的資料綁定。一旦建立雙向綁定,使用者輸入,會由Angular自動傳到一個變數中,再自動讀到所有綁到它的內容,更新它。效果上就是立即的資料同步。在程式碼中修改變數,也會直接反應到呈現的外觀上。不僅內容可以雙向綁定,其他諸如類別、寬度、高度等等,都可以和變數與使用者的輸入,綁定起來。

結語

使用 Framework 可以幫做我們解決資料與呈現的處理,用的好可以讓我們事半功倍,但如果頁面沒有那麼多資料需要處理,也許簡易的模板和 scss 會比較適合

從 Vue 的 TodoList 程式碼可以簡易的發現之前寫 TodoList 的代碼又臭又長,而且非常難以維護,程式碼效能還不是最好

使用 Framework 輕鬆解決了關注點分離,渲染效能(需要才對 DOM 做更新),開發者也就很容易專心開發功能上的事情了!


上一篇
Day22 - 使用 Firebase 來做儲存 [Part4][完成]
下一篇
Day24 - 使用 React 來解決問題!
系列文
認真學前端開發 - 以 TodoList 為例30

尚未有邦友留言

立即登入留言