Angular和Vue模板和綁定

Question

我是一名新開發人員。我一直在努力加快速度。部分原因讓我回顧了Angular，React和Vue。這些似乎都使用了「聲明式綁定」和「模板化」。我相信我明白這些是什麼。但是，我不明白爲什麼我需要它們。我的問題是：

1. 爲什麼要關心聲明性綁定？
2. 爲什麼我應該關心模板？

他們基本上看起來像兩種方法生成HTML。出於這個原因，我覺得我錯過了一些東西。有人能幫助我理解這一點嗎？

謝謝

Answer 1

HTML優先於Javascript。所以現在HTML被暴露給Javascript作爲JS代碼可以讀取和寫入的對象樹。

這就是爲什麼給網站（JQuery時代）賦予生命的舊方法包括在預先存在的HTML頁面上運行一層JS代碼。 JS程序查找頁面的交互部分並附加代碼以響應用戶事件。 JS代碼還可以找到頁面的可移動部分，以便完成或更新它們。

但是當JS應用程序這樣寫時，它們很難維護和改進。只要你想改變HTML中的東西（將頁面中的按鈕移動到另一個頁面，將列表轉換爲表格，添加另一個數值顯示等），負責爲HTML供電的JS代碼就會過時，經常被打破。另外，一旦頁面出現錯誤，就沒有簡單的方法來追溯哪些JS代碼負責屏幕上的內容。

如果你三思而後行，你想在開發複雜應用程序時反轉JS和HTML之間的關係。這就是模板/綁定中間件的目的。它們顛倒了JS和HTML之間的關係，以便JS對象現在成爲構建用戶界面的基礎層。

像Angular這樣的框架或像Knockout這樣的庫，使用指令豐富了HTML，使得現在的HTML頁面像運行在Javascript之上的真正的程序一樣工作。 Javascript層僅支持應用程序邏輯，並且不再依賴於用戶界面的製作方式。當您移動按鈕，替換另一個按鈕，將頁面分成兩部分等等時，它不會中斷。

模板是這種方法的第一步。它包含將JS變量的名稱直接放入Html中。當模板執行時，模板引擎會將這些變量替換爲它們的值。

但是模板是不夠的。當任何顯示的變量發生變化時，您仍然必須手動編寫模板的執行代碼。這是程序員工作中最糟糕的部分，它跟蹤每個可能更改頁面組件的事件，並手動添加綁定到這些事件以更新組件。

真正的雙向數據綁定中間件的功能遠不止模板引擎。它起初就像一個模板引擎，但它也會跟蹤所有替換的變量/表達式，並會在值更改時立即更新HTML文檔autoMAGICally。當用戶編輯表單域等時，它也可以「神奇地」應用JS變量的變化。

就像在Excel電子表格中編寫數字時一樣，附近的公式也會自動更新。 excel公式是「聲明式綁定」的一種形式。您不需要編寫代碼來更新公式結果，Excel可以爲您完成繁瑣的工作。

這種新的編碼方式是一個真正的進步的原因是，在現實生活（tm）中，不斷髮展的應用程序的視圖層比其邏輯層（考慮您的銀行網站）多10倍。所以能夠在不破壞JS邏輯中的所有內容的情況下重新修改頁面佈局是Web開發人員的幸福。

Answer 2

數據綁定和模板是連接你的html和你的javascript的膠水。

如果您沒有使用這些框架之一，您需要編寫大量邏輯來保持DOM和應用程序狀態（javascript）的同步，例如更新輸入元素上的文本，創建一個列表（<ul> </ul>）顯示數組的數據，處理按鈕的單擊...

除此之外，您提到的框架通常提供其他功能，如路由，動畫，資源處理。

如果你是你應該閱讀有關MVVM模式，可能會開始像一個knockout更容易框架新的開發者。淘汰賽的教程是相當簡單和易於理解的