## 課程目標 能夠從陣列刪除元素 認識 for in 迴圈寫法 認識匿名函式（anonymous function） ## 課程內容 在 JavaScript 中，刪除陣列元素的方法，有超多種 這邊介紹一種根據索引刪除的方法 ``` var fruits = ["apple", "banana", "orange"]; var index = 1; var num = 1; fruits.splice(index, num) console.log(fruits) ``` `.splice()` 函式第一個傳索引，第二個傳要刪的數量，通常就傳 1 就好了（一次刪一個即可） 實務上，你就根據情況，隨便找一個能用的方式，來操作陣列就對了 --- 之前我們介紹過 for of 的寫法，很簡單好用 ``` var fruits = ["apple", "banana", "orange"]; for (const fruit of fruits) { console.log(fruit) } ``` 這邊多介紹一個 for in 的寫法，需要索引時可以用 ``` var fruits = ["apple", "banana", "orange"]; for (const index in fruits) { const fruit = fruits[index]; console.log(index); console.log(fruit); } ``` --- 最後來介紹匿名函式（anonymous function） 聽起來很玄，但其實就只是沒有名字的函式而已 以下是有名字的函式 ``` function hello1() { alert("hello1"); } var hello2 = () => { alert("hello2"); } ``` 以下是沒有名字的函式 ``` <button> hello </button> ``` ``` var button = document.querySelector('button'); button.onclick = () => { alert(123) }; ``` 動態宣告一個函式，然後直接指派、使用，就是匿名函式 在 JavaScript 中，很多時候，有些小任務，需要宣告新函式來用，但又懶得去設計命名那些的 這時候就可以用匿名函式來節省時間 雖然看起來有點不習慣、有點奇怪 但在實務上，非常多地方，其實都會用到匿名函式，算是 JavaScript 非常好用的一個功能、特性 ## 課後作業 接續上一課作業，這次來實作「刪除事項」 請更新 `render` 函式，讓 UI 看起來像這樣 ``` <ul> <li> <span>倒垃圾</span> <button>刪除</button> </li> <li> <span>繳電話費</span> <button>刪除</button> </li> <li> <span>採買本週食材</span> <button>刪除</button> </li> </ul> ``` 然後在過程中，動態產生 button 的時候，將 `.onclick` 屬性設定為一個 arrow function 這個 arrow function 不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` deleteBtn.onclick = () => { // 請寫出此 arrow function 內容（更新 todos 陣列） render(); }; ``` --- 提示：由於 javascript 中 hoisting 的特性，for loop 拿到的索引，在裡面的 arrow function 中使用，很容易抓錯 關於索引一直拿不到的問題，請參閱這邊我跟 birdie 同學的討論 https://codelove.tw/@birdie2019/post/2anbka --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠新增元素到陣列 ## 課程內容 因為我們不再使用「在各處胡亂更新各處 DOM」的寫法 現在要認真開始學習，如何在 JavaScript 中，用各種變數、資料型別，建立出 data model 這一課來學學新增元素到陣列的方法 ``` <button onclick="more()"> more </button> ``` ``` var fruits = ["apple", "banana"]; function more() { fruits.push("orange"); console.log(fruits); } ``` 非常簡單，使用陣列的 `.push()` 函式就可以 在 JavaScript 中，陣列相關操作的函式、寫法，有非常多種 我的建議是，各種寫法都可以，如果你有查到，隨便挑你喜歡的用就可以了 ## 課後作業 接續上一課作業，這次來實作「新增事項」 請在 html 的部份加入「輸入資料的 UI」，大概類似這樣 ``` <input type="text"> <button onclick="add()">新增</button> <div id="root"> </div> ``` 接著請將 `add` 函式完成，過程中不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` function add() { // 請寫出此函式內容（更新 todos 陣列） render(); } ``` 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識 data model 的觀念 認識 render function 的觀念 ## 課程內容 如果電商網站上有這樣的內容 ``` <div> 商品名稱：<span id="name">冬季外套</span> 價格：<span id="price">$1,990</span> 分類：<span id="category">女裝</span> 剩餘數量：<span id="remain">5</span> </div> ``` 在網站上的任何操作，菜鳥工程師會覺得就直接去更新 DOM 就好了 在程式還小的時候，這樣開發沒問題 但是當專案變大之後，這樣的開發會遇到問題，程式碼會越來越難維護 這種很難維護的寫法，我稱之為「在各處胡亂更新各處 DOM」的寫法 --- 有經驗的工程師在開發的時候，會習慣將應用程式的「狀態」與程式的其他部份分開來 這個「狀態」我們叫 state 或者 model 或者 data model 實務上，這三種名詞都很常看到，我在文章中也會混雜著交互使用 同樣的電商頁面，資深工程師會覺得看到了以下 data model ``` var product = { name: "冬季外套", price: 1990, category: "women", remain: 5 } ``` 而在開發各種功能的時候，資深工程師會覺得，一律先更新 data model，再接著拿 data model 來呈現出 UI 比較好 這樣在開發複雜應用程式的時候，相關函式一律只要關心 data model 就好，不用管 UI 在思考的時候，腦子的負擔會小很多，因為你變得只要想著應用程式的「狀態」就好 --- 那麽只更新 data model，那何時更新 UI 呢？ 這邊介紹一個簡單的方法，叫做 render function 就是放一個 root 元素，作為程式 UI 的容器 接著寫一個 render 函式，來根據 data model，畫出全部 UI 到 root 裡面 這個 render 函式有三個注意事項 - 第一行要先清空 UI - 在所有跟「狀態」有關操作的最後一行，都要呼叫這個函式 - 所有 DOM 操作一律由 render 函式處理（其他全部函式，通通禁止更新 DOM） 請在 jsfiddle 嘗試以下範例 ``` <div id="root"> </div> <button onclick="decrease()">decrese</button> <button onclick="increase()">increase</button> ``` ``` var product = { name: "冬季外套", price: 1990, category: "women", remain: 5 }; render(); function render() { var root = document.querySelector('#root'); root.textContent = ""; var name = document.createElement('div'); name.textContent = '商品名稱：' + product.name; var price = document.createElement('div'); price.textContent = '價格：' + product.price; var category = document.createElement('div'); category.textContent = '分類：' + product.category; var remain = document.createElement('div'); remain.textContent = '剩餘數量：' + product.remain; root.append(name); root.append(price); root.append(category); root.append(remain); } function decrease() { product.remain = product.remain - 1; render(); } function increase() { product.remain = product.remain + 1; render(); } ``` 這樣的寫法，很神奇地，關於 DOM 的操作通通放在 `render` 即可 雖然 `render` 函式變得很多行、很大、寫起來比較麻煩 但是除了 `render` 以外的函式，通通都變簡單了 這是「短期麻煩，長期方便」的一個明顯例子 ## 課後作業 在之前的課程，你開發過一個「待辦事項小工具」，甚至還加上了 local storage 儲存功能 在開發的過程中，我相信你有感覺到，程式碼越來越大團了，新功能雖然寫得出來，但越來越難寫了 回頭看看當初的程式碼，你會發現讀起來不容易，要再維護、擴充功能，也都不太容易 讓我們使用新方法，重新開發一次這個小工具 請使用 https://jsfiddle.net 並且建立一份新的 fiddle --- 這一課，不開發任何功能，先實作把 data model 給 render 出來的效果 請使用以下 html 作為 root 元素 ``` <div id="root"> </div> ``` 然後複製以下 js 使用，將 `render` 函式完成 ``` var todos = [ { title: "倒垃圾" }, { title: "繳電話費" }, { title: "採買本週食材" }, ]; function render() { // 請寫出此函式內容 } render(); ``` 在這段 js 中，`todos` 陣列，就是我們的 data model 最後，在畫面上，應該會出現以下內容 ``` <div id="root"> <ul> <li> <span>倒垃圾</span> </li> <li> <span>繳電話費</span> </li> <li> <span>採買本週食材</span> </li> </ul> </div> ``` 做出以上功能，你就完成這次的課程目標了！
身為前端新手學習者，雖然你已經知道怎麼寫 UI 小元件、怎麼寫簡單小工具 但是看著自己每天在用的那些網站、大型科技公司開發的 web application（網路應用程式） 你一定常常心想：這也太華麗了，畫面上 DOM 的變化很複雜、很頻繁，我好像寫不出來呀？ 別擔心，這是因為你目前為止的技能與開發方法，大概只接近 2010 年以前的業界工程師 你目前為止的能力還是比較接近「能把東西設計出來、做出來」而已，還不能夠「帶著工程思維去建造應用程式」 --- 這一門課程，會教你現代前端工程師，開發應用程式的方法與技巧 雖說是現代技巧，但完全不會用到 React 或者 Vue 這種框架 但在學完之後，你將可以比別人更懂，各種框架背後的基礎原理 這些內容非常有趣，將會大幅提升你的「工程素養」，讓你具備遠超過一般新手的基本功！ 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
## 課程目標 認識 AJAX 錯誤處理 ## 課程內容 在前一課，我們說過以下的話 > 有些任務現在還不會立刻執行，但我先把要執行的任務交待清楚，時間點到的時候，就執行 > 以 UI 動作來說，時間點就是 `onclick` 之時、`onchange` 之時 > 以 AJAX 動作來說，時間點就是 `拿到主機回應` 之時 實際上，AJAX 的時間點，除了 `拿到主機回應` 之時，還有一個，就是 `發現主機回應失敗` 之時 把原本的範例 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 故意打錯字試試看，然後加上錯誤處理機制 ``` fetch('https://fakestoreapi.com/users1') .then(res=>res.json()) .then(json=>console.log(json)) .catch(error => { alert(error); }) ``` 就跟 `.then()` 函式把任務傳進去類似，`.catch()` 一樣是把任務傳進去，只是改傳「AJAX 失敗的時候要執行的任務」 --- 這邊只是舉例，才故意打錯字 實務上，AJAX 失敗可能是 - 主機故障、或者過度忙碌無法回應 - 呼叫 API 時，登入驗證資訊過期 - API 設計成有額度限制，用戶額度耗完了，被主機拒絕 - 用戶自己的網路斷線了（網頁打開時正常，但發送 AJAX 時已斷線） 等等很多可能，要看 API 主機是如何設計的 --- 實務上，`.catch()` 內要提醒使用者，剛才的動作失敗，請他重新嘗試 我個人通常就用 alert 跳一個訊息「抱歉，系統出現錯誤，請稍後重新嘗試。若持續出錯，請聯絡客服信箱」就結束了 但在公司的大型專案，需要更好 UX 的話，請與設計師討論後決定如何優雅地處理錯誤情境 ## 課後作業 接續前一課的作業，請加上錯誤處理機制 用 alert 跳出 `抱歉，請稍後重新嘗試。` 就好了 接著，請把電腦的 wifi 或有線網路，斷線 然後點擊「Load Products」按鈕，應該會看到錯誤提示訊息 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識基本的 AJAX 原理 ## 課程內容 這一課來認識大名鼎鼎的 AJAX 觀念 AJAX 全名 Asynchronous JavaScript and XML 簡單來說，就是「非同步從主機取得資料來更新網頁內容」的技術 舊式的網頁，都是瀏覽器向主機發送 HTTP 請求 -> 主機回應一大坨 html 內容 -> 瀏覽器顯示漂亮網頁給用戶看 因為是一次拿到一大坨 html 內容，我們說「網頁上全部內容都是同步取得」 現代的網頁，也是有很多頁面是這樣直接取得，但有更多功能，是依靠非同步取得資料之後來更新的 - 滑動到網頁下方，動態載入了更多貼文 - 對內容按讚，按讚成功網頁出現了小變化 - 聊天室與別人聊天，網頁也是一段一段文字更新 這些都是使用 AJAX 技術的例子 也就是先載入基本網頁內容，再接著根據需求，於不同時間點發送 HTTP 請求取得部份內容，所以叫做非同步 實務上，我們會說「這邊要發一個 AJAX 跟主機要資料」 --- 讓我們拿一個「模擬線上購物網站 API」來當作例子 https://fakestoreapi.com/ 發一個 AJAX 取得 ID 為 1 的用戶資料 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 請在 jsfiddle 試試，看看結果 會看到一個包含信箱、ID、姓名、電話等等欄位的用戶個資，以物件的形式呈現 這邊使用了內建的 fetch 函式，參數放入要呼叫的 API 網址 接著使用 `.then()` 函式，由於是直接寫在後面，這相當於把 `fetch()` 回傳的東西，直接當成物件再接著呼叫 `.then()` 函式，然後再把結果當成物件再呼叫 `.then()` 一次 也就是跟這段一模一樣 ``` var result1 = fetch('https://fakestoreapi.com/users/1'); var result2 = result1.then(res=>res.json()); var result3 = result2.then(json=>console.log(json)); alert(result1) alert(result2) alert(result3) ``` 請在 jsfiddle 試試，會發現 console 顯示的個資一樣，這邊用三個 alert 觀察過程中的東西 會發現顯示三次 `[object Promise]`，這個 Promise 是一個進階觀念，這邊不細談，簡單講就是處理非同步請求的一種資料格式 `.then()` 參數傳進一個箭頭函式，這是省略大括號 `{}` 的箭頭函式寫法，其實就只是會自動回傳結果的函式寫法而已 但參數放了個函式，看起來有點怪，為何要這樣寫？ --- 記得我們之前寫過的動態綁定 onclick 事件嗎？ ``` <button id="my-btn">Click me</button> ``` ``` // 第一種寫法 function myFunction() { alert('你點擊了按鈕！'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` 網頁元素的事件處理，也是一種「非同步」程式設計 也就是我不確定「點擊」事件何時會發生，但我先「綁定」好事件發生時要做的任務，綁完就讓網頁正常呈現就好 上面的程式碼，可以改寫成這樣 ``` // 第二種寫法 var btn = document.getElementById('my-btn'); btn.onclick = () => { alert('你點擊了按鈕！'); } ``` 如果使用 jQuery，那還可以這樣改寫 ``` // 第三種寫法 $('#my-btn').click(() => { alert('你點擊了按鈕！'); }) ``` 第一種寫法，看起來像是：我先定義好函式，接著把函式名稱當作變數，綁定到 onclick 屬性 第二種寫法，看起來像是：onclick 這邊現場寫一個箭頭函式，把要執行的任務，當場交待清楚 第三種寫法，看起來像是：jQuery 提供的 `.click()` 函式，會負責把事件綁好，參數傳任務進去就對了 以上三種寫法，效果是完全一模一樣的！ 所以你早就接觸過「非同步」程式設計了 也就是「有些任務現在還不會立刻執行，但我先把要執行的任務交待清楚，時間點到的時候，就執行」 以 UI 動作來說，時間點就是 `onclick` 之時、`onchange` 之時 以 AJAX 動作來說，時間點就是 `拿到主機回應` 之時 像這種不是馬上執行的動作，在 JavaScript 領域，我們習慣用「寫一段函式定義當作參數傳進去」來表達！ --- 回頭看一下我們的範例 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 因為 fetch 第一個回傳的結果，代表的是一個 `HTTP 回應物件`，這個回應物件的 HTTP body 是實際的 JSON 內容，可以用 `.json()` 函式取得內容 所以第二個 `.then()` 的參數，才是我們真正想做的事情 看不懂沒關係，我們多看幾個例子吧 取得全部用戶個資的 AJAX。觀察 console 結果，會看到一個陣列，內含大量個資物件 ``` fetch('https://fakestoreapi.com/users') .then(res=>res.json()) .then(json=>console.log(json)) ``` 取得五筆用戶個資，也是拿到陣列 ``` fetch('https://fakestoreapi.com/users?limit=5') .then(res=>res.json()) .then(json=>console.log(json)) ``` 以上內容，全部通通看不懂沒關係，畢竟，需要多了解一些 HTTP 協定與術語，比較好理解 你就先照做就好：要發 AJAX，就用 `fetch()` 函式，接著第一個 `then()` 要執行 `.json()` 函式，然後第二個函式才是你真正要執行的任務！ ## 課後作業 請使用 https://jsfiddle.net/ 請使用「模擬線上購物網站 API」 https://fakestoreapi.com/ 假設正在開發一個讀取全部商品資料的頁面 用以下 html 為基礎 ``` <button>Load Products</button> <hr> <ul></ul> ``` 點擊按鈕，發送 AJAX 到 https://fakestoreapi.com/products 請求全部商品資料 拿到資料之後，將每筆資料用以下格式呈現，塞進 `<ul>` 元素裡面 ``` <li> <span>xxx</span> <button>Details</button> </li> ``` xxx 是商品名稱。點擊 Details 按鈕，連續跳出三個 alert，分別顯示 `id` `category` `description` --- 請注意，在 for 迴圈裡面綁定 onclick 事件的時候，for 迴圈的參數請加上 `const` 舉例來說，請這樣寫 ``` for (const product of json) { ``` 請「不要」這樣寫 ``` for (product of json) { ``` 否則，在迴圈裡面的 onclick 事件，執行起來會有 bug 原因跟上一課提到的 Hoisting 現象有關 我認為這是 JavaScript 的設計失敗，所以詳細原因我不想說明 這是屬於上個世代 JS 工程師的痛苦回憶，這一代的 JS 工程師不需要經歷 現在就用 ES6 語法，宣告變數一律記得加上 `const` 或 `let` 就對了 --- 做出以上功能，你就完成這次的課程目標了！
框架背後有什麼必學觀念的？這篇文章簡單整理如下 原文出處：https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g --- 很多初學者會問“我應該學哪個框架？”和“學一個框架之前需要學多少JS或TS？” - 無數自以為是的文章都在宣傳作者首選框架或庫的優勢，而不是向讀者展示其背後的概念、教他們如何做出明智的決定。讓我們先解決第二個問題： ## “在學習框架之前要學多少 JS/TS？” 盡可能多地理解它們的基本概念。您將需要了解基本資料類型、函數、基本運算符和文檔對像模型 (DOM)，這是 HTML 和 CSS 在 JS 中的基礎。雖然先學一點當然沒關係，但沒必要先精通框架或庫。 如果您是一個完全的初學者，[JS for cats](http://jsforcats.com/) 可能是您第一步的好資源。繼續前進，直到您感到自信為止，然後繼續前進，直到您開始感到自信不足。那就是你了解足夠的 JS/TS 並可以開始學框架的時間。其餘的你可以邊走邊學。 ## “你指的是什麼概念？” - 狀態 - 效果 - 記憶化 - 模板和渲染 所有現代框架都從這些概念中衍伸出它們的功能。 ### 狀態 狀態只是讓您的應用程式跑起來的資料。它可能在全局級別上，適用於應用程式的較大部分，或適用於單個元件。讓我們以一個簡單的計數器為例。它保留的計數是狀態。我們可以讀取狀態並寫入狀態以增加計數。 最簡單的表示通常是一個變數，其中包含我們的狀態所包含的資料： ``` let count = 0; const increment = () => { count++; }; const button = document.createElement('button'); button.textContent = count; button.addEventListener('click', increment); document.body.appendChild(button); ``` 但是這段程式碼有一個問題：對 count 的更改，就像對 increment 所做的更改一樣，不會更新按鈕的文本內容。我們可以手動更新所有內容，但這對於更複雜的用例來說並不能很好地擴展。 `count` 更新其用戶的能力稱為*反應性*。這是通過訂閱並重新執行應用程式的訂閱部分來更新的。 幾乎每個現代前端框架和庫都有一種響應式管理狀態的方法。解決方案分為三部分，至少採用其中之一或混合使用： - Observables / Signals - Reconciliation of immutable updates - Transpilation #### Observables / Signals Observables 基本上是允許藉由訂閱閱讀器的函數來進行讀取的結構。然後訂閱者在更新時重新執行： ``` const state = (initialValue) => ({ _value: initialValue, get: function() { /* subscribe */; return this._value; }, set: function(value) { this._value = value; /* re-run subscribers */; } }); ``` 這個概念的第一個用途之一是在 [knockout](https://knockoutjs.com/) 中，它使用相同的函數，帶和不帶參數進行寫/讀存取。 這種模式目前正在以「信號」的形式復興，例如在 [Solid.js](https://www.solidjs.com/docs/latest/api#createsignal) 和 [preact signals](https://preactjs.com /guide/v10/signals/)，但在 [Vue](https://vuejs.org/) 和 [Svelte](https://svelte.dev/) 的底層使用了相同的模式。 [RxJS](https://rxjs.dev/) 為 [Angular](https://angular.io/) 的反應層提供動力，是這一原則的延伸，超越了簡單狀態，但有人可能會爭辯說它模擬複雜性的能力可能反而綁手綁腳。 [Solid.js](https://www.solidjs.com/) 還以儲存（可以通過 setter 操作的物件）和可變（可以像平常一樣使用的物件）的形式進一步抽象這些信號 JS 物件或 [Vue](https://vuejs.org/) 中的狀態來處理巢狀狀態物件。 #### Reconciliation of immutable states 不變性意味著如果一個物件的屬性發生變化，整個物件引用必須改變，所以簡單的引用比較可以很容易地檢測到是否有變化，這就是協調器所做的。 ``` const state1 = { todos: [{ text: 'understand immutability', complete: false }], currentText: '' }; // updating the current text: const state2 = { todos: state1.todos, currentText: 'understand reconciliation' }; // adding a to-do: const state3 = { todos: [ state.todos[0], { text: 'understand reconciliation', complete: true } ], currentText: '' }; // this breaks immutability: state3.currentText = 'I am not immutable!'; ``` 如您所見，未更改專案的引用被重新使用。如果協調器檢測到不同的物件引用，它會再次使用狀態（props, memos, effects, context）來重跑所有元件。由於讀取存取是被動的，這需要手動指定對反應值的依賴性。 顯然，您不是以這種方式定義狀態。您可以從現有屬性建置它，也可以使用所謂的 reducer。reducer 是一個函數，它接受一個狀態並返回另一個狀態。 [react](https://reactjs.org/) 和 [preact](https://preactjs.com/) 使用此模式。它適合與 vDOM 一起使用，我們將在稍後描述模板時探討它。 並非每個框架都使用其 vDOM 來使狀態完全響應。 例如 [Mithril.JS](https://mithril.js.org/components.html#state)，元件會在設置的事件後變化後更新狀態；否則你必須手動觸發 `m.redraw()`。 #### Transpilation Transpilation 是一個建置步驟，它重寫我們的程式碼以使其在舊瀏覽器上執行或賦予它額外的能力；在這種情況下，該技術用於將簡單變數更改為反應系統的一部分。 [Svelte](https://svelte.dev/) 基於一個轉譯器，該轉譯器還通過看似簡單的變數宣告和存取為其反應式系統提供動力。 順便說一句，[Solid.js](https://solidjs.com) 使用轉譯，但不是針對它的狀態，只是針對模板。 ### 效果 在大多數情況下，我們需要對反應狀態做更多的事情，而不是從中衍伸並渲染到 DOM 中。我們必須管理副作用，這些都是由於視圖更新之外的狀態更改而發生的所有事情（儘管 [Solid.js](https://solidjs.com) 等一些框架也將視圖更改視為效果）。 還記得第一個例子中，訂閱處理被故意遺漏的狀態嗎？讓我們完成這個處理效果，來作為對更新的反應： ``` const context = []; const state = (initialValue) => ({ _subscribers: new Set(), _value: initialValue, get: function() { const current = context.at(-1); if (current) { this._subscribers.add(current); } return this._value; }, set: function(value) { if (this._value === value) { return; } this._value = value; this._subscribers.forEach(sub => sub()); } }); const effect = (fn) => { const execute = () => { context.push(execute); try { fn(); } finally { context.pop(); } }; execute(); }; ``` 這基本上是 [preact signals](https://preactjs.com/guide/v10/signals/) 或 [Solid.js](https://solidjs.com) 中反應狀態的簡化，沒有錯誤處理和狀態突變模式（使用接收前一個值並返回下一個值的函數），但這很容易加入。 它允許我們使前面的範例具有反應性： ``` const count = state(0); const increment = () => count.set(count.get() + 1); const button = document.createElement('button'); effect(() => { button.textContent = count.get(); }); button.addEventListener('click', increment); document.body.appendChild(button); ``` > ☝ 使用您的開發人員工具在 [空白頁面](about:blank) 中嘗試上述兩個程式碼塊。 在大多數情況下，框架允許不同的時間安排，讓效果在渲染 DOM 之前、期間或之後執行。 ### 記憶化 Memoization 意味著緩存從狀態計算的值，它會從狀態衍伸的變化更新時更新。它基本上是一種回傳衍伸狀態的效果。 在重新執行元件功能的框架中，例如 [react](https://reactjs.org/) 和 [preact](https://preactjs.com/)，這讓某些複雜計算不需要每次都重複計算。 對於其他框架，情況恰恰相反：它允許您選擇部分組件進行響應式更新，同時緩存之前的計算。 對於我們簡單的反應式系統，memo 看起來像這樣： ``` const memo = (fn) => { let memoized; effect(() => { if (memoized) { memoized.set(fn()); } else { memoized = state(fn()); } }); return memoized.get; }; ``` ### 模板化和渲染 現在我們有了純的、衍伸的和緩存形式的狀態，我們想把它展示給用戶。在我們的範例中，我們直接使用 DOM 來加入按鈕並更新其文本內容。 為了對開發人員更加友好，幾乎所有現代框架都支持一些特定領域的語言來編寫類似於程式碼中所需輸出的內容。儘管有不同的風格，比如 `.jsx`、`.vue` 或 `.svelte` 文件，但它們都歸結為用類似於 HTML 的程式碼表示 DOM，因此基本上 ``` <div>Hello, World</div> // in your JS // becomes in your HTML: <div>Hello, World</div> ``` 你可能會問“我要把狀態放在哪裡？”。很好的問題。在大多數情況下，`{}` 用於表示屬性和節點周圍的動態內容。 最常用的 JS 模板語言擴展無疑是 JSX。對於 [react](https://reactjs.org)，它被編譯為純 JavaScript，其方式允許它建立 DOM 的虛擬表示，一種稱為虛擬文檔對像模型或簡稱 vDOM 的內部視圖狀態。 這樣設計的原因是：建立物件比存取 DOM 快得多，所以如果你能用當前的替換後者，你可以節省時間。但是，如果您在任何情況下都有大量 DOM 更改或建立無數物件而沒有更改，則此解決方案的優點就變成必須通過「記憶化」來規避的缺點。 ``` // original code <div>Hello, {name}</div> // transpiled to js createElement("div", null, "Hello, ", name); // executed js { "$$typeof": Symbol(react.element), "type": "div", "key": null, "ref": null, "props": { "children": "Hello, World" }, "_owner": null } // rendered vdom /* HTMLDivElement */<div>Hello, World</div> ``` 不過，JSX 不僅限於 react。例如，Solid 使用其轉譯器更徹底地更改程式碼： ``` // 1. original code <div>Hello, {name()}</div> // 2. transpiled to js const _tmpl$ = /*#__PURE__*/_$template(`<div>Hello, </div>`, 2); (() => { const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild; _$insert(_el$, name, null); return _el$; })(); // 3. executed js code /* HTMLDivElement */<div>Hello, World</div> ``` 雖然轉譯後的程式碼乍看可能令人望而生畏，但解釋這裡發生的事情卻相當簡單。首先，建立包含所有靜態部分的模板，然後複製它以建立其內容的新實體，並加入動態部分並連接以根據狀態更改進行更新。 Svelte 走得更遠，不僅可以轉換模板，還可以轉換狀態。 ``` // 1. original code <script> let name = 'World'; setTimeout(() => { name = 'you'; }, 1000); </script> <div>Hello, {name}</div> // 2. transpiled to js /* generated by Svelte v3.55.0 */ import { SvelteComponent, append, detach, element, init, insert, noop, safe_not_equal, set_data, text } from "svelte/internal"; function create_fragment(ctx) { let div; let t0; let t1; return { c() { div = element("div"); t0 = text("Hello, "); t1 = text(/*name*/ ctx[0]); }, m(target, anchor) { insert(target, div, anchor); append(div, t0); append(div, t1); }, p(ctx, [dirty]) { if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]); }, i: noop, o: noop, d(detaching) { if (detaching) detach(div); } }; } function instance($$self, $$props, $$invalidate) { let name = 'World'; setTimeout( () => { $$invalidate(0, name = 'you'); }, 1000 ); return [name]; } class Component extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, {}); } } export default Component; // 3. executed JS code /* HTMLDivElement */<div>Hello, World</div> ``` 也有例外。例如，在 [Mithril.js](https://mithril.js.org/) 中，雖然可以使用 JSX，但我們鼓勵您編寫 JS： ``` // 1. original JS code const Hello = { name: 'World', oninit: () => setTimeout(() => { Hello.name = 'you'; m.redraw(); }, 1000), view: () => m('div', 'Hello, ' + Hello.name + '!') }; // 2. executed JS code /* HTMLDivElement */<div>Hello, World</div> ``` 雖然大多數人會發現開發人員缺乏經驗，但其他人更喜歡完全控制他們的程式碼。根據他們主要想解決的問題，缺少轉譯步驟甚至可能是有益的。 儘管很少有人這樣推薦，許多其他框架都允許在不進行轉譯的情況下使用。 ## “我現在應該學習什麼框架或庫？” 我有一些好訊息和一些壞訊息要告訴你。 壞訊息是：沒有萬靈丹。沒有哪個框架在每個方面都比其他框架好得多。他們每個人都有自己的優勢和妥協。 [React](https://reactjs.org/) 有它的鉤子規則，[Angular](https://angular.io/) 缺乏簡單的信號，[Vue](https://vuejs.org/)缺乏向後兼容性，[Svelte](https://svelte.dev/) 不能很好地擴展，[Solid.js](https://www.solidjs.com/) 禁止解構，[Mithril.js]( https://mithril.js.org/) 並不是真正的反應式，僅舉幾例。 好訊息是：沒有錯誤的選擇——至少，除非專案的要求真的很有限，無論是在 bundle 大小還是性能方面。每個框架都會完成它的工作。有些人可能需要配合團隊的設計決策，這可能會使您的速度變慢，但無論如何您都應該能夠獲得可行的結果。 話雖這麼說，沒有框架也可能是一個可行的選擇。許多專案都被過度使用 JavaScript 破壞了。其實帶有一些互動性的靜態頁面就可以完成這項工作。 現在您已經了解了這些框架和庫應用的概念，請選擇最適合您當前任務的概念。不要害怕在下一個專案中切換框架。沒有必要學習所有這些。 如果你嘗試一個新的框架，我發現最有幫助的事情之一就是跟它的社群有所連結，無論是在社群媒體、discord、github 還是其他地方。他們可以告訴您哪些方法適合他們的框架，這將幫助您更快地獲得更好的解決方案。 ## “拜託，你*總是*有個人喜好吧！” 如果你的主要目標是就業，我建議學習 [react](https://reactjs.org/)。如果您想要輕鬆的性能和控制體驗，請嘗試 [Solid.js](https://solidjs.com)；你可能會在 Solid 的 [Discord](https://discord.com/invite/solidjs) 上見到我。 但請記住，所有其他選擇都同樣有效。你不應該因為我這麼說就選擇一個框架，而應該使用最適合你的框架。
## 課程目標 認識並且能使用 jQuery 套件 ## 課程內容 這一課要教的東西比較有爭議 jQuery 是 2006 - 2015 年代，前端網頁開發的王者 當時的瀏覽器廠商眾多，網頁規格 API 支援方式不同、不完整（尤其是 IE 一堆奇怪的 API） 當時的前端工程師，非常痛苦，要為了 IE 多改很多寫法 加上當時很多瀏覽器沒有支援 `.querySelector` `.querySelectorAll` 這些 Selector API 所以 jQuery 的出現，強大的選擇器語法，以及眾多方便的功能，大幅降低了前端開發的成本 不過，時至今日，jQuery 的大部份功能，都已在瀏覽器 JavaScript 語法中原生支援了 再加上開發大型應用程式，DOM 的管理一旦複雜起來，就會直接使用 React 或者 Vue 這種框架來管理 DOM，不會再手動去操作 DOM （前端框架會處理完 DOM 互動的部份。此時如果再手動操作 DOM，那程式碼就會一團混亂） 也就是說，小型專案，「不需要」用 jQuery；大型專案，「不可以」用 jQuery 除此之外，jQuery 套件本身檔案不小，引入此套件會影響網頁載入速度，影響 UX，同時會影響搜尋引擎 SEO 排名 --- 因為上述種種原因，在今天，前端工程師普遍鄙視 jQuery，避之惟恐不及 我個人的建議是：團隊在開發複雜的前端應用時，的確不要再用 jQuery 了！ 但是，當只是做小網站，接小案子賺錢，或者做個人的業餘專案（side project），只是希望快速做完某些功能時，jQuery 還是非常好用！ 原因有兩個 第一，jQuery 選擇器寫起來很短，可以少打很多字，開發很快速 第二，jQuery 外掛生態系存在已久，很多強大的 UI 元件會用到 jQuery，適合的話，實在沒道理全面放棄不用 而且，並不是所有網站，都需要直接導入 React 跟 Vue 這種大型框架！沒必要！ 除此之外，維護一大堆現有的程式碼，難免已經用到 jQuery，還是能看懂 API 比較好 所以，還是稍微教大家一些 jQuery 的用法。至於什麼場合要使用，你就自行判斷吧 --- 官網 https://jquery.com/ API 用法 https://api.jquery.com/ CDN 連結 https://releases.jquery.com/ 請自行逛一逛，大概知道 jQuery 有哪些 API 就好，不用花太多時間學習 jQuery 你應該會發現，一大堆功能，你自己就寫得出來，而且寫起來也不複雜，例如 `.hide()` `.show()`，你之前的作業就寫過，根本不需要用 jQuery 剩下的一大堆功能，目前看不懂沒關係、覺得自己做不出來沒關係，未來的課程會教你 --- 簡單地說，jQuery 選擇器就是使用金錢符號來呼叫函示 `$()` 其實是 `jQuery()` 的簡寫而已 ``` <h1 class="title"> Hide me </h1> <p class="para"> Hide me </p> <p class="para"> Hide me </p> <p class="para"> Hide me </p> ``` ``` document.querySelector('.title').style.display = 'none'; for (var p of document.querySelectorAll('.para')) { p.style.display = 'none'; } ``` 像這樣的程式，隱藏了畫面上多個元素 使用 jQuery 的寫法會變成 ``` $('.title').hide(); $('.para').hide(); ``` 很多人覺得，jQuery 只剩一些少打字的功能，卻讓網頁多載入整個 jQuery 套件，很沒意義、不值得 我倒是覺得，還是滿方便的。快速開發時，少打很多字。而且 jQuery 可以自動處理多個元素，可以少寫 for 迴圈 當然了，上面的程式碼，跟下面這段是完全一樣的 ``` jQuery('.title').hide(); jQuery('.para').hide(); ``` jQuery 基本上就這樣而已，你喜歡嗎？ 實務上，使用時，如果翻文件，還是不知怎麼寫，就去搜尋引擎找關鍵字 `jquery 改變顏色` `jquery change color` 之類的 別忘了，軟體工程師在工作時，會花很多時間在翻文件、上網到處看文章、搜尋範例程式碼，所以要習慣這件事 --- 坊間很多課程，會在一開始就教 jQuery。這跟直接教前端框架的問題一樣：學生的基本功，因此變得很差 但是本課程已讓你知道最基本的原生 DOM 寫法，所以你在用 jQuery 時，會知道背後發生什麼事，也知道刪掉 jQuery 的話，要怎麼用原生語法改寫 所以，我認為在本課程的安排下，jQuery 並不會耽誤你的學習旅程 喜歡 jQuery 的話，就把 API 網頁，多逛一逛，工作上想用的話，就大方使用吧！ ## 課後作業 請使用 https://jsfiddle.net 這次的作業要交兩份 請建立兩份 jsfiddle，並使用以下 html ``` <h1 class="title"> Make me green </h1> <p class="para"> Make me red </p> <p class="para"> Me red too </p> <p class="para"> Also me </p> ``` 在第一份，不使用 jQuery，把 h1 文字變為綠色，p 文字變為紅色 在第二份，請使用 jQuery，把 h1 文字變為綠色，p 文字變為紅色 寫完之後，你自行比較一下，網頁多加一個肥大的套件，但是可以少打這些字，你覺得值得嗎？ 這是一個主觀問題，你就根據情況決定你的答案吧！ 做出以上功能，你就完成這次的課程目標了！
在這份教材中，實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件，但已能滿足許多網站設計需求 實務上，不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎，接著客製化與修改，例如最知名的 Bootstrap 套件 但是，不論是網頁設計師、前端工程師，在使用現成套件之餘，稍微知道背後的原理，比較好 這樣才能更好地掌握工具，以及在必要的時候能夠親自開發與修改 而到目前為止，我認為，你已經能夠親手製作出設計師要求的大部份靜態＆動態設計了！ --- 真正在工作的時候，也會很像本次課程這樣，幾乎完全沒人幫你 但或許會有人告訴你關鍵字，或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過，但你有信心，可以找到相關資源、可以做得出來 身為軟體工程師，需要有這種「大致知道自己潛力在哪」的能力與信心，才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中，在我完全沒有教學的情況下，你就成功做到了 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（四）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/837eq0
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證，可以用 alert 跳訊息提醒就好 但因為 alert 視窗，普遍被認為太醜、功能太弱，設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜，可以在送出表單的時候驗證，也可以在打字輸入的時候就同時驗證 請上網搜尋 `form validation ui`，四處觀摩一下業界常見的設計 ## 課後作業 請使用 https://jsfiddle.net 實做一個「註冊帳戶」表單 欄位有 - 用戶暱稱 - Email 信箱 - 密碼 接著有一個「註冊」按鈕 按下按鈕的時候，如果有欄位空白，就在欄位的下方或者旁邊，顯示紅字提示 各個欄位的驗證檢查條件如下： - 用戶暱稱 -> 不能為空白、必須在40字以內 - Email 信箱 -> 不能為空白、必須包含 `@` 符號 - 密碼 -> 不能為空白、必須在8字以上、必須在100字以內 請稍微加一些 css 屬性，弄得漂亮一點 --- 請搜尋 `javascript 包含字串` `javascript 字串長度`，了解相關用法，才有辦法完成本課作業 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件，也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」，就算是一種「視窗」 各大社群網站，逛一逛就跳出「視窗」強迫你登入 點擊照片或者貼文，以前常常會開啟新網頁，現在常常設計成打開「視窗」直接就可以看內容 modal 跳出時，通常會將整個背景變成半透明黑色或白色，來讓視窗內容更顯眼 並且 modal 會有按鈕可以關閉 請上網搜尋 `popup modal ui` `lightbox ui`，四處觀摩一下業界常見的設計 --- 要寫出這種視窗的效果，其實 css 的部份還比 js 的部份難一些 請上網搜尋 `燈箱 css` `popup modal css` `popup modal css` 了解各種不同的寫法與技巧 半透明背景遮罩的英文術語叫 `black overlay` 請上網搜尋 `css 黑色半透明遮罩` `full page black overlay css` 了解各種如何做到此效果。不過，若是做不出來，這個效果也是可以省略不做 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份 ``` <button onclick="loginModal()">點我登入帳號</button> <hr> <button onclick="postModal()">點我新增貼文</button> <div class="modal" id="login-modal"> <div>帳號：<input type="text"></div> <div>密碼：<input type="password"></div> <hr> <button class="btn-close">關閉</button> </div> <div class="modal" id="post-modal"> <div>標題：<input type="text"></div> <div>內文：<textarea></textarea></div> <hr> <button class="btn-close">關閉</button> </div> ``` --- 這邊共有兩個按鈕，模擬兩種使用情境 兩個視窗元件，一開始預設是隱藏的，不會在畫面上看到 點擊登入按鈕，會跳出登入視窗。可以點擊視窗內的關閉按鈕，來將視窗關閉 點擊貼文按鈕，會跳出貼文視窗。可以點擊視窗內的關閉按鈕，來將視窗關閉 --- 請稍微加一些 css 屬性，弄得漂亮一點 `<hr>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件，就跟烤土司機，烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出，可以讓使用者體驗（User Experience，簡稱 UX）更好 很多網站因為沒有做好適當的 toast 元件，使用者在操作時常常覺得「表單到底有沒有送出？」「網站當機了是不是？」 通常要將 toast 做成幾種不同樣式，根據不同使用情境來使用 由於 toast 通常會直接蓋在網站的上方正中央（或者右上角、左下角，不一定） 會蓋到網頁畫面，所以通常會做成「顯示幾秒之後自動關閉」 請上網搜尋 `toast ui` `toast component`，四處觀摩一下業界常見的設計 --- 要在倒數幾秒之後執行任務，你需要 `setTimeout` 這個函式。請自行上網搜尋一下，了解這個函式的用法 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份 ``` <button onclick="toastSuccess()">成功訂購商品</button> <hr> <button onclick="toastError()">訂購商品失敗</button> <div class="toast toast-success"> 訂購成功！可以查看 Email 確認訂單細節！ </div> <div class="toast toast-error"> 抱歉，訂購失敗！請稍後重新嘗試 </div> ``` --- 這邊共有兩個按鈕，模擬兩種使用情境 兩個吐司元件，一開始預設是隱藏的，不會在畫面上看到 請寫出 `toastSuccess` 函式的內容，在點擊按鈕後，將「成功吐司」顯示在畫面上 5 秒鐘，之後自動消失 請寫出 `toastError` 函式的內容，在點擊按鈕後，將「錯誤吐司」顯示在畫面上 5 秒鐘，之後自動消失 成功吐司請做成綠色 錯誤吐司請做成紅色 這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定 --- 請稍微加一些 css 屬性，弄得漂亮一點 `<hr>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件，當有訊息要公告在網站上，就可使用 或者當用戶執行了某些動作，在頁面上要提示、回饋訊息的時候，也可使用 通常要將 alert 做成幾種不同樣式，根據不同使用情境來使用 由於 alert 可能會佔據網頁上方、或下方，一整塊長條區域 會有點佔空間，所以通常會多做「關閉」按鈕，方便用戶保持畫面整潔 請上網搜尋 `alert ui` `alert component`，四處觀摩一下業界常見的設計 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份 ``` <div class="alert alert-primary"> 歡迎您點擊「抖內」按鈕，以實際行動支持我們。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-success"> 您已成功下訂單！以下為您的訂單詳細資訊。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-danger"> 抱歉，系統發生錯誤，請稍後重新嘗試。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-warning"> 請注意，以下內容包含「劇透」爆雷資訊。 <button class="btn-close">×</button> </div> ``` --- 這邊共有四個 alert 元件，各自有不同樣式 primary 用在主要公告事項，呈現藍色 success 用來傳遞讓人安心的成功訊息，呈現綠色 danger 用來提示錯誤訊息，呈現紅色 warning 用來呈現敏感注意事項，呈現橘色 這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定 --- 訊息的旁邊，有一個關閉按鈕，點擊按鈕，要能關閉整個 alert 元件 --- 請稍微加一些 css 屬性，弄得漂亮一點 `<hr>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！
本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中，已經學會程式設計的基本觀念，以及 DOM 操作的基本方法 在這次的課程，我們將練習製作實務上常用的 UI 元件 藉由這次練習，強化在前兩部份課程學到的知識 --- 身為工程師，常常要做一些沒做過的功能 這時，就需要足夠的自學、研究能力，以及敢於面對未知的信心 也就是雖然功能看起來沒做過，但你有把握稍微研究之後，就能做得出來 所以這次的課程，我只會提供簡單介紹＆關鍵字 接著就直接提出作業規格，你需要自行研究如何完成作業 --- 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：JavaScript（一）—— 幫衣服工廠做個好用表單](https://codelove.tw/@howtomakeaturn/course/l3j5xk) - [自學網頁の嬰兒教材：JavaScript（二）—— 親手做個待辦事項小工具](https://codelove.tw/@howtomakeaturn/course/vx8gqZ) 準備好的話，讓我們馬上開始吧！
## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中，我們學過陣列＆索引的基本用法 實務上，使用陣列時，通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種，我們先學 for of 的寫法就好 ``` var fruits = ["Apple", "Banana", "Orange"]; var text = ""; for (var x of fruits) { text = text + x; } alert(text); ``` 像這樣，就能依序存取到陣列內的每個內容 for 迴圈後面是大括號 `{}` 把任務包起來 就跟 if 一樣，裡面當然也可以放多行程式碼 ``` var fruits = ["Apple", "Banana", "Orange"]; var num = 1; var text = ""; for (var x of fruits) { alert(num.toString() + ') ' + x ); text = text + x; num = num + 1; } alert(text); ``` 在上面的範例，也同時示範了，如果想要同時知道「當前內容在陣列內的順序」 只要宣告一個整數的變數，每次迴圈內都幫它 +1 即可 到 jsfiddle 試試看，就會清楚實際效果囉！ ## 課後作業 接續前一課的作業，現在待辦清單基本功能有了 你希望可以把清單內容自動轉變為純文字，方便貼到 LINE 群組之類的地方，分享給別人看 這次要來實作「匯出為純文字」的功能 --- 請在清單的下方，新增一個「匯出為純文字」的按鈕 假設清單內目前有三個事項「洗衣服」、「買文具」、「去健身房」 按下匯出按鈕之後，就用 alert 跳出訊息「今日待辦：1. 洗衣服 2. 買文具 3. 去健身房」 alert 的內容，滑鼠移上去，應該是可以選取＆複製的（如果您的瀏覽器不支援，也沒關係，反正就是 alert 出來就對了） 請稍微替這個匯出按鈕加一點 css 屬性，弄得漂亮一點，看起來才專業 做出這個功能，你就完成這次的課程目標了！
## 課程目標 認識 DOM 樹基本觀念 能夠在 DOM 樹進行「新增」 學會基本的除錯技巧 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 JavaScript 的時候，你會聽到很多人在講「DOM 樹」這個名詞 什麼是「DOM 樹」？ 其實只是，你在網頁上看到的東西，瀏覽器會在背後的 JavaScript 環境，維持一個對應的「DOM 樹」 比如說，當你寫這樣的 html（這邊先省略內容，只留結構） ``` <html> <head> <script></script> </head> <body> <div> <h1></h1> <p></p> </div> </body> </html ``` 瀏覽器會在背後創造一個這樣的資料結構 ``` document └── html ├── head │ └── script └── body └── div ├── h1 └── p ``` 很像是樹吧？這就是「DOM 樹」 記得之前用過的 `document.getElementById` 嗎？ 這就是 DOM 最上面的 document 物件 所謂的「DOM 樹」其實就是一個「巢狀物件」。 「巢狀物件」的意思是，物件的屬性，又是另一個物件，然後這物件的屬性，又可以是另一個物件 用 JavaScript 來表示的話，類似這樣（只是概念喔，真實的物件不只是這樣，而是有一堆內建函式與屬性可以用） ``` var document = { name: 'document', children: [ { name: 'html', children: [ { name: 'head', children: [ { name: 'script', children: [] } ] }, { name: 'body', children: [ { name: 'div', children: [ { name: 'h1', children: [] }, { name: 'p', children: [] } ] } ] } ] } ] } ``` 在 DOM 中，被包起來的元素，稱為子元素；把別人包起來的元素，稱為父元素。就跟學 html 時的稱呼一樣 瀏覽器會確保用戶介面（User Interface，簡稱 UI）上看到的，跟環境中實際運行的 DOM 長得一模一樣 也就是說，你修改 UI 的內容，DOM 物件就會自動更新；你用 JavaScript 修改 DOM 物件的內容，UI 就會自動更新 --- 來學學怎麼用 JavaScript 操作 DOM 樹吧！ 如果原本 html 長這樣 ``` <div id="app"></div> ``` 只要加入這段程式碼 ``` var heading = document.createElement('h1'); heading.textContent = '這是標題'; var para = document.createElement('p'); para.textContent = '這是段落文字'; var app = document.getElementById('app'); app.append(heading); app.append(para); ``` 利用 document 的內建函數 `createElement` 來動態創造新的元素 修改元素的屬性 `.textContent` 來設定文字內容 接著用 `.append()` 函數來讓元素吃下別的元素，也就是「把另一個元素收為子元素」，就跟收養子女一樣！ 最後 html 就會變成這樣 ``` <div id="app"> <h1>這是標題</h1> <p>這是段落文字</p> </div> ``` 馬上貼到 jsfiddle 試試看，實驗一下、玩玩看！ --- 在寫 html 的時候，出現巢狀結構是很常見的 操作 DOM 時，當然也可以自由創造巢狀結構 ``` var elem1 = document.createElement('div'); elem1.textContent = 'level 1'; var elem2 = document.createElement('div'); elem2.textContent = 'level 2'; var elem3 = document.createElement('div'); elem3.textContent = 'level 3'; var app = document.getElementById('app'); app.append(elem1); elem1.append(elem2); elem2.append(elem3); ``` 到 jsfiddle 試試看，就會清楚實際效果囉！ --- 在開發的過程中，基本上會不斷打錯字、寫錯用法。程式跑不出結果，很正常 這種時候，有兩個常用的除錯方法，我們叫「debug 的方法」 第一個方法是 `alert`，你就把不確定的內容，給 alert 出來看看就對了，到處寫 alert 看一下變數內容，確定內容跟預期一樣，再接著繼續寫 第二個方法是 `console.log()`，把參數傳進去，接著打開瀏覽器的「開發者工具」，就會看到結果，通常會比 alert 內容更詳細、更方便除錯 除此之外，JavaScript 相關的各種錯誤訊息，都會在「開發者工具」出現。請去研究你所使用的瀏覽器，如何打開這個工具 ``` var x = 123; var y = 'hello'; var z = document.createElement('div'); console.log(x) console.log(y) console.log(z) ``` 請打開瀏覽器的開發者工具，實際看一下上述範例的結果。 ## 課後作業 假設你是一個健忘的人，你決定寫一個「待辦事項管理」應用程式，來幫助自己 這一課，先實作「新增事項」的功能 --- 在上面，做一個文字輸入框，旁邊有一個「新增」按鈕 在下面，做一個展示待辦事項的清單，請使用這樣的結構，id 跟 css 之類的你可以自由決定 ``` <ul> <li> <span>倒垃圾</span> </li> <li> <span>繳電話費</span> </li> <li> <span>採買本週食材</span> </li> </ul> ``` 點擊「新增」按鈕，會將新事項插入到清單最底部 請稍微替這個清單工具加一點 css 屬性，弄得漂亮一點，這樣的工具才讓人想用 --- 除此之外，請練習一下 `console.log` 的用法，不然之後遇到錯誤，幾乎沒辦法除錯 請把作業內容中，出現的變數，隨便挑三個，用 `console.log` 印到開發者工具中，然後用瀏覽器看一下內容 --- 做出以上功能，你就完成這次的課程目標了！
## 簡介 CSS 是任何網站設計的重要組成部分，但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別，以及為什麼/何時應該使用它們。 原文出處：https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342 --- ## 預備知識 本文希望讀者對 CSS 有紮實的掌握。雖然你不必成為 CSS 大神，但如果基本的 CSS 術語你都清楚，那會好讀很多。 ## CSS 中的 em 和 rem 單位 在尋找在 CSS 中設定長度的方法時，有太多方法了。 CSS 中指定長度的所有單位都屬於兩類。 絕對長度：顧名思義，就是絕對的；它們是固定的，不會對任何事物做出反應。這意味著無論發生什麼，它們的大小都是一樣的。絕對長度包括 cm、mm、in、px、pts 和 pc。 相對長度：是指定相對於另一個單位的長度的單位，即，它們根據其他指定單位或元素做出響應。包括 %、vmax、vmin、vh、vw、ch、ex，以及我們將要討論的單位 em 和 rem。 如果您想了解更多關於這些單位的訊息，可以現在先去查一查。現在讓我們看看這兩個單位。 ## 什麼是 CSS em 就像我上面說的，CSS 中的 em 單位是用於調整網頁元素大小的相對測量單位，主要是字體大小。因為是相對於父元素的，所以1em等於父元素中設置的font-size。 這意味著如果您將父 div 中的字體大小設置為 20px，並將子 div 中的字體大小設置為 2em，則子 div 中的字體大小將等於 40px。這是一個例子。 首先，讓我們編寫 HTML ``` <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> I'm parent div set to 20px <div class="child"> I'm the child div set to 2em, i.e 40px. </div> </div> </body> </html> ``` Next, the CSS. ``` .parent{ font-size: 20px; } .child{ font-size: 2em; } p { font-size: 1.5em; } ``` 那會給我們這個。  em 單位很有用，因為它允許您根據先前宣告的元素的字體大小調整頁面上元素的大小，這有助於建立一致的視覺層次結構。這對於建立易於視障用戶閱讀的可存取網站非常有用。 需要注意的是，如果不指定父元素的值，則以瀏覽器的預設值作為父元素。 ``` p { font-size: 1.5em; } ``` 在此範例中，字體大小屬性設置為 1.5em，這意味著如果沒有直接父元素，`<p>` 元素中的文本大小將是瀏覽器預設字體大小大小的 1.5 倍。 由於大多數瀏覽器根據螢幕大小縮放其預設字體大小，這使您可以建立靈活且響應迅速的佈局，以適應不同的螢幕和字體大小。 使用適當的 CSS 屬性，em 單位也可用於設置其他元素的大小，例如邊距、填充和邊框。 ## 什麼是 CSS rem 現在我們知道 em 是什麼，讓我們看看 rem。 rem 是 CSS 中另一個測量長度的單位，代表“root em”。由於我們知道一個 em 等於當前字體大小的數值，因此我們可以推斷出“根 em”指的是根元素的字體大小，通常是 `<html>` 元素。 很困惑嗎？讓我們進一步拆解它。 與 em 一樣，rem 從父元素繼承其大小，但 rem 查看的父元素不是它上面的 div 或部分，而是包圍它的第一個元素，即 html 元素。讓我們用前面的程式碼做一個例子。相同的 html 程式碼，只是多了一個 div。 ``` <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> I'm parent div set to 20px <div class="child"> I'm the child div set to 2em, i.e 40px. </div> <div class="child-2"> I'm the child div set to 2em, i.e 60px. </div> </div> </body> </html> ``` 接下來，我們將以下 CSS 程式碼加入到我們的 CSS 文件中。 ``` html{ font-size: 30px; } .child-2{ font-size: 2rem; } ``` 結果會是這樣。  如您所見，儘管 child-2 div 在另一個 div 中，但它會一直往上找到 html 元素以繼承其字體大小。 使用“rem”單位允許以更具可擴展性和靈活性的方式來調整頁面上的元素大小，因為如果您更改根元素的字體大小，所有使用“rem”單位調整大小的元素將自動更新以保持它們的相對大小尺寸。 ## em 和 rem 單位的區別 到目前為止，您已經知道 em 和 rem 之間的區別，但為了清楚起見，我想重申一下這兩個值之間的區別。 在 CSS 中，rem 單位僅相對於文檔的根元素，而 em 單位僅相對於目標元素的直接父元素。這意味著 em 大小繼承自父元素，而 rem 大小僅繼承自根元素。 ## 何時在 CSS 中使用 em 和 rem 單位 對字體大小、邊距和填充等全局值使用 rem 單位是一個好主意，特別是如果你想為整個文檔指定一個字體大小並讓它統一縮放而不是受字體影響父元素的大小。 em 更適合特定於特定元素及其子元素的值。這使您可以建立一致且靈活的佈局，以適應不同的螢幕尺寸和字體大小。 ## 在 CSS 中使用 em 和 rem 單位的潛在問題 em 和 rem 是目前指定長度時使用的最佳單位，但就像生活中的所有事物一樣，它們並不完美。以下是您在使用 em 和 rem 時可能會遇到的幾個問題： - **複雜的計算：**使用 em 和 rem 單位會導致複雜的計算，尤其是當涉及嵌套元素時。這會使準確預測和控制頁面上元素的大小變得困難。 - **繼承問題：** 因為 em 單位是相對於其父元素的字體大小的，所以很難理解和控制如何在頁面上繼承大小。這可能會導致意外結果，需要額外除錯才能解決。 - **性能問題：**在極少數情況下，使用 em 和 rem 單位會對性能產生負面影響，尤其是在與復雜計算結合使用或在頁面上過度使用時。 總的來說，雖然 em 和 rem 單位在某些情況下會有所幫助，但重要的是要仔細考慮它們的潛在缺點以及它們是否是您專案的最佳選擇。
想要在 2023 年的 **Web 開發** 旅程中一帆風順嗎？參考看看這些免費工具吧！ 原文出處：https://dev.to/ruppysuppy/7-free-tools-for-the-modern-web-developers-of-2023-4lhh ## 1. [Omatsuri](https://omatsuri.app/) 一個**開源 Web 應用程式**，有 **12 個令人難以置信的前端工具**，供日常開發使用。包含的工具有： 1. 三角形生成器 2. 顏色陰影生成器 3. 梯度產生器 4. 分頁器 5. SVG壓縮器 6. SVG → JSX 轉換器 7. base64編碼 8. 假資料生成器 9. 符號收錄 10. 假文字生成器 11. CSS 游標 12. 鍵盤事件程式碼  ## 2. [Coolers](https://coolors.co/) **Coolers** 是為您的網站生成 **調色板** 的最佳工具。  ## 3. [Keyframes](https://keyframes.app/) 就跟名字一樣，它是： > 基於瀏覽器的、適合手機的、可以讓 **CSS** 變得不那麼糟糕的工具。 它有幾個工具，例如**動畫**、**陰影**和**顏色生成器**。  ## 4. [Roadmap.sh](https://roadmap.sh/) **Roadmap**是一系列職涯路線圖，涵蓋了**前端**、**後端**、**區塊鏈**、**網路安全**等多個路徑。 他們也有**相關資源的連結**可供學習！  ## 5. [FreeCodeCamp](https://www.freecodecamp.org/) **FreeCodeCamp** 是一個**非營利組織**，由**互動式學習網路平台**、**線上社群論壇**、**聊天室**、**線上出版物**、 **本地組織**組成，旨在讓任何人都可以學習 Web 開發。  ## 6. [Postman](https://www.postman.com/) **Postman** 是一個用於建置和使用 **API** 的 **API 平台**。它是**後端工程師**工具庫中的必備工具，對**前端開發人員**也非常有用  ## 7. [CSS Layout](https://csslayout.io/) 它是**數百個元件**的集合，您可以將其複製貼上到您的專案中，並根據您的需要進行客製化！  --- **以上供您參考！**
**舊的 React 文件幾乎沒什麼用，這大家都知道，因為它沒反映該框架的現代用法。在本文中，我們將探索它的新文件並討論它為何很棒。** 原文出處：https://dev.to/diogorodrigues/reacts-new-killer-documentation-focused-only-on-functional-components-jnk --- React Hooks 與 [2019 年初版本 16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 一起發布，迅速流行起來並在前端社區中得到廣泛採用。通過這個版本，使用基於類別的元件編寫的複雜性，被有狀態的功能元件所取代。雖然我們可以在文件中找到對這些新功能的很好解釋，但大多數範例都繼續使用類別。 現在，在發生革命性變化 3 年多之後，**React 發布了其文件的 BETA 版本，從其解釋中刪除了類別，專注於使用帶有互動範例的鉤子的現代開發方式。** > “一旦我們與現有的 React 文檔達到內容一致，我們的目標是將此網站切換為主要網站。舊的 React 網站將存檔在一個子域中，因此您仍然可以存取它。舊內容鏈接將重定向到存檔的子域，該子域將有關於過時內容的通知。” - [BETA React 文檔](https://beta.reactjs.org/) _P.S.重要的是，當我寫這篇文章時，新內容幾乎 100% 完成了。_ ## 你可以在新的 React 文檔中找到什麼 雖然這個 React BETA 文檔不是很廣泛，但我不會逐個主題地介紹它，我將在下面重點介紹它的一些主要優點。 ### Quick Start 真的是非常快速的開始 **對我來說，這是改善超多的部分，因為與舊版本不同，現在我們可以通過其文檔中的互動式程式碼範例來使用 React 程式碼。** 這不是很神奇嗎？ 一個完整的介紹，非常簡單，解釋清楚，並且不需要為現在開始學習的人設置任何專案。  ### 很好地解釋了使用 React Effects 的最佳方式 就個人而言，我認為**他們為解釋 Effects 所做的工作非常出色。**這確實是我研究了很多的東西，肯定會幫助我使用 React 開發更好的程式碼。 有一些詳盡的頁面展示了[如何停止將 Effects 視為生命週期掛鉤](https://beta.reactjs.org/learn/lifecycle-of-reactive-effects)，而是 [Effects 作為與外部系統的同步器](https://beta.reactjs.org/learn/synchronizing-with-effects)。發生這種混淆是因為我們習慣於將使用 useEffect 鉤子的功能組件與基於類別的元件生命週期進行比較，但這不再有意義了。 https://twitter.com/dan_abramov/status/1157250198659354624 **另一個令人驚嘆的內容是 [“你可能不需要 effect”](https://beta.reactjs.org/learn/you-might-not-need-an-effect) 主題，我們可以在其中了解如何刪除不必要的效果**通過許多用例和互動式程式碼示例。您可以在下面的影片中找到關於該主題的精彩摘要。 https://www.youtube.com/watch?v=bGzanfKVFeU&t=742s&ab_channel=BeJS ### 精通狀態管理 我知道這個標題聽起來太冒險了，但是這個 React BETA 文檔有很多內容是關於[如何更好地建置狀態，避免冗餘狀態相關的錯誤](https://beta.reactjs.org/learn/managing-state)，等等。 > “良好地建置狀態可以區分一個易於修改和除錯的元件，以及一個經常產生錯誤的組件。” - React 文檔 查看 [管理狀態部分](https://beta.reactjs.org/learn/managing-state) 以及 [Referencing Values with Refs](https://beta.reactjs.org/learn/referencing-values-with-refs) 主題以更好地理解 React 中狀態的使用。 ### 更多你可以在新的 React 文檔中找到的知識 我想強調的其他一些內容是： - [React API 參考](https://beta.reactjs.org/apis/react) 部分包含所有內容，以便更快地諮詢程式碼片段。 - “[聲明式 UI 與命令式 UI 相比如何](https://beta.reactjs.org/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative )”主題展示瞭如何更好地編寫聲明式 React 元件。 - “[Render and Commit](https://beta.reactjs.org/learn/render-and-commit)” 了解渲染 React 元件過程中的步驟。 - “[排隊一系列狀態更新](https://beta.reactjs.org/learn/queueing-a-series-of-state-updates)”主題將解釋為什麼有時它不起作用以及如何解決它. - “[通過自定義掛鉤重用邏輯](https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks)”了解如何在元件之間共享邏輯。 ## 結論 **從基礎主題到進階主題，這些文檔涵蓋了您學習如何使用最好的現代 React 建立用戶界面所需的一切。**如果您是 React 世界的新手，本文檔肯定會對您有很大幫助互動式範例。對於經驗豐富的 React 開發人員，本文檔匯集了幾個重要的進階概念，這些概念一定會幫助您建立更好的 UI 元件。
如果您曾經瀏覽過 [git 手冊](https://git-scm.com/docs)（或執行 `man git`），那麼您會發現 git 指令比我們每天在用的多很多。很多指令非常強大，可以讓你的生活更輕鬆（有些比較小眾，但知道一下還是不錯）。 > 這篇文章整理了我最喜歡的 20 個冷門 git 功能，您可以使用來改善您的開發流程、給您的同事留下深刻印象、幫助您回答 git 面試問題，最重要的是 - 可以玩得很開心！ 原文出處：https://dev.to/lissy93/20-git-commands-you-probably-didnt-know-about-4j4o --- ## Git Web > 執行 [`git instaweb`](https://git-scm.com/docs/git-instaweb) 可以立即瀏覽 gitweb 中的工作存儲庫 Git 有一個內建的[基於網路可視化工具](https://git-scm.com/docs/gitweb) 可以瀏覽本地存儲庫，它允許您通過瀏覽器中的 GUI 查看和管理您的存儲庫。它包含許多有用的功能，包括： - 瀏覽和單步執行修訂並檢查差異、文件內容和元資料 - 可視化查看提交日誌、分支、目錄、文件歷史和附加資料 - 生成提交和存儲庫活動日誌的 RSS 或 Atom 提要 - 搜尋提交、文件、更改和差異 要打開它，只需從您的存儲庫中執行 `git instaweb`。您的瀏覽器應該會彈出並讀取 http://localhost:1234 。如果您沒有安裝 Lighttpd，您可以使用“-d”標誌指定一個備用 Web 伺服器。其他選項可以通過標誌配置（例如 `-p` 用於端口，`-b` 用於打開瀏覽器等），或在 git 配置中的 `[instaweb]` 塊下配置。 還有 `git gui` 命令，它可以打開一個基於 GUI 的 git 應用程式  --- ## Git Notes > 使用 [`git notes`](https://git-scm.com/docs/git-notes) 向提交加入額外訊息 有時您需要將其他資料附加到 git 提交（除了更改、訊息、日期時間和作者訊息之外）。 註釋存儲在 .git/refs/notes 中，由於它與提交對像資料是分開的，因此您可以隨時修改與提交關聯的註釋，而無需更改 SHA-1 哈希。 您可以使用 `git log`、使用大多數 git GUI 應用程式或使用 `git notes show` 命令查看筆記。一些 git 主機還在提交視圖中顯示註釋（儘管 [GH 不再顯示註釋](https://github.blog/2010-08-25-git-notes-display/)）。 --- ## Git Bisect > 使用 [`git bisect`](https://git-scm.com/docs/git-bisect) 你可以使用二進制搜尋找到引入錯誤的提交 這是最強大又好用的 git 命令之一 - bisect 在除錯時絕對是救命稻草。開始對分後，它會為您檢查提交，然後您告訴它提交是“好”（沒有錯誤）還是“壞”（引入錯誤），這可以讓您縮小最早提交的錯誤。 請執行 `git bisect start`，然後使用 `git bisect good <commit-hash>` 向其傳遞一個已知的良好提交，並使用 `git bisect bad <optional-hash>` 傳遞一個已知的錯誤提交（預設為當前）。然後它會檢查好提交和壞提交之間的提交，然後你用 `git bisect good` 或 `git bisect bad` 指定錯誤存在與否。然後它會重複這個過程，在好與壞的中心檢查一個提交，一直到你找到引入錯誤的確切提交。隨時使用 `git bisect reset` 取消。 bisect 命令還有更多功能，包括回放、查看提交、跳過，因此下次除錯時值得查看文檔。 --- ## Git Grep > 使用 [`git grep`](https://git-scm.com/docs/git-grep) 在您的存儲庫中搜尋程式碼、文件、提交或任何其他內容 有沒有發現自己需要在 git 專案中的任何地方搜尋字串？使用 git grep，您可以輕鬆地在整個專案中和跨分支搜尋任何字串或 RegEx（例如更強大的 <kbd>Ctrl</kbd> + <kbd>F</kbd>！）。 `git grep <regexp> <ref>` 它包括大量 [選項](https://git-scm.com/docs/git-grep#_options) 來縮小搜尋範圍，或指定結果格式。例如，使用 `-l` 僅返回文件名，`-c` 指定每個文件返回的匹配數，`-e` 排除匹配條件的結果，`--and` 指定多個條件，` -n` 以行號搜尋。 由於 git grep 與正則表達式兼容，因此您可以使用搜尋的字串獲得更多進階訊息。 您還可以使用它來指定文件擴展名，例如 `git grep 'console.log' *.js`，它將顯示 JavaScript 文件中的所有 console.logs 第二個參數是一個 ref，可以是分支名稱、提交、提交範圍或其他任何內容。例如。 `git grep "foo" HEAD~1` 將搜尋之前的提交。 --- ## Git Archive > 使用 [`git archive`](https://git-scm.com/docs/git-archive) 將整個 repo 合併到一個文件中 共享或備份存儲庫時，通常首選將其存儲為單個文件。使用 git archive 將包括所有 repo 歷史記錄，因此可以輕鬆將其提取回其原始形式。該命令還包括許多附加選項，因此您可以準確自定義存檔中包含和不包含的文件。 ``` git archive --format=tar --output=./my-archive HEAD ``` --- ## Git Submodules > 使用 [`git submodule`](https://git-scm.com/docs/git-submodule) 將任何其他存儲庫拉入您的存儲庫 在 git 中，[submodules](https://git-scm.com/docs/gitsubmodules) 讓您可以將一個存儲庫掛載到另一個存儲庫中，通常用於核心依賴項或將組件拆分到單獨的存儲庫中。有關詳細訊息，請參閱[這篇文章](https://notes.aliciasykes.com/17996/quick-tip-git-submodules)。 執行以下命令會將模塊拉到指定位置，並建立一個 .gitmodules 文件，以便在複製 repo 時始終下載它。複製 repo 時使用 `--recursive` 標誌來包含子模塊。 ``` git submodule add https://github.com/<user>/<repo> <path/to/save/at> ``` 還有 [`git subtree`](https://www.atlassian.com/git/tutorials/git-subtree)，它做類似的事情，但不需要元資料文件。 --- ## Git Bug Report > 使用 [`git bugreport`](https://git-scm.com/docs/git-bugreport) 編寫錯誤票，包括 git 和系統訊息 此命令將捕獲系統訊息，然後打開一個標準錯誤模板（重現步驟、實際 + 預期輸出等）。完成的文件應該是一個非常完整的錯誤報告，包含所有必要的訊息。 如果您是開源包的維護者並要求用戶（開發人員）提出錯誤報告，這將非常方便，因為它確保包含所有必要的資料。 如果您向核心 git 系統提交錯誤報告，您還可以執行 [`git diagnostic`](https://git-scm.com/docs/git-diagnose) 命令，然後提出您的問題 [這裡](https://github.com/git/git)。 --- ## Git Fsck > 使用 [`git fsck`](https://git-scm.com/docs/git-fsck) 檢查所有物件，或恢復無法存取的物件 雖然不常需要，但有時您可能必須驗證 git 存儲的物件。這就是 fsck（或文件系統檢查）發揮作用的地方，它測試對像資料庫並驗證所有物件的 SHA-1 ID 及其建立的連接。 它還可以與 `--unreachable` 標誌一起使用，以查找不再可以從任何命名引用存取的物件（因為與其他命令不同，它包括 `.git/objects` 中的所有內容）。 --- ## Git Stripspace > 使用 [`git stripspace`](https://git-scm.com/docs/git-stripspace) 格式化給定文件中的空格 最佳做法是避免在行尾尾隨空格，避免有多個連續的空行，避免輸入的開頭和結尾出現空行，並以新行結束每個文件。有很多特定於語言的工具可以自動為您執行此操作（例如 prettier），但 Git 也內置了此功能。 它用於元資料（提交訊息、標籤、分支描述等），但如果您將文件通過管道傳輸給它，然後將響應通過管道傳輸回文件，它也可以工作。例如。 `cat ./path-to-file.txt | git stripspace` 或 `git stripspace < dirty-file.txt > clean-file.txt` 您還可以使用它來刪除註釋（使用 `--strip-comments`），甚至註釋掉行（使用 `--comment-lines`）。 --- ## Git Diff > 使用 [`git diff`](https://git-scm.com/docs/git-diff) 你可以比較 2 組程式碼之間的差異 您可能知道您可以執行 `git diff` 來顯示自上次提交以來的所有更改，或者使用 `git diff <commit-sha>` 來比較 2 次提交或 1 次提交到 HEAD。但是您可以使用 diff 命令做更多的事情。 您還可以使用它來比較任意兩個任意文件，使用 `diff file-1.txt file-2.txt`（不再存取 [diffchecker.com](https://www.diffchecker.com/compare/)！ ) 或者使用 `git diff branch1..branch2` 相互比較 2 個分支或引用 請注意，雙點 (`..`) 與空格相同，表示 diff 輸入應該是分支的尖端，但您也可以使用三點 (`...`) 來轉換第一個參數進入兩個差異輸入之間共享的共同祖先提交的引用 - 非常有用！如果只想跨分支比較單個文件，只需將文件名作為第三個參數傳遞。 您可能希望查看在給定日期範圍內所做的所有更改，為此使用 `git diff HEAD@{7.day.ago} HEAD@{0}`（上週），同樣可以將其與文件名、分支名稱、特定提交或任何其他參考。 還有 [`git range-diff`](https://www.git-scm.com/docs/git-range-diff) 命令，它提供了一個用於比較提交範圍的簡單界面。 git diff 工具還有更多功能（以及使用您自己的差異檢查器的選項），因此我建議查看 [文檔](https://git-scm.com/docs/git-diff#_description) . --- ## Git Hooks > 使用 [`hooks`](https://git-scm.com/docs/githooks) 在給定的 get 操作發生時執行命令或執行腳本 Hooks 可以讓你自動化幾乎所有的事情。例如：確保滿足標準（提交訊息、分支名稱、補丁大小）、程式碼質量（測試、lint）、將附加訊息附加到提交（用戶、設備、票證 ID）、呼叫 webhook 來記錄事件或執行管道等 對於大多數 git 事件，如 commit, rebase, merge, push, update, applypatch 等，都有前後 [hooks available](https://git-scm.com/docs/githooks)。 鉤子存儲在 `.git/hooks` 中（除非您使用 `git config core.hooksPath` 在其他地方配置它們），並且可以使用 [`git hook`](https://git-scm.com/docs) 進行測試/git-hook) 命令。由於它們只是 shell 文件，因此可用於執行任何命令。 掛鉤不會推送到遠程存儲庫，因此要在您的團隊中共享和管理它們，您需要使用 [掛鉤管理器](https://github.com/aitemr/awesome-git-hooks#tools) ，例如 [lefthook](https://github.com/evilmartians/lefthook) 或 [husky](https://github.com/typicode/husky)。還有幾個[3rd-party tools](https://githooks.com/#projects)，這使得管理鉤子更容易，我推薦[overcommit](https://github.com/sds/overcommit)。 請記住，掛鉤總是可以跳過（使用 `--no-verify` 標誌），所以永遠不要純粹依賴掛鉤，尤其是對於任何與安全相關的事情。 --- ## Git Blame > 使用 [`git blame`](https://git-scm.com/docs/git-blame) 顯示特定修訂版和行的作者訊息 一個經典的，快速找出誰寫了特定程式碼行（也就是你的哪個同事應該為這個錯誤負責！）。但它也有助於確定在哪個時間點發生了某些更改並檢查該提交和關聯的元資料。 例如，要查看 index.rs 第 400 到 420 行的作者和提交訊息，您可以執行： ``` git blame -L 400,420 index.rs ``` --- ## Git LFS > 使用 [`git lfs`](https://git-lfs.github.com/) 存儲大文件，以免拖慢您的存儲庫 您的專案通常會包含較大的文件（例如資料庫、二進制資產、檔案或媒體文件），這會減慢 git 工作流程並使使用限制達到最大。這就是 [大型文件存儲](https://git-lfs.github.com/) 的用武之地 - 它使您能夠將這些大型資產存儲在其他地方，同時使它們可以通過 git 進行跟踪並保持相同的存取控制/權限。 LFS 的工作原理是將這些較大的文件替換為在 git 中跟踪的文本指針。 要使用它，只需執行 `git lfs track <file glob>`，這將更新您的 `.gitattributes` 文件。您可以通過擴展名（例如“*.psd”）、目錄或單獨指定文件。執行 git lfs ls-files 以查看跟踪的 LFS 文件列表。 --- ## Git GC > 使用 [`git gc`](https://git-scm.com/docs/git-gc) 優化您的存儲庫 隨著時間的推移，git repos 會積累各種類型的垃圾，這些垃圾會佔用磁盤空間並減慢操作速度。這就是內置垃圾收集器的用武之地。執行 `git gc` 將刪除孤立的和不可存取的提交（使用 [`git prune`](https://git-scm.com/docs/git-prune)），壓縮文件修訂和存儲的 git 物件，以及一些其他一般的內務管理任務，如打包引用、修剪引用日誌、尊重元資料或陳舊的工作樹和更新索引。 加入 `--aggressive` 標誌將 [積極優化](https://git-scm.com/docs/git-gc#_aggressive) 存儲庫，丟棄任何現有的增量並重新計算它們，這需要更長的時間執行但如果你有一個大型存儲庫可能需要。 --- ## Git Show > 使用 [`git show`](https://git-scm.com/docs/git-show) 輕鬆檢查任何 git 物件 以易於閱讀的形式輸出物件（blob、樹、標籤或提交）。要使用，只需執行 `git show <object>`。您可能還想附加 `--pretty` 標誌，以獲得更清晰的輸出，但還有許多其他選項可用於自定義輸出（使用 `--format`），因此此命令對於準確顯示非常強大你需要什麼。 這非常有用的一個實例是在另一個分支中預覽文件，而無需切換分支。只需執行 `git show branch:file` --- ## Git Describe > 使用 [`git describe`](https://git-scm.com/docs/git-describe) 查找可從提交中存取的最新標記，並為其指定一個人類可讀的名稱 執行 `git describe`，您將看到一個人類可讀的字串，該字串由最後一個標籤名稱與當前提交組合而成，以生成一個字串。您還可以將特定標籤傳遞給它， 請注意，您必須已建立標籤才能使其正常工作，除非您附加了 `--all` 標誌。默認情況下，Git describe 也只會使用帶註釋的標籤，因此您必須指定 `--tags` 標誌以使其也使用輕量級標籤。 --- ## Git Tag > 使用 [`git tag`](https://git-scm.com/docs/git-tag) 在你的 repo 歷史中標記一個特定點 能夠[標記](https://git-scm.com/book/en/v2/Git-Basics-Tagging) 存儲庫歷史記錄中最常用於表示發布版本的特定重要點通常很有用。建立標籤就像 `git tag <tagname>` 一樣簡單，或者您可以使用 `git tag -a v4.2.0 <commit sha>` 標記歷史提交。與提交一樣，您可以使用“-m”在標籤旁邊包含一條訊息。 不要忘記使用 `git push origin <tagname>` 將您的標籤推送到遠程。 要列出所有標籤，只需執行 `git tag`，並可選擇使用 `-l` 進行通配符搜尋。 然後，您將能夠使用 `git checkout <tagname>` 檢出特定標籤 --- ## Git Reflog > 使用 [`git reflog`](https://git-scm.com/docs/git-reflog) 列出對您的存儲庫所做的所有更新 Git 使用稱為參考日誌或“reflogs”的機制跟踪分支尖端的更新。跟踪各種事件，包括：克隆、拉取、推送、提交、檢出和合併。能夠找到事件引用通常很有用，因為許多命令都接受引用作為參數。只需執行 `git reflog` 即可查看 `HEAD` 上的最近事件。 reflog 真正有用的一件事是恢復丟失的提交。 Git 永遠不會真正丟失任何東西，即使是在重寫歷史時（比如變基或提交修改）。 Reflog 允許您返回提交，即使它們沒有被任何分支或標記引用。 默認情況下，reflog 使用 `HEAD`（您當前的分支），但您可以在任何 ref 上執行 reflog。例如 `git reflog show <branch name>`，或者使用 `git reflog stash` 查看隱藏的更改。或者使用 `git reflog show --all` 顯示所有引用 --- ## Git Log > 使用 [`git log`](https://git-scm.com/docs/git-log) 查看提交列表 您可能已經熟悉執行 `git log` 來查看當前分支上最近提交的列表。但是您可以使用 git log 做更多的事情。 使用 `git log --graph --decorate --oneline` 將顯示一個漂亮整潔的提交圖以及 ref 指針。  您還經常需要能夠根據各種參數過濾日誌，其中最有用的是： - `git log --search="<anything>"` - 搜尋特定程式碼更改的日誌 - `git log --author="<pattern>"` - 只顯示特定作者的日誌 - `git log --grep="<pattern>"` - 使用搜尋詞或正則表達式過濾日誌 - `git log <since>..<until>` - 顯示兩個引用之間的所有提交 - `git log -- <file>` - 顯示僅對特定文件進行的所有提交 或者，只需執行 `git shortlog` 以獲得匯總的提交列表。 --- ## Git Cherry Pick > 使用 [`git cherry-pick`](https://git-scm.com/docs/git-cherry-pick) 通過引用選擇指定的提交並將它們附加到工作 HEAD 有時你需要從其他地方拉一個特定的提交到你當前的分支。這對於應用熱修復、撤消更改、恢復丟失的提交以及在某些團隊協作設置中非常有用。請注意，通常傳統的合併是更好的做法，因為挑選提交會導致日誌中出現重複提交。 用法很簡單，只需執行 `git cherry-pick <commit-hash>`。這會將指定的提交拉入當前分支。 --- ## Git Switch > 使用 [`git switch`](https://git-scm.com/docs/git-switch) 在分支之間移動是我們經常做的事情，`switch` 命令就像是`git checkout` 的簡化版本，它可以用來建立和在分支之間導航，但不像 checkout 在分支之間移動時不會復制修改的文件. 類似於 `checkout -b`，使用 switch 命令你可以附加 `-c` 標誌來建立一個新分支，然後直接跳入其中，例如`git switch -c <新分支>`。執行 `git switch -` 將放棄您所做的任何實驗性更改，並返回到您之前的分支。 --- ## Git Standup > 使用 [`git standup`](https://github.com/kamranahmedse/git-standup) 回憶你在最後一個工作日做了什麼，基於 git 提交 我把它放在最後，因為它不包含在大多數 git 客戶端中，但是您可以使用系統包管理器[輕鬆安裝](https://github.com/kamranahmedse/git-standup#install) ，使用 1 行 curl 腳本，或從源程式碼建置。 如果您的老闆要求您每天站立一次，以更新昨天的工作，但您永遠記不起自己到底做了什麼——這個適合您！它將顯示一個格式良好的列表，列出在給定時間範圍內完成的所有事情。用法很簡單，只需執行 `git standup`，或使用 [這些選項](https://github.com/kamranahmedse/git-standup#options) 指定應顯示哪些資料（作者、時間範圍、分支機構等）。 --- ## 結論 希望對您有幫助！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
