1-3 資料加工與邏輯整合 | vue computed methods
在上一個篇章當中,我們提到了Vue.js的模板語法,以及如何將實體的狀態(data)結合運算式結果渲染至畫面的方式。但如果在好幾組模板語法置入相同的運算邏輯,或是在多處置入同樣的複雜運算式,這個模板就會變得難以維護。以上一個小節的範例來說,要是今天需要在網頁的多個地方都要顯示「總金額」,假設三個好了: 總金額共{{price*quantity}}元 總金額共{{price*quantity}}元 總金額共{{price*quantity}}元
在上一個篇章當中,我們提到了 Vue.js 的模板語法,以及如何將實體的狀態 (data) 結合運算式結果渲染至畫面的方式。 但如果在好幾組模板語法置入相同的運算邏輯,或是在多處置入同樣的複雜運算式,這個模板就會變得難以維護。
以上一個小節的範例來說,要是今天需要在網頁的多個地方都要顯示「總金額」,假設三個好了:
<div id="app"> <p> 總金額共 {{ price * quantity }} 元 </p> <p> 總金額共 {{ price * quantity }} 元 </p> <p> 總金額共 {{ price * quantity }} 元 </p> </div>1234567
這個時候,由於重複的邏輯程式碼四散在網頁模板各處,在維護時很可能會出現遺漏修改的狀況。 同時,要是在模板置入了太過複雜的運算邏輯,不僅程式碼不夠直觀難以維護,嚴重的話還可能會產生不可預期的錯誤。
本篇,就來聊聊 Vue.js 是如何解決這些問題。
methods 方法不知道各位讀者有沒有聽過,在程式設計領域有個理論叫「三次法則」(rule of three)?
根據維基百科對「三次法則」理論的定義:
三次法則(rule of three)的要求是,允許按需直接複製貼上代碼一次,但如果相同的代碼片段重複出現三次以上的時候,將其提取出來做成一個子程式就勢在必行。 ...... 具體來說,當有代碼片段需要變更時,代碼維護者就必須找出程式中所有與之相同的代碼片段,並都進行修改,但這一過程易出差錯,而且也常會帶來許多麻煩。相對的,如果代碼只在一個地方出現,修改起來就容易多了。
鄉民都知道重要的事要講三次,但是資深碼農告訴你,同樣的程式要是寫三次,如果這是 Bug 的話你也得修正三次。 但通常你只會記得要修正被 PM / 客戶發現的那次就當完事了 ,於是相同的客訴也會來三次。
簡單來說,相同程式片段重複出現三次或以上的時候,在重構時我們就會將重複的部分提取出來並包裝成函式以便重複使用。
那麼,在 Vue.js 的...