前端框架簡介

在 JavaScript 誕生的 1996 年，它的作用僅僅是為當時由靜態文檔組成的網頁，提供些許的互動和興奮感。而當網路漸漸從 閱讀 的媒介，成為 做事 的場所，JavaScript 也慢慢地紅了起來。JavaScript 開發者們撰寫了許多工具，來解決自己遭遇的問題，並打包成能重複使用的工具包，稱為 函式庫 （library），以便和他人共享自己的解決方案。這個共享函式庫的生態，也推進了網路的增長。

有很多框架，不過主要有以下「四大框架」。

Ember 在 2011 年 12 月發行。這個框架始於 SproutCore 的內部專案。這是個比較老的框架：與 React 或 Vue 之類的替代方案相比，其用戶數比較少，不過在穩定性、社區支持、和一些巧妙的編碼原則方面，仍然享譽無數。

Angular 是個由 Google 內部的 Angular Team 與其他社群所開發的開源專案。這個專案是同一群人由 AngularJS 所重寫的專案。該專案於 2016 年 9 月 14 日發行。

尤雨溪在維護並理解前述的 AngularJS 專案後，於 2014 年發表了 Vue 。Vue 是四大框架裡面最年輕的，但成了近年來的當紅炸子雞。

Facebook 於 2013 年發表了 React 。在發表當時 Facebook 內部早已使用 React 解決許多內部問題。技術上來說 React 並不是 框架，而是一個用來渲染 UI 組件的函式庫。React 通常會配合 其他 函式庫來建立應用程式：例如 React 搭配 React Native 建立手機程式、React 與 ReactDOM 建立網路程式...等等。

我們已經討論了啟發框架建立的環境，但那不是開發人員 為什麼 要製造它們的理由。要探索原因，首先需要首先檢查開發軟體所碰上的挑戰。

建立 HTML 元素並在瀏覽器上渲染，會需要驚人數量的程式碼。假設我們的狀態，是一個由多個物件組成的陣列：

const state = [
    id: "todo-0",
    name: "Learn some frameworks!",
我們如何對用戶顯示工作？我們想將每個工作，都表示為一個列表項目：結構為無序列表元素 <ul> (en-US) 內，含有一定數量的 <li> (en-US) 元素。怎麼做呢？看起來就像這樣：

js
function buildTodoItemEl(id, name) {
  const item = document.createElement("li");
  const




    
 span = document.createElement("span");
  const textContent = document.createTextNode(name);
  span.appendChild(textContent);
  item.id = id;
  item.appendChild(span);
  item.appendChild(buildDeleteButtonEl(id));
  return item;
我們在這裡用上了 document.createElement() 方法建立了 <li>、還有一些程式碼來建立需要的屬性與子元素。
程式的第十行引用了另一個構建函式：buildDeleteButtonEl()。它與用於構建列表元素的模式很像：
js
function buildDeleteButtonEl(id) {
  const button = document.createElement("button");
  const textContent = document.createTextNode("Delete");
  button.setAttribute("type", "button");
  button.appendChild(textContent);
  return button;
這個按鈕還派不上用場，但稍後我們會用它來實做刪除功能。這渲染程式，會讓頁面看起來像這樣：
js
function renderTodoList() {
  const frag = document.createDocumentFragment();
  state.tasks.forEach((task) => {
    const item = buildTodoItemEl(task.id, task.name);
    frag.appendChild(item);
  });
  while (todoListEl.firstChild) {
    todoListEl.removeChild(todoListEl.firstChild);
  todoListEl.appendChild(frag);
光是為了弄 UI 我們就寫了大約三十行左右的程式：這樣就只是為了能讓清單在 DOM 渲染而已喔。更別提之後還需要添加方便樣式化的 class。
像範例這樣直接操作 DOM 的話，會需要理解很多 DOM 的東西：像是 DOM 的原理、如何建立元素、更改屬性、巢狀排列……同時還要把他們都呈現出來。這些程式甚至還沒有處理與用戶的互動或工作。在增加功能的時候，我們需要在正確的時間、用正確的方法，來更新我們的 UI。
JavaScript 框架旨在使這類工作更加輕鬆：他們會提供更好的開發體驗。框架本身並沒有給 JavaScript 提供新功能；而是用更容易的方案，建立當代的網站。
如果想查看本節中的程式碼範例，請參閱 CodePen 的程式：這網站同樣允許用戶添加和刪除新任務。
閱讀本節中使用的 JavaScript 資訊：
  
document.createElement()
  
document.createTextNode()
  
document.createDocumentFragment()
  
eventTarget.addEventListener()
  
node.appendChild() (en-US)

  
node.removeChild()

JavaScript 框架都會提供一種能更加 宣告性 撰寫介面的方法。也就是說，框架能讓你描述 UI 看起來要怎麼樣、然後在 DOM 的背後完成這一切。

<ul>
  <li v-for="task in tasks" v-bind:key="task.id">
    <span>{{task.name}}</span>
    <button type="button">Delete</button>
就這樣啦。原本大約三十多行的程式，現在只要六行。如果不太熟悉大括號和 v- 屬性的話，沒關係；那些語法會在 Vue 模塊學到。這裡只是要講說與原生 JavaScript 對比，框架的程式碼看起來更像是實際呈現的 UI。
也因為有 Vue，我們再也不用自己寫針對 UI 呈現的函式；整個框架會幫我們用最優化、最效率的方法完成這件事。我們只要告訴 Vue 整個排版要怎麼排就好。熟悉 Vue 的開發者，也可以盡快參與我們的專案、搞清楚整個專案到底怎麼做的。不過並不是只有 Vue 這樣：使用框架本身，就可以提高團隊與個人的工作效率。
要在原生 JavaScript 做類似的事是可以的。樣板文字就能在編寫 HTML 字串的同時，也表示最終元素的外觀。就算是待辦事項列表應用，這樣簡單的事情，這可能是一個有用的想法，但是對於管理成千上萬條數據記錄、並且要在用戶界面中呈現盡可能多唯一元素的大型應用程序而言，這樣子是很難維護的。

讓我們看看框架賦予的其他優勢。正如之前提，你可以透過原生 JavaScript 實現框架，但是使用框架可以消除自行解決這些問題所需要的認知負擔。

本模塊提到的幾個框架，背後都有著龐大而活躍的社群；這些社群形成了各種生態圈、並提供能增進開發體驗的工具：像是確保功能正常的測試、或著維持程式一致性的 linting。