按下刪除按鈕對映的todo要刪除 但我不知道該如何取得索引 作業目前卡在這裡(第27-33行)https://jsfiddle.net/birdie2019/7haz6fLj/19/
作為開發人員，我們在終端機上花費了大量時間。有很多有用的 CLI 工具，它們可以讓您在命令行中的生活更輕鬆、更快速，而且通常更有趣。 這篇文章概述了 50 個必備的好用 CLI 工具。 原文出處：https://dev.to/lissy93/cli-tools-you-cant-live-without-57f6 --- ## 工具 ### [`thefuck`](https://github.com/nvbn/thefuck) - 自動更正錯誤輸入的命令 > `thefuck` 是您一旦嘗試過就離不開的實用程式之一。每當您輸入錯誤的命令並出現錯誤時，只需執行 `fuck`，它就會自動更正它。使用向上/向下選擇一個更正，或者只執行 `fuck --yeah` 立即執行最有可能的。  --- ### [`zoxide`](https://github.com/ajeetdsouza/zoxide) - 輕鬆導航 _(更好的 cd)_ > `z` 讓您可以跳轉到任何目錄，而無需記住或指定其完整路徑。它會記住您存取過的目錄，因此您可以快速跳轉——您甚至不需要鍵入完整的文件夾名稱。它還具有互動式選項，使用“fzf”，因此您可以即時過濾目錄結果  --- ### [`tldr`](https://github.com/tldr-pages/tldr) - 社區維護的文件 _(更好的 `man`)_ > `tldr` 是社區維護的手冊頁的巨大集合。與傳統的手冊頁不同，它們進行了總結，包含有用的用法範例，並且配色良好，便於閱讀  --- ### [`scc`](https://github.com/boyter/scc) - 計算程式碼行數_（更好的`cloc`）_ > `scc` 為您提供了針對特定目錄以每種語言編寫的程式碼行數的細分。它還顯示了一些有趣的統計資料，例如估計的開發成本和復雜性訊息。它的速度非常快，非常準確，並且支持多種語言  --- ### [`exa`](https://github.com/ogham/exa) - 列出文件 _(更好的 `ls`)_ > `exa` 是基於 Rust 的現代替代 `ls` 命令，用於列出文件。它可以顯示文件類型圖標、顏色、文件/文件夾訊息，並有多種輸出格式——樹、網格或列表  --- ### [`duf`](https://github.com/muesli/duf) - 硬碟使用量 _(更好的 `df`)_ > `duf` 非常適合顯示有關已安裝硬碟的訊息和檢查可用空間。它產生清晰多彩的輸出，並包括用於排序和自定義結果的選項。  --- ### [`aria2`](https://github.com/aria2/aria2) - 下載實用程式 _（更好的 `wget`）_ > `aria2` 是一種輕量級、多協議、用於 HTTP/HTTPS、FTP、SFTP、BitTorrent 和 Metalink 的恢復下載實用程序，支持通過 RPC 接口進行控制。它的[功能豐富](https://aria2.github.io/manual/en/html/README.html)令人難以置信，並且有大量的[選項](https://aria2.github.io/manual/en/ html/aria2c.html）。還有 [ziahamza/webui-aria2](https://github.com/ziahamza/webui-aria2) - 一個不錯的網路介面搭配。  --- ### [`bat`](https://github.com/sharkdp/bat) - 讀取文件_(更好的`cat`)_ > `bat` 是 `cat` 的複製品，但具有語法高亮顯示和 git 集成。它是用 Rust 編寫的，性能非常好，並且有多個用於自定義輸出和主題的選項。支持自動管道和文件連接  --- ### [`diff-so-fancy`](https://github.com/so-fancy/diff-so-fancy) - 文件比較_(更好的`diff`)_ > `diff-so-fancy` 為比較字串、文件、目錄和 git 更改提供了更好看的差異。更改突出顯示使發現更改變得更加容易，並且您可以自定義輸出佈局和顏色  --- ### [`entr`](https://github.com/eradman/entr) - 觀察變化 > `entr` 允許您在文件更改時執行任意命令。您可以傳遞一個文件、目錄、符號連結或正則表達式來指定它應該監視哪些文件。它對於自動重建專案、響應日誌、自動化測試等非常有用。與類似專案不同，它使用 kqueue(2) 或 inotify(7) 來避免輪詢，並提高性能  --- ### [`exiftool`](https://github.com/exiftool/exiftool) - 讀取+寫入元資料 > ExifTool 是一個方便的實用程序，用於讀取、寫入、剝離和建立各種文件類型的元訊息。再次分享照片時不要不小心洩露您的位置！  --- ### [`fdupes`](https://github.com/jbruchon/jdupes) - 重複文件查找器 > `jdupes` 用於辨識和/或刪除指定目錄中的重複文件。當您有兩個或更多相同的文件時，它對於釋放硬碟空間很有用  --- ### [`fzf`](https://github.com/junegunn/fzf) - 模糊文件查找器_(更好的`find`)_ > `fzf` 是一個非常強大且易於使用的模糊文件查找器和過濾工具。它允許您跨文件搜尋字串或模式。 fzf 也有可用於大多數 shell 和 IDE 的[插件](https://github.com/junegunn/fzf/wiki/Related-projects)，用於在搜尋時顯示即時結果。這篇由 Alexey Samoshkin 撰寫的 [文章](https://www.freecodecamp.org/news/fzf-a-command-line-fuzzy-finder-missing-demo-a7de312403ff/) 重點介紹了它的一些用例。  --- ### [`hyperfine`](https://github.com/sharkdp/hyperfine) - 命令基準測試 > `hyperfine` 可以輕鬆準確地對任意命令或腳本進行基準測試和比較。它負責預熱執行、清除緩存以獲得準確的結果並防止來自其他程序的干擾。它還可以將結果導出為原始資料並生成圖表。  --- ### [`just`](https://github.com/casey/just) - 現代命令執行器_(更好的`make`)_ > `just` 與 `make` 類似，但增加了一些不錯的功能。它讓您可以將專案命令分組到副本中，這些副本可以輕鬆列出和執行。支持別名、位置參數、不同的 shell、dot env 集成、字串插入以及幾乎所有您可能需要的東西 --- ### [`jq`](https://github.com/stedolan/jq) - JSON 處理器 > `jq` 類似於 `sed`，但對於 JSON - 您可以使用它輕鬆地切片、過濾、映射和轉換結構化資料。它可用於編寫複雜的查詢以提取或操作 JSON 資料。還有一個 [jq playground](https://jqplay.org/)，您可以用來試用，或通過即時回饋制定查詢 --- ### [`most`](https://www.jedsoft.org/most/) - 多窗口滾動尋呼機_（更好的 less）_ > `most` 是一個尋呼機，用於讀取長文件或命令輸出。 `most` 支持多窗口並且可以選擇不換行 --- ### [`procs`](https://github.com/dalance/procs) - 進程查看器_（更好的 ps）_ > `procs` 是一個易於導航的流程查看器，它具有彩色突出顯示，使流程的排序和搜尋變得容易，具有樹視圖和實時更新  --- ### [`rip`](https://github.com/nivekuil/rip) - 刪除工具_(更好的 rm)_ > `rip` 是一種安全、符合人體工程學且高性能的刪除工具。它讓您直觀地刪除文件和目錄，並輕鬆恢復已刪除的文件  --- ### [`ripgrep`](https://github.com/BurntSushi/ripgrep) - 在文件中搜尋 _(更好的 `grep`)_ > `ripgrep` 是一種面向行的搜尋工具，可遞歸地在當前目錄中搜尋正則表達式模式。它可以忽略 .gitignore 的內容並跳過二進製文件。它能夠在壓縮檔案中搜尋，或只搜尋特定的擴展名，並使用各種編碼方法理解文件  --- ### [`rsync`](https://rsync.samba.org/) - 快速、增量文件傳輸 > `rsync` 讓您可以在本地複制大文件，或將大文件複製到遠程主機或外部驅動器或從遠程主機或外部驅動器複製。它可用於保持多個位置的文件同步，非常適合建立、更新和恢復備份 --- ### [`sd`](https://github.com/chmln/sd) - 查找並替換_(更好的`sed`)_ > `sd` 是一種簡單、快速且直觀的查找和替換工具，基於字串文字。它可以在文件、整個目錄或任何管道文本上執行  --- ### [`tre`](https://github.com/dduan/tre) - 目錄層次結構_(更好的`tree`)_ > `tre` 輸出當前目錄或指定目錄的樹形文件列表，並帶有顏色。使用“-e”選項執行時，它會為每個專案編號，並建立一個臨時別名，您可以使用該別名快速跳轉到該位置  --- ### [`xsel`](https://github.com/kfish/xsel) - 存取剪貼板 > `xsel` 讓您通過命令行讀取和寫入 X 選擇剪貼板。它對於將命令輸出通過管道傳輸到剪貼板或將復制的資料傳輸到命令中很有用 --- ## CLI 監控和性能應用程式 ### [`bandwhich`](https://github.com/imsnif/bandwhich) - 頻寬利用率監視器 > 即時顯示頻寬使用情況、連接訊息、傳出主機和 DNS 查詢  --- ### [`ctop`](https://github.com/bcicen/ctop) - 容器指標和監控 > 類似於 `top`，但用於監控正在執行的（Docker 和 runC）容器的資源使用情況。它顯示實時 CPU、內存和網絡帶寬以及每個容器的名稱、狀態和 ID。還有一個內置的日誌查看器和管理（停止、啟動、執行等）容器的選項  --- ### [`bpytop`](https://github.com/aristocratos/bpytop) - 資源監控_(更好的`htop`)_ > `bpytop` 是一種快速、交互式、可視化的資源監視器。它顯示了最熱門的執行進程、最近的 CPU、內存、磁盤和網絡歷史記錄。您可以從界面中導航、排序和搜尋——還支持自定義顏色主題  --- ### [`glances`](https://github.com/nicolargo/glances) - 資源監視器 + 網絡和 API > `glances` 是另一個資源監視器，但具有不同的功能集。它包括一個完全響應的 Web 視圖、一個 REST API 和歷史監控。它易於擴展，並且可以與其他服務集成  --- ### [`gping`](https://github.com/orf/gping) - 交互式 ping 工具 _（更好的 `ping`）_ > `gping` 可以在多個主機上執行 ping 測試，同時以實時圖形顯示結果。當與 --cmd 標誌一起使用時，它還可以用於監視執行時間  --- ### [`dua-cli`](https://github.com/Byron/dua-cli) - 磁盤使用分析器和監視器 _(更好的 `du`)_ > `dua-cli` 讓您以交互方式查看每個已安裝驅動器的已用和可用磁盤空間，並輕鬆釋放存儲空間  --- ### [`speedtest-cli`](https://github.com/sivel/speedtest-cli) - 命令行速度測試實用程序 > `speedtest-cli` 只是執行網路速度測試，通過 speedtest.net - 但直接從終端 :)  --- ### [`dog`](https://github.com/ogham/dog) - DNS 查找客戶端_（更好的`dig`）_ > `dog` 是一個易於使用的 DNS 查找客戶端，支持 DoT 和 DoH，漂亮的彩色輸出和發出 JSON 的選項  --- ## CLI 生產力應用程式 > 上網衝浪、播放音樂、查看電子郵件、管理日曆、閱讀新聞等等，無需離開終端！ ### [`browsh`](https://github.com/browsh-org/browsh) - CLI 網路瀏覽器 > `browsh` 是一個完全交互的、實時的、現代的基於文本的瀏覽器，呈現給 TTY 和瀏覽器。它同時支持鼠標和鍵盤導航，並且對於純基於終端的應用程式來說功能豐富得令人吃驚。它還緩解了困擾現代瀏覽器的電池耗盡問題，並且通過對 MoSH 的支持，由於帶寬減少，您可以體驗更快的加載時間  --- ### [`books`](https://github.com/jarun/books) - 書籤管理器 > `buku` 是一個基於終端的書籤管理器，具有大量的配置、存儲和使用選項。還有一個可選的 [web UI](https://github.com/jarun/buku/tree/master/bukuserver#screenshots) 和 [瀏覽器插件](https://github.com/samhh/bukubrow-webext#installation ), 用於在終端外存取您的書籤  --- ### [`cmus`](https://github.com/cmus/cmus) - 音樂瀏覽器/播放器 > `cmus` 是終端音樂播放器，由鍵盤快捷鍵控制。它支持廣泛的音頻格式和編解碼器，並允許將曲目組織到播放列表中並應用播放設置  --- ### [`cointop`](https://github.com/cointop-sh/cointop) - 跟踪加密價格 > `cointop` 顯示當前的加密貨幣價格，並跟踪您的投資組合的價格歷史。支持價格提醒、歷史圖表、貨幣換算、模糊搜尋等。您可以通過網絡 [cointop.sh](https://cointop.sh/) 或執行 `ssh cointop.sh` 來嘗試演示  --- ### [`ddgr`](https://github.com/jarun/ddgr) - 從終端搜尋網頁 > `ddgr` 類似於 [googler](https://github.com/jarun/googler)，但適用於 DuckDuckGo。它快速、乾淨、簡單，支持即時回答、搜尋完成、搜尋 bangs 和高級搜尋。它默認尊重您的隱私，也有 HTTPS 代理支持，並與 Tor 一起工作  --- ### [`micro`](https://github.com/zyedidia/micro) - 程式碼編輯器_(更好的`nano`)_ > `micro` 是一款易於使用、快速且可擴展的程式碼編輯器，支持鼠標。由於它被打包成一個二進製文件，安裝就像`curl https://getmic.ro | 安裝一樣簡單。慶典` --- ### [`khal`](https://github.com/pimutils/khal) - 日曆客戶端 > `khal` 是一個終端日曆應用程式，它顯示即將發生的事件、月份和議程視圖。您可以將它與任何 CalDAV 日曆同步，並直接加入、編輯和刪除事件  --- ### [`mutt`](https://gitlab.com/muttmua/mutt) - 電子郵件客戶端 > `mut` 是一個經典的、基於終端的郵件客戶端，用於發送、閱讀和管理電子郵件。它支持所有主流電子郵件協議和郵箱格式，允許附件、密件抄送/抄送、線程、郵件列表和傳遞狀態通知  --- ### [`newsboat`](https://github.com/newsboat/newsboat) - RSS / ATOM 新聞閱讀器 > `newsboat` 是一個 RSS 提要閱讀器和聚合器，用於直接從終端閱讀新聞、博客和後續更新  --- ### [`rclone`](https://github.com/rclone/rclone) - 管理雲存儲 > `rclone` 是一個方便的實用程序，用於將文件和文件夾同步到各種雲存儲提供商。它可以直接從命令行呼叫，也可以輕鬆集成到腳本中以替代繁重的桌面同步應用程式 --- ### [`taskwarrior`](https://github.com/GothenburgBitFactory/taskwarrior) - Todo + 任務管理 > `task` 是一個 CLI 任務管理/待辦事項應用程式。它既簡單又不引人注目，但也非常強大和可擴展，內置高級組織和查詢功能。還有很多（700+！）額外的[插件](https://taskwarrior.org/tools/) 用於擴展它的功能和與第三方服務的集成  --- ### [`tuir`](https://gitlab.com/ajak/tuir) - Reddit 的終端用戶界面 > `tuir` 是一個很好的選擇，如果你想看起來像在工作，同時實際瀏覽 Reddit！它具有直觀的鍵綁定、自定義主題，還可以呈現圖像和多媒體內容。還有 [haxor](https://github.com/donnemartin/haxor-news) 用於黑客新聞  --- ## CLI 開發套件 ### [`httpie`](https://github.com/httpie/httpie) - HTTP/API測試測試客戶端 > `httpie` 是一個 HTTP 客戶端，用於測試、除錯和使用 API。它支持您所期望的一切——HTTPS、代理、身份驗證、自定義標頭、持久會話、JSON 解析。具有表達語法和彩色輸出的用法很簡單。與其他 HTTP 客戶端（Postman、Hopscotch、Insomnia 等）一樣，HTTPie 也包含一個 Web UI  --- ### [`lazydocker`](https://github.com/jesseduffield/lazydocker) - 完整的 Docker 管理應用程式 > `lazydocker` 是一個 Docker 管理應用程式，可讓您查看所有容器和圖像、管理它們的狀態、讀取日誌、檢查資源使用情況、重新啟動/重建、分析層、修剪未使用的容器、圖像和卷等等。它使您無需記住、鍵入和連結多個 Docker 命令。  --- ### [`lazygit`](https://github.com/jesseduffield/lazygit) - 完整的 Git 管理應用程式 > `lazygit` 是一個可視化的 git 客戶端，在命令行上。輕鬆加入、提交和推送文件、解決衝突、比較差異、管理日誌以及執行壓縮和倒帶等複雜操作。一切都有鍵綁定，顏色，而且很容易配置和擴展  --- ### [`kdash`](https://github.com/kdash-rs/kdash/) - Kubernetes 儀表板應用程式 > `kdash` 是一個一體化的 Kubernetes 管理工具。查看節點指標、觀察資源、流容器日誌、分析上下文和管理節點、pod 和命名空間 --- ### [`gdp-dashboard`](https://github.com/cyrus-and/gdb-dashboard) - 可視化 GDP 除錯器 > `gdp-dashboard` 向 GNU 除錯器加入了一個可視元素，用於除錯 C 和 C++ 程序。輕鬆分析內存、單步執行斷點和查看寄存器  --- ## CLI 外部服務 ### [`ngrok`](https://ngrok.com/) - 共享本地主機的反向代理 > `ngrok` 安全* 將您的本地主機暴露在唯一 URL 後面的網路上。這使您可以與遠程同事實時共享您的工作。使用[非常簡單](https://notes.aliciasykes.com/p/RUi22QSyWe)，但它也有很多高級功能，例如身份驗證、webhooks、防火牆、流量檢查、自定義/通配符域等等  --- ### [`tmate`](https://tmate.io/) - 通過網路共享終端會話 > `tmate` 讓您立即與世界其他地方的人分享實時終端會話。跨系統工作，支持存取控制/授權，可自託管，具備Tmux的所有特性 --- ### [`asciinema`](https://asciinema.org/) - 錄製+分享終端會話 > `asciinema` 對於輕鬆記錄、共享和嵌入終端會話非常有用。非常適合展示您建置的內容，或展示教程的命令行步驟。與屏幕錄製視頻不同，用戶可以復制粘貼內容、動態更改主題和控製播放 --- ### [`navi`](https://github.com/denisidoro/navi) - 交互式備忘單 > `navi` 允許您瀏覽備忘單並執行命令。參數的建議值動態顯示在列表中。減少輸入，減少錯誤，讓自己不必記住數千條命令。它集成了 [tldr](https://github.com/tldr-pages/tldr) 和 [cheat.sh](https://github.com/chubin/cheat.sh) 以獲取內容，但您也可以導入其他備忘單，甚至編寫自己的備忘單 --- ### [`transfer.sh`](https://github.com/dutchcoders/transfer.sh/) - 快速文件共享 > `transfer` 使上傳和共享文件變得非常簡單，直接從命令行即可。它是免費的，支持加密，為您提供唯一的 URL，也可以自行託管。 > 我寫了一個 Bash 輔助函數來讓使用更容易一些，你可以[在這裡找到它](https://github.com/Lissy93/dotfiles/blob/master/utils/transfer.sh) 或嘗試一下通過執行`bash <(curl -L -s https://alicia.url.lol/transfer)`  --- ### [`surge`](https://surge.sh/) - 在幾秒鐘內部署一個站點 > `surge` 是一個免費的靜態託管服務提供商，您可以通過一個命令直接從終端部署到它，只需在您的 `dist` 目錄中執行 `surge`！它支持自定義域、自動 SSL 憑證、pushState 支持、跨域資源支持——而且是免費的！  --- ### [`wttr.in`](https://github.com/chubin/wttr.in) - 查看天氣 > `wttr.in` 是一項以命令行中易於理解的格式顯示天氣的服務。只需執行“curl wttr.in”或“curl wttr.in/London”來嘗試一下。有 URL 參數來自定義返回的資料以及格式  --- ## CLI 樂趣 ### [`cowsay`](https://en.wikipedia.org/wiki/Cowsay) - 讓 ASCII 牛說出你的訊息 > `cowsay` 是一個可配置的會說話的奶牛。它基於 Tony Monroe 的[原創](https://github.com/tnalpgge/rank-amateur-cowsay)  --- ### [`figlet`](http://www.figlet.org/) - 將文本輸出為大型 ASCII 藝術文本 > `figlet` 將文本輸出為 ASCII 藝術  --- ### [`lolcat`](https://github.com/busyloop/lolcat) - 使控制台輸出彩虹色 > `lolcat` 使任何傳遞給它的文本變成彩虹色  --- ### [`neofetch`](https://github.com/dylanaraps/neofetch) - 顯示系統資料和 ditstro 訊息 > `neofetch` 打印發行版和系統訊息（這樣你就可以靈活地在 r/unixporn 上使用 Arch btw）  例如，我使用 `cowsay`、`figlet`、`lolcat` 和 `neofetch` 來建立一個自定義的基於時間的 MOTD，在用戶首次登錄時顯示給他們。它以他們的名字問候他們，顯示伺服器訊息和時間、日期、天氣和 IP。 [這裡是源程式碼](https://github.com/Lissy93/dotfiles/blob/master/utils/welcome-banner.sh)。  --- ## 安裝和管理 我們大多數人都有一套核心的 CLI 應用程式和我們所依賴的實用程序。設置一台新機器並單獨安裝每個程序很快就會讓人厭煩。因此，安裝和更新終端應用程式的任務非常適合自動化。 [此處](https://github.com/Lissy93/dotfiles/tree/master/scripts/installs) 是我編寫的一些示例腳本，可以輕鬆將其放入您的點文件或獨立執行以確保您永遠不會錯過一個應用程式。 對於 MacOS 用戶，最簡單的方法是使用 [Homebrew](https://brew.sh/)。只需建立一個 Brewfile（使用 `touch ~/.Brewfile`），然後列出您的每個應用程式，然後執行 `brew bundle`。您可以通過將其放入 Git 存儲庫來備份您的包列表。這是一個示例，讓您入門：https://github.com/Lissy93/Brewfile 在 Linux 上，您通常希望使用本機包管理器（例如 `pacman`、`apt`）。例如，[這裡有一個腳本](https://github.com/Lissy93/dotfiles/blob/master/scripts/installs/arch-pacman.sh) 用於在 Arch Linux 系統上安裝上述應用程式 Linux 上的桌面應用程式可以通過 Flatpak 以類似的方式進行管理。同樣，[這是一個示例腳本](https://github.com/Lissy93/dotfiles/blob/master/scripts/installs/flatpak.sh) :) --- ## 結論 ...就是這樣 - 一個方便的 CLI 應用程式列表，以及一種在您的系統中安裝和保持它們最新的方法。 希望其中一些對你們中的一些人有用:)
使用這些單行程式碼將您的 JavaScript 技能提升到全新水平，這也將節省您很多開發時間 🚀 原文出處：https://dev.to/nfrankel/20-killer-javascript-one-liners-thatll-save-you-hours-of-coding-o14 --- ###1) 查找陣列中的最大值： ``` Math.max(...array) ``` ###2) 從陣列中刪除重複項： ``` [...new Set(array)] ``` ###3) 生成一個介於 1 和 100 之間的隨機數： ``` Math.floor(Math.random() * 100) + 1 ``` ###4) 檢查字串是否為有效數字： ``` !isNaN(parseFloat(string)) ``` ###5) 獲取當前日期和時間： ``` new Date().toString() ``` ###6) 檢查變數是否為陣列： ``` Array.isArray(variable) ``` ###7) 檢查一個變數是否是物件： ``` typeof variable === "object" ``` ###8) 將陣列轉換為字串： ``` array.join(",") ``` ###9) 檢查一個變數是否是函數： ``` typeof variable === "function" ``` ###10) 將物件轉換為陣列： ``` Object.values(object) ``` ###11) 計算陣列中元素的出現次數： ``` array.filter(x => x === element).length ``` ###12) 使用動態鍵和值建立一個新物件： ``` { [key]: value } ``` ###13) 檢查字串是否為回文： ``` string === string.split("").reverse().join("") ``` ###14) 獲取陣列中所有數字的總和 ``` array.reduce((a, b) => a + b, 0)); ``` ###15) 獲取當前時間戳： ``` Date.now() ``` ###16) 檢查變數是否為 null： ``` variable === null ``` ###17) 檢查變數是否未定義： ``` typeof variable === "undefined" ``` ###18) 查找陣列中的最小值 ``` Math.min(...array) ``` ###19) 檢查陣列是否為空： ``` array.length === 0 ``` ###20) 建立一個具有指定範圍數字的新陣列： ``` Array.from({ length: n }, (_, i) => i) ``` --- 以上簡單分享，希望對您有幫助！
## 課程目標 能夠從陣列刪除元素 認識 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 --- 做出以上功能，你就完成這次的課程目標了！
身為前端新手學習者，雖然你已經知道怎麼寫 UI 小元件、怎麼寫簡單小工具 但是看著自己每天在用的那些網站、大型科技公司開發的 web application（網路應用程式） 你一定常常心想：這也太華麗了，畫面上 DOM 的變化很複雜、很頻繁，我好像寫不出來呀？ 別擔心，這是因為你目前為止的技能與開發方法，大概只接近 2010 年以前的業界工程師 你目前為止的能力還是比較接近「能把東西設計出來、做出來」而已，還不能夠「帶著工程思維去建造應用程式」 --- 這一門課程，會教你現代前端工程師，開發應用程式的方法與技巧 雖說是現代技巧，但完全不會用到 React 或者 Vue 這種框架 但在學完之後，你將可以比別人更懂，各種框架背後的基礎原理 這些內容非常有趣，將會大幅提升你的「工程素養」，讓你具備遠超過一般新手的基本功！ 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
第1課 ── 學會 Cookie 相關功能 https://replit.com/@birdiewu/DarkvioletClutteredDigits?v=1 第2課 ── 學會 Local Storage 相關功能 https://jsfiddle.net/birdie2019/wkqbvhma/378/ 第3課 ── 變數作用域、箭頭函式、ES6 語法 https://jsfiddle.net/birdie2019/0akLh4r8/7/ 第4課 ── 學會 AJAX 基本原理 https://jsfiddle.net/birdie2019/5sfhbq8v/8/ 第5課 ── 學會 AJAX 錯誤處理 https://jsfiddle.net/birdie2019/5sfhbq8v/12/ 第6課 ── 學會 AJAX 與各種 HTTP 請求方法 https://jsfiddle.net/birdie2019/5sfhbq8v/15/ 第7課 ── 學會 AJAX 與 data attribute 的結合 https://jsfiddle.net/birdie2019/5sfhbq8v/23/ 心得分享： 做完本單元五的課程作業，覺得自己技術再提升一點(?! ) 模擬購物網站有點成就感(自己講XD) 但同時覺得要做出大規模的購物網站真的不容易！ 因為資料好龐大( 像amazon或MOMO等等)，自己還有好多要學~
https://jsfiddle.net/birdie2019/5sfhbq8v/15/ 作業如上，雖然完成此課作業的功能但有個問題 JS程式碼的部分，作業網址第30行和第36行部分 為什麼改成event.target就無法運作了？如圖下圖 
## 課程目標 認識變數作用域 認識函式的不同寫法與特性 ## 課程內容 來認識一些程式語言觀念與名詞 ``` <button onclick="action1()"> global scope </button> <button onclick="action2()"> local scope </button> ``` ``` var counterA = 0; function action1() { counterA = counterA + 1; alert(counterA); } function action2() { var counterB = 0; counterB = counterB + 1; alert(counterB); } ``` 到 jsfiddle 跑跑看，會發現第一個計數器會不斷 +1 疊加上去；第二個計數器卻永遠顯示 1 這就是變數作用域的區別：變數宣告在很外面的，會在很大的範圍內都可使用這變數；變數宣告在很裡面的，只在裡面的範圍內才可使用這變數 宣告在最外面的稱為全域變數（global），反之則稱為區域變數（local） 目前為止的作業，其實你已經到處在寫 global 與 local 變數了，這觀念還算簡單、直觀 --- 用精確的技術名詞來說明的話 在 ES6 (2015) 之前，JavaScript 中的變數作用域只有 Global Scope 跟 Function Scope 兩種 並且，在使用 `var` 關鍵字時，要留意一種名為 Hoisting 的現象，這是一種會讓人搞錯變數作用域的現象 在 ES6 之後，有了 `const` 與 `let` 兩種新關鍵字，宣告的變數為 Block Scope 使用這兩種關鍵字，就不會出現 Hoisting 的現象 --- 我個人認為，Hoisting 是一個設計失敗的程式語言特性 應該要讓 JavaScript 引擎直接報錯、程式直接壞掉比較好 一般程式語言沒有 Hoisting 這種現象，此為 JavaScript 獨有特性 這是當年 Netscape 瀏覽器公司，為了衝市占率、歡迎大家亂寫 JS 程式碼的產物 我不想細談 Hoisting，反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 實務上，現在大家都寫 `const` 與 `let`，比較不寫 `var` 了 所以 Function Scope 跟 Block Scope 的差別在哪？ 簡單來說，這樣的程式碼，x 正常顯示，y 會報錯 ``` if (true) { var x = 1; const y = 2; } alert(x); alert(y); ``` `var` 會覺得變數作用域，只有 `function 函式` 內、外的差別，內就是同樣 local，外就是 global `const` `let` 會覺得變數作用域，每次遇到 `大括號 {}` 都算一次內、外的差別，大括號裡面就是 local，裡面的裡面就是 local 中的 local 看不太懂沒關係，總之，變數宣告時，遇到 bug，就往前面找大括號，把變數搬來搬去，試試看，會慢慢搞懂的 本課先教你區分 global 與 local 兩種概念就好，這在大多數程式語言都是通用概念 在本系列教材內容以及作業中，`const` `let` `var` 隨便混著用，都可以 大概知道當前變數是 global 還是 local 就好 反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 接下來談一談 JavaScript 中的函式 之前的課程中，有過這樣的範例 ``` <button id="my-btn">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕！'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` `myFunction` 被當成變數一樣，被指派給一個物件的屬性了 在很多程式語言中，函式是不能這樣使用的！函式永遠只能單獨加上小括號去執行 `myFunction()` 這個差別有點像是，其他程式語言認為變數是「名詞」，函式是「動詞」。那些語言認為這樣才能溝通、描述世界 而 JavaScript 認為變數是「名詞」，函式是「動詞」也是「動名詞」，也就是認為函式也是一種「名詞」。JavaScript 認為這樣才能溝通、描述世界 中文說「我開車」跟「開車很好玩」，沒有在管「開車」是動詞還是名詞，中文使用者就是習慣這樣溝通 英文說「I drive」跟「Driving is fun」，句子裡面主詞的部份一定要是名詞，如果想放動詞，就先改寫成 +ing 動名詞，英文使用者就是習慣這樣溝通 上面通通看不懂沒關係，反正知道各種程式語言，都是設計者與社群的主觀偏好，然後都能完成任務、各有不同長處短處就好 --- 最後，跟大家談一下函式的不同寫法 ``` function func1() { alert(1); } var func2 = () => { alert(2); } func1(); func2(); ``` ES6 之後有所謂的箭頭函式 他跟傳統寫法的主要差別，在於對於 `this` 關鍵字的認定 在工程師主流推崇 OOP（物件導向程式設計）的年代，`this` 的使用很巧妙、也很讓人困惑 實務上現在寫前端，比較少用 OOP 寫法，稍微偏向 FP（函數式程式設計）多一點，所以 `this` 問題變比較小 我不想細談 `this` 以及兩種函式寫法的差別，在本系列教材內容以及作業中，隨便混著用，都可以 反正改天你真的遇到問題，大概知道要往這方向研究就是了 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），id 跟 class 之類的你可以自由決定 ``` simple counter: <button>-</button> <button>+</button> <hr> simple calculator: <input type="text" /> <input type="text" /> <button>加/減/乘/除</button> ``` 這邊有兩個小型應用程式 第一個應用程式，是簡單的計數器 - 第一次點擊 + 號按鈕，會用 alert 跳出 1 - 第二次點擊 + 號按鈕，會用 alert 跳出 2 - 依此類推，每次點 + 都會遞增，每次點 - 都會遞減 - 你會宣告一個全域變數，記錄這個累積的值，才能完成此功能 第二個應用程式，是簡單的計算機 - 有兩個欄位可以輸入數字 - 點擊按鈕，連續跳出四個 alert，分別顯示「加/減/乘/除」的計算結果 - 例如：輸入 6 與 2 -> alert 顯示 8 -> alert 顯示 4 -> alert 顯示 12 -> alert 顯示 3 - 你會宣告兩個區域變數，分別記錄兩個輸入的值，接著用來進行四種計算，才能完成此功能 --- 做出以上功能，你就完成這次的課程目標了！
第1課 ── autosize 套件 https://jsfiddle.net/birdie2019/j69s8vdc/38/ 第2課 ── vanilla-lazyload 套件 https://jsfiddle.net/birdie2019/401xa29h/104/ 第3課 ── Chart.js 套件 https://jsfiddle.net/birdie2019/upLn7j1b/6/ 第4課 ── jQuery 套件 原生JS: https://jsfiddle.net/birdie2019/ebax340f/2/ jQuery: https://jsfiddle.net/birdie2019/eabr2jh3/7/ 第5課 ── xdan/datetimepicker 套件 https://jsfiddle.net/birdie2019/y7mzws6r/18/ 第6課 ── kenwheeler/slick 套件 https://jsfiddle.net/birdie2019/k6vgcod0/52/ 第7課 ── TinyMCE 套件 https://jsfiddle.net/birdie2019/m8dforLn/23/ --- 心得分享： 以上套件都蠻有趣的，尤其是Chart.js，在學習過程中一直讚嘆這套件好厲害！ jQuery我覺得不錯，程式碼可以少打很多，但還是覺得學好JS很重要。 另外讀第三方套件文件內容都是英文，一開始讀有點措手不及，有些東西看不懂和不了解其意思，但動手試試看觀察變化，試個幾次就明白了，請勇於嘗試會發現很好玩。
Hooks 是 React 最強大的功能之一。 它們使我們能夠輕鬆地在應用程式的元件中重用功能。掛鉤的最大優點在於它們的可重用性——您可以跨元件和專案重用掛鉤。 以下是我在每個 React 專案中重複使用的七個最重要的鉤子。今天就試一試，看看它們在建置您自己的 React 應用程式時是否有幫助吧。 原文出處：https://dev.to/webdevhero-com/7-react-hooks-for-every-project-1jdo --- 在我們開始之前，要先澄清一下：並非每個自定義 React 鉤子都需要由您編寫。事實上，我將提到的所有鉤子都來自一個庫“@mantine/hooks”。 Mantine 是一個很棒的第三方庫，其中包含這些鉤子等等。他們將為您的 React 應用程式加入您能想到的幾乎所有重要功能。 您可以在 [mantine.dev](https://mantine.dev) 查看“@mantine/hooks”的文件。 ## `useIntersection` 鉤子 當用戶在您的應用程式中向下滾動頁面時，您可能想知道某個元素何時對他們可見。 例如，您可能希望僅在用戶看到特定元素時才啟動動畫。或者，您可能希望在他們向下滾動頁面一定程度後，顯示或隱藏元素。  要獲取有關元素是否可見的訊息，我們可以使用 **Intersection Observer API。**這是瀏覽器中內建的 JavaScript API。 我們可以使用純 JavaScript 單獨使用 API，但要知道有關特定元素是否在其滾動容器內，有個好方法是使用 useIntersection 掛鉤。 ``` import { useRef } from 'react'; import { useIntersection } from '@mantine/hooks'; function Demo() { const containerRef = useRef(); const { ref, entry } = useIntersection({ root: containerRef.current, threshold: 1, }); return ( <main ref={containerRef} style={{ overflowY: 'scroll', height: 300 }}> <div ref={ref}> <span> {entry?.isIntersecting ? 'Fully visible' : 'Obscured'} </span> </div> </main> ); } ``` 要使用它，我們需要做的就是在我們的元件中呼叫鉤子，並提供一個根元素。 Root 是滾動容器，可以使用 useRef 掛鉤將其作為 ref 提供。 `useIntersection` 回傳一個我們傳遞給目標元素的 ref，我們想要觀察其在滾動容器中的交集。 一旦我們有了對元素的引用，我們就可以追蹤元素是否相交。在上面的範例中，我們可以根據 entry.isIntersecting 的值查看元素何時被遮擋或何時完全可見。 您可以傳遞其他參數，這些參數允許您配置與目標可見百分比相關的**閾值**。 ## `useScrollLock` 鉤子 另一個與滾動相關的鉤子是 useScrollLock 鉤子。這個鉤子非常簡單：它使您能夠鎖定 body 元素上的任何滾動。 我發現當您想在當前頁面上顯示疊加層或跳出視窗，並且不想讓用戶在後台頁面上上下滾動時，它會很有幫助。這使您可以將注意力集中在視窗上，或允許在其自己的滾動容器內滾動。 ``` import { useScrollLock } from '@mantine/hooks'; import { Button, Group } from '@mantine/core'; import { IconLock, IconLockOpen } from '@tabler/icons'; function Demo() { const [scrollLocked, setScrollLocked] = useScrollLock(); return ( <Group position="center"> <Button onClick={() => setScrollLocked((c) => !c)} variant="outline" leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />} > {scrollLocked ? 'Unlock scroll' : 'Lock scroll'} </Button> </Group> ); } ``` `useScrollLock` 將用戶的滾動鎖定在頁面上的當前位置。該函數回傳一個陣列，它可以被解構，如上面的程式碼所示。 第二個值是一個允許我們鎖定滾動的函數。另一方面，第一個解構值是一個布林值，它告訴我們滾動條是否已被鎖定。 這個值很有用，例如，如果你想在滾動鎖定時顯示某些內容或告訴用戶它已被鎖定。您可以在下面的示例中看到，當滾動條被鎖定或解鎖時，我們會在我們的按鈕中進行指示。  ## `useClipboard` 鉤子 在許多情況下，您希望提供一個按鈕，允許用戶將內容複製到他們的剪貼板，這是存儲複製文本的地方。 一個很好的例子是，如果您的網站上有一個程式碼片段，並且您希望用戶輕鬆複製它。為此，我們可以使用另一個 Web API——**剪貼板 API**。 `@mantine/hooks` 為我們提供了一個方便的 `useClipboard` 鉤子，它回傳幾個屬性：`copied`，它是一個布林值，告訴我們是否已使用鉤子將值複製到剪貼板，以及` copy` 函數，我們可以將我們喜歡的任何字串值傳遞給它以進行複制。 在我們的範例中，我們想複製一個程式碼片段，供我們的用戶粘貼到他們喜歡的地方，如下面的影片所示：  ## useClipboard demo 當他們點擊我們指定的複制按鈕時，我們呼叫我們的 `copy` 函數，將程式碼片段傳遞給它，然後顯示一個小複選標記或向他們表明文本已被複製的東西。 巧妙的是 `useClipboard` 掛鉤帶有 **超時值**。在給定的超時時間（以毫秒為單位）之後，複製的狀態將被重置，向用戶顯示他們可以再次復製文本。 ## `useDebouncedValue` 鉤子 如果您的應用程式中有搜尋輸入，下一個鉤子“useDebouncedValue”是必不可少的。 每當用戶使用輸入執行搜尋時，搜尋操作通常涉及對 API 的 HTTP 請求。 您將遇到的一個典型問題是每次擊鍵都會執行查詢（請求），尤其是如果您希望用戶在鍵入時接收搜尋結果。即使對於一個簡單的搜尋查詢，也不需要在用戶完成輸入他們想要的內容之前執行這麼多請求。 這是 useDebounceValue 掛鉤的一個很好的用例，它對傳遞給它的文本應用「防抖」功能。 ``` import { useState } from 'react'; import { useDebouncedValue } from '@mantine/hooks'; import { getResults } from 'api'; function Demo() { const [value, setValue] = useState(''); const [results, setResults] = useState([]) const [debounced] = useDebouncedValue(value, 200); // wait time of 200 ms useEffect(() => { if (debounced) { handleGetResults() } async function handleGetResults() { const results = await getResults(debounced) setResults(results) } }, [debounced]) return ( <> <input label="Enter search query" value={value} style={{ flex: 1 }} onChange={(event) => setValue(event.currentTarget.value)} /> <ul>{results.map(result => <li>{result}</li>}</ul> </> ); } ``` 您使用 useState 將輸入的文本儲存在一個狀態中，並將狀態變數傳遞給 useDebouncedValue 。 作為該掛鉤的第二個參數，您可以提供一個等待時間，即值被「反抖」的時間段。反抖使我們能夠執行更少的查詢。 您可以在下面的影片中看到結果，用戶在其中鍵入內容，並且僅在 200 毫秒後，我們才能看到去抖值。  ## `useMediaQuery` 鉤子 我一直使用的另一個非常有用的鉤子是 useMediaQuery 鉤子。 Media Queries 在純 CSS 中使用，`useMediaQuery` 鉤子允許我們訂閱我們傳遞給鉤子的任何媒體查詢。 例如，在我們的元件中，假設我們想要顯示一些文本或根據特定螢幕寬度（例如 900 像素）更改元件的樣式。我們像在 CSS 中一樣提供媒體查詢，並且 useMediaQuery 回傳給我們一個 true 或 false 的 matches 值。 ``` import { useMediaQuery } from '@mantine/hooks'; function Demo() { const matches = useMediaQuery('(min-width: 900px)'); return ( <div style={{ color: matches ? 'teal' : 'red' }}> {matches ? 'I am teal' : 'I am red'} </div> ); } ``` 它用 JavaScript 告訴我們媒體查詢的結果，這在我們想要使用 `style` 屬性在 JSX 中直接更改樣式時特別有用，例如。  簡而言之，對於少數無法使用 CSS 處理媒體查詢的情況，這是一個必不可少的鉤子。 ## `useClickOutside` 鉤子 下一個掛鉤 - `useClickOutside` - 可能看起來很奇怪，但當您真正需要它時，您會發現它的重要性。 當你開發一個下拉菜單，或者在頁面內容前面彈出，並且之後需要關閉的東西時，這個鉤子是必不可少的。通過單擊按鈕打開這些類型的元件之一非常容易。關閉這些元件有點困難。 為了遵循良好的 UX 實踐，我們希望任何阻礙用戶視圖的東西都可以通過單擊元素外部輕鬆關閉。這正是 useClickOutside 掛鉤讓我們做的。 當我們呼叫 useClickOutside 時，它會返回一個 ref，我們必須將其傳遞給我們想要檢測點擊的外部元素。通常該元素將由一個布林狀態片段控制，例如我們在下面的示例中的狀態（即值“opened”）。 ``` import { useState } from 'react'; import { useClickOutside } from '@mantine/hooks'; function Demo() { const [opened, setOpened] = useState(false); const ref = useClickOutside(() => setOpened(false)); return ( <> <button onClick={() => setOpened(true)}>Open dropdown</button> {opened && ( <div ref={ref} shadow="sm"> <span>Click outside to close</span> </div> )} </> ); } ``` `useClickOutside` 接受一個回調函數，該函數控制當您實際單擊該元素外部時發生的情況。 在大多數情況下，我們想做一些非常簡單的事情，就是關閉它。為此，您可能需要一個狀態設置器（如 `setOpened`）並向其傳遞一個 false 值，然後隱藏您覆蓋的內容。  ## `useForm` 鉤子 在這個列表中，我最喜歡和最有用的鉤子是 `useForm` 鉤子。 這個鉤子專門來自 Mantine，涉及從庫中安裝一個特定的包：`@mantine/form`。它會為您提供在 React 中建立表單所需的一切，包括驗證輸入、顯示錯誤訊息以及在提交表單之前確保輸入值正確的能力。 `useForm` 接受一些初始值，這些初始值對應於您在表單中的任何輸入。 ``` import { TextInput, Button } from '@mantine/core'; import { useForm } from '@mantine/form'; function Demo() { const form = useForm({ initialValues: { email: '' }, validate: { email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), }, }); return ( <div> <form onSubmit={form.onSubmit((values) => console.log(values))}> <TextInput withAsterisk label="Email" placeholder="[email protected]" {...form.getInputProps('email')} /> <Button type="submit">Submit</Button> </form> </div> ); } ``` `useForm` 的最大好處是它的助手，例如 `validate` 函數，它接收輸入到每個輸入的值，然後允許您建立驗證規則。 例如，如果您有一個電子郵件輸入，您可能有一個正則表達式來確定它實際上是否是一個有效的電子郵件（如您在上面的程式碼中所見）。如果沒有，那麼您可以顯示一條錯誤訊息並阻止提交表單。  您如何獲取已輸入到表單中的值？ Mantine 提供了一個非常方便的助手，叫做“getInputProps”，你只需提供你正在使用的輸入的名稱（比如電子郵件），它就會自動設置一個 onChange 來追蹤你在表單中輸入的值. 此外，為了處理表單提交，並在其值未通過驗證規則時阻止送出，它有一個特殊的 `onSubmit` 函數，您可以將其包裹在常規的 onSubmit 函數中。除了應用驗證規則之外，它還會負責在表單事件上呼叫 `preventDefault()`，這樣您就不必手動執行此操作。 我只用了這個鉤子的基本功能，但我強烈建議您在下一個專案中使用它。傳統上，表單很難正常工作，尤其是需要驗證和可見錯誤訊息的表單。 `useForm` 讓它變得異常簡單！ --- 以上，簡單分享，希望對您有幫助。
練習1 ── alert 示警元件 https://jsfiddle.net/birdie2019/4ur1c7xf/34/ 練習2 ── toast 吐司元件 https://jsfiddle.net/birdie2019/fmc6b8ht/49/ 研究了一下setTimeout()用法，經過自己的消化吸收寫成筆記記錄下來 分享筆記：https://hackmd.io/@birdie/SJisAlTcs 另外發現display無法做transition的效果，改用opacity 練習3 ── modal 互動視窗元件 https://jsfiddle.net/birdie2019/9p3zsthL/17/ 練習4 ── 表單驗證 https://jsfiddle.net/birdie2019/bdavsur4/91/ 練習5 ── collapse 折疊效果 https://jsfiddle.net/birdie2019/dkncrv03/43/ 認識了scrollHeight屬性，建議可以用圖去搜尋會比較好理解這個屬性 也順便學了clientHeight和offsetHeight 練習6 ── dropdown 下拉式選單 https://jsfiddle.net/birdie2019/xb0ka495/44/ 研究window.onclick怎麼使用並認識了matches() 練習7 ── carousel 輪播元件 https://jsfiddle.net/birdie2019/t6uxb9df/30/ --- 此次教材心得分享： 一開始在腦袋裡會想很複雜，憑空亂想亂打code發現不是再刪掉再亂打，但其實不可能一下就到位，後來拿筆和紙先把需要的功能和自己的邏輯想法簡單的寫和畫下來，釐清自己現在需要怎麼做，方法有幾種，若這個方法不行，還可以用什麼方法可以做，這個方法看似很沒有效率，但真的對我幫助很大且完成此次所有作業。
## 課程目標 認識並且能使用 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 文字變為紅色 寫完之後，你自行比較一下，網頁多加一個肥大的套件，但是可以少打這些字，你覺得值得嗎？ 這是一個主觀問題，你就根據情況決定你的答案吧！ 做出以上功能，你就完成這次的課程目標了！
簡單複習一下，在這份教材中，我們學會了 - DOM 樹基本觀念 - DOM 樹新增、刪除 - DOM 樹找到元素的方法 - 基本的除錯技巧 - 動態加上 onclick 事件 - 操作 onchange 事件 - 基本的 for 迴圈用法 - 在 DOM 樹存取、修改元素的 class - 在 DOM 樹存取、修改元素的 style - 學會 `.querySelector()` `.querySelectorAll()` 的用法（Selector API） - 學會 `.closest()` 的用法 - 初步認識「重構」的觀念 利用本課程學到的技巧，你已能夠對 DOM 樹進行很多操作，也能夠處理工作上很多功能需求！ DOM 的操作函式有非常多，本課只教了最基本的幾個，實務上你會看到超多尋找 DOM 元素的函式 你就隨便找、隨便用，都可以，能順利找到、處理元素就好！ --- 觀察本課內容，你會發現完全沒有用到第三方套件，通通是寫原生 JavaScript 本課所學內容，其實就是所有前端框架的基礎。不管你用了任何複雜的工具或框架，它們的背後，其實就只是這樣操作 DOM 而已，並沒有很難 本課內容所教的開發方法，大概是西元 2000 - 2010 年代的開發方式，很傳統，現在比較少這樣寫 實務上，現代前端工程師，工作時主要在使用「框架」來開發，例如 Vue 或者 React 因此，坊間補習班，大多是直接從「現代前端框架」開始教 然而，我觀察到，大多數畢業學生，因此對於 DOM 基本觀念一知半解、覺得框架很黑箱，並且基本功非常不好 所以我課程設計先從老方法開始教，讓大家基本功比較好，接著再學工具與框架，會更有踏實的感覺 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（三）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/gqveaW
## 課程目標 學會「數字」資料型態的比較 多學一個 `else if` 條件判斷，進行流程控制 學會巢狀 if/else 條件判斷，進行流程控制 ## 課程內容 前面的課程中，我們有學過比對字串是否相同 ``` var str1 = '星期一'; var str2 = '星期二'; if (str1 == str2) { alert('同一天'); } else { alert('不同天'); } ``` 同樣的寫法，也能用來比較數字 ``` var x = 100; var y = 50 + 50; if (x == y) { alert('同樣大小'); } else { alert('不同大小'); } ``` 除了比較等於 `==` 之外，還有其它基本比較，分別是 - `!=` 不等於 - `>` 大於 - `<` 小於 - `>=` 大於等於 - `<=` 小於等於 用法一樣，放在 if 後面小括號之中即可。這些比較都很常用到！ --- 之前的課程，有學過 if/else 語句，這次再多學一個，叫做 `else if` 語句 當 if 條件不成立，就會進到 else if 條件檢查，如果還是不成立，最終才會進到 else ``` var x = 10; var y = 20; if (x > y) { alert('x 比較大'); } else if (x == y) { alert('x 跟 y 一樣大'); } else { alert('y 比較大'); } ``` 上述範例，在 jsfiddle 跑跑看，把 `x` `y` 的值隨意調整一下，就會知道 if / else if / else 的運作方法！ 除此之外，`else if ` 語句可以有多個，不只有一個，如果寫多個 else if 的話，就會逐個逐個檢查是否成立 如果不成立，就進到下一個條件檢查；如果成立，就執行當前大括號裡面的內容 ``` var height = 170; if (height >= 190) { alert('您非常高喔！'); } else if (height >= 180) { alert('您的身高挺不錯！'); } else if (height >= 175) { alert('您高於平均身高！'); } else if (height >= 170) { alert('您是標準身高呢！'); } else { alert('加油！可以多喝牛奶！'); } ``` 上述範例，在 jsfiddle 跑跑看，把 `height` 調整一下，玩玩看吧！ --- 最後來學一下巢狀條件判斷 開始之前，先學一個數學運算，叫做「餘數」，寫法是 `%` 跟加減乘除類似，餘數會將數學上的餘數計算出來，`alert(10 % 3)` 會顯示 1，`alert(10 % 2)` 會顯示 0 如果你忘記餘數是什麼，請去翻一下小學數學課本，或者網路搜尋一下 ``` var x = 35; if (x % 2 == 1) { if (x > 100) { alert('這數字很大，而且是奇數。') } else { alert('這數字不大，而且是奇數。') } } else { if (x > 100) { alert('這數字很大，而且是偶數。') } else { alert('這數字不大，而且是偶數。') } } ``` 上述範例，在 jsfiddle 跑跑看，把 `x` 調整一下，玩玩看吧！ 巢狀結構，就是進行完條件檢查之後，在裡面又遇到一個條件檢查 乍看之下很亂，但也只是多一層，習慣一下，其實也還好 其實，巢狀結構可以有很多層，也就是 if 裡面有 if 然後裡面又有 if，可以不斷寫下去 但實務上會避免這樣寫，因為會讓程式碼非常難讀。可能的話，同樣邏輯，試著改用別的寫法，會比較好讀 比方說使用 `&&` 來改寫，這是數學邏輯上的「且」的意思 ``` var x = 35; if (x % 2 == 1 && x > 100) { alert('這數字很大，而且是奇數。') } else if (x % 2 == 1 && x <= 100) { alert('這數字不大，而且是奇數。') } else if (x % 2 == 0 && x > 100) { alert('這數字很大，而且是偶數。') } else { alert('這數字不大，而且是偶數。') } ``` 這段程式，跟上一段程式，邏輯上是完全一模一樣的喔！ 至於哪種寫法比較漂亮呢？這純粹是主觀問題，都可以。 程式設計之中，很多事情都是主觀問題，不用被困擾太久。先能跑就好了，你就先用就對了 ## 課後作業 接續前一課的作業，目前的導購＆促銷流程，效果還不錯 但你發現有些人不懂批發工廠的運作，下單數量太少，或者太多 常常要在電話中解釋，有點浪費時間，你希望在網頁上能有提示改善 這次的作業，要做業界所謂的「表單驗證」功能 --- 這次驗證，需要驗證「顧客名稱」與「訂購數量」這兩個欄位 如果顧客名稱是空白沒填，點擊訂購按鈕請用 alert 跳出訊息「煩請填寫您的大名。」 如果訂購數量沒填，請用 alert 跳出訊息「煩請輸入訂購數量。」 如果訂購數量有填，但是數量小於 100，請用 alert 跳出訊息「抱歉，我們工廠的最低出貨量是 100 件。」 如果訂購數量有填，但是數量大於 5,000，請用 alert 跳出訊息「抱歉，我們工廠的最高出貨量是 5,000 件。」 如果以上表單欄位驗證，通通沒問題，就進入正常流程 1. 跳出招呼訊息 2. 顯示訂單詳細內容 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會「數字」資料型態 學會基本的資料型態轉換 ## 課程內容 在之前的課程中，我們學會了宣告字串、以及字串的連接 ``` var str1 = '新年'; var str2 = '快樂'; var str3 = var1 + str2; alert(str3); ``` 這課我們要學「數字」這種資料型態以及一些基本操作 ``` var x = 30; var y = 5; var z1 = x + y; var z2 = x - y; var z3 = x * y; var z4 = x / y; alert(z1); alert(z2); alert(z3); alert(z4); ``` 以上是加減乘除的範例，很簡單吧！ 要注意的是，長得像數字的字串，其實依然是字串 ``` var a1 = '100'; var a2 = 100; ``` 上面的 `a1` `a2` 兩個變數，看起來很像，但資料型態不一樣 雖然直接進行字串連接或者加減乘除，程式不會出問題，但那其實是 JavaScript 引擎知道你懶惰，「猜測」你需要型態轉換，自動幫你轉換 但其實手動把型態轉換清楚比較好，比較不會有誤會 比方說，上面的 `a1 + a2` 如果都當成數字，會是 `200`；如果都當成字串，那字串連接會是 `'100100'` 這種情況就很容易造成出錯，所以要養成習慣，把型態轉換清楚 要把數字轉成字串，可以使用「數字」這種資料型態內建的 `.toString()` 函式 ``` var a1 = '100'; var a2 = 100; var a3 = a1 + a2.toString(); alert(a3); ``` 要把字串轉成數字，也有一個內建函式 `parseInt()` 可以使用 ``` var a1 = '100'; var a2 = 100; var a3 = parseInt(a1) + a2; alert(a3); ``` 這些範例都去 jsfiddle 跑跑看，就會很清楚了！ --- 使用函式的時候，有時像在直接呼叫一個「函式」，例如 `alert()` `parseInt(a1)` 有時又像在呼叫「物件」的「函式」，例如 `document.getElementById()` `a2.toString()` 你或許會覺得，怎麼不設計成 `a1.toInt()` 跟 `parseString(a2)` 呢？ 這些其實是程式語言設計者的主觀喜好、偏好、習慣而已，不重要，反正能跑就好了，你就先用就對了 --- 有件事要提一下，前面的課程，有說到如何取得用戶輸入的內容 ``` var str = document.getElementById('keyword').value; ``` 在 JavaScript 之中，用戶在 html 元素輸入的內容，一律都會是「字串」 就算用戶是輸入阿拉伯數字，在 JavaScript 中拿到值之後，如果需要數學計算的話，要記得把型態轉成數字 ## 課後作業 接續前一課的作業，雖然詳細的報價，你希望在電話中跟對方談，因為要了解客製化細節，才能報價 但是你覺得先在網頁上，顯示初步的報價，可以節省一些時間，比較有效率 這次的作業要用簡單的數學，來初步顯示報價 --- 目前的欄位有顧客名稱、服裝分類、服裝類型 請再增加一個文字輸入欄位，讓客戶能輸入「訂購數量」 為了簡單起見，男裝不論類型，一件都報 600 元；女裝不論類型，一件都報 500 元 在點擊訂購按鈕之後，訂單細節裡面，顯示「初步估價」給客戶看，類似這樣： ``` －－－－－－－－－－ ｜您的訂單 ｜ ｜顧客姓名：ＸＸＸ｜ ｜服裝分類：ＸＸＸ｜ ｜服裝類型：ＸＸＸ｜ ｜訂購數量：ＸＸＸ｜ ｜初步估價：ＸＸＸ｜ －－－－－－－－－－ ``` 做出以上功能，你就完成這次的課程目標了！
## 簡介 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/) 它是**數百個元件**的集合，您可以將其複製貼上到您的專案中，並根據您的需要進行客製化！  --- **以上供您參考！**
我的自學開發之旅始於大約 15 年前，當時我還是個小孩。它慢慢從熱情變成了我的工作。 我成為了一名普通的開發人員、自由職業者。有時我因為興奮每天在電腦前瘋狂地呆上 20 個小時，有時我因為過度勞累和壓力而筋疲力盡。 這些經驗，讓我想分享幾點心得。 原文出處：https://dev.to/entrptaher/reflections-on-my-15-year-journey-from-novice-to-intermediate-developer-pje --- ## 您如何定義初級軟體工程師？ 有幾個跡象表明軟體工程師是初學者。其中包括： - 不熟悉核心編程概念和最佳實踐。 - 很難編寫乾淨、結構良好且高效的程式碼。 - 在沒有完全理解其工作原理的情況下，依賴從線上資源複製和貼上程式碼。 - 難以排除和除錯程式碼中的錯誤和問題。 - 對編程語言和工具的了解有限。 - 缺乏在實際專案或團隊環境中工作的經驗。 這些是軟體工程師可能是初學者的一些潛在跡象。重點是，初學者不一定是壞事——每個人都必須從某個地方開始，每個人都有不同程度的經驗和專業知識。 但是，如果你在軟體工程師身上發現這些跡象，則可能表示他們仍處於學習的早期階段，可能需要更多的指導和支持。 ##初學者應該知道的事情 以下是我想給剛開始學習如何編碼的人的一些提示： 1. **首先確保每個專案或任務都有可以實現的明確目標。** 這可以幫助您集中精力工作，避免被不重要的程式碼分心。 使用 Notion、ClickUp、Github Issue 等工具。 2. **找出最重要的任務和功能**並首先處理它們。 這可以幫助您在專案上取得進展並按時完成任務，同時仍然給您時間來嘗試新想法。 3. **向更有經驗的軟體工程師尋求回饋和幫助**。 這可以幫助您找出可能在不必要或無用的程式碼上花費太多時間的地方，並教您如何更有效地工作。 檢查 Github 問題、Stackoverflow、Dev.to、Facebook 群組。 4. 使用工具和方法更好地**追蹤您的時間和任務。** 這可以通過使用專案管理軟體、使用敏捷開發方法或遵循其他高效編程的最佳實踐來完成。 使用 DeskTime、TimeDoctor 等工具。 5. **經常休息**，不要不停地長時間工作。 這可以幫助您避免在工作中精疲力盡，並讓您的注意力集中在手頭的任務上。 番茄鐘是一個很好的方法。 6. **除非需要，否則不要重構**。 重寫或重構程式碼是提高程式碼易讀性、修復難易度或執行速度的好方法。但這可能會花費很多時間，而且並不是永遠必要的。 在開始一個大的重構專案之前，你應該仔細考慮它是否會帶來真正的好處。你不應該為了改變而改變。 7. **與其他軟體工程師一起工作**並與他們交談。 作為初學者，您可以從比您了解更多或經驗更多的其他軟體工程師那裡學到很多東西。 通過一起處理專案、共享想法和程式碼以及互相提供回饋和幫助，您可以更快地學習和成長為一名軟體工程師。 8. **使用版本控制**來管理你的程式碼。 版本控制軟件，如 Git，可讓您跟踪程式碼的更改，與其他人一起工作，並在需要時恢復到舊版本。 這可以幫助您組織、加快並確保您的工作安全。它還可以幫助您避免丟失重要程式碼或犯錯誤。 9. **將你的工作組合成一個作品集**，以展示給可能的雇主看。 當您剛開始作為一名軟體工程師時，可能很難找到您的第一份工作或專案。 建立您的作品集是脫穎而出並向潛在雇主或客戶炫耀您的技能的一種方式。 這可以包括已完成的專案、您的程式碼範例或展示您的技能和潛力的其他工作示例。 10. **不斷學習**關於編程的新事物並跟上最新的變化（與你的目標相關）。 編程是一個總是在變化的領域，所以總是有新的語言、框架、工具和方法需要學習。作為一名軟體工程師，您可以不斷進步，並通過保持好奇心和與時俱進，在競爭越來越激烈的領域保持領先地位。 11. **編寫乾淨易讀的程式碼。** 作為初學者軟體工程師，您可能只想專注於讓您的程式碼正常工作，而沒有考慮閱讀或修復程式碼的難易程度。但是編寫乾淨且易於閱讀的程式碼很重要，原因不止一個。 它可以使您的程式碼更易於理解和更改，從長遠來看可以節省您的時間和精力。它還可以使您的程式碼更易於查找和使用，這在與其他軟體工程師合作或將您的程式碼放入更大的系統時會很有幫助。 12. **寫很多測試。** 測試是開發過程的重要組成部分，它可以幫助您發現錯誤並修復它們。 通過編寫和執行測試，您可以確保您的程式碼按您希望的方式工作，並且您可以在問題變得更糟之前找到並修復任何問題。 這可以節省您的時間、精力和挫折感，並幫助您為用戶或客戶提供品質更高的程式碼。 13. 照顧好**您的身心。** 編程對您的思想和身體來說都很難。可能需要長時間集中註意力、解決問題以及與他人合作，這對您的身體和思想來說都是艱難的。 如果您想避免倦怠並保持良好的工作狀態，照顧好自己很重要。充足的睡眠、規律的鍛煉、良好的飲食和工作中的休息都是做到這一點的方法。 照顧好你的健康會讓你保持專注、充滿活力和積極性，讓你成為一個更好的軟體工程師。 14. **了解如何除錯**您的程式碼。 除錯是開發的一個重要部分，每個軟體工程師都需要知道如何去做。 通過學習查找和修復程式碼中的錯誤和錯誤，您可以使其更可靠、更快速，並且您不會將時間浪費在無法按您希望的方式工作的程式碼上。 您可以使用許多工具和方法來修復程式碼中的錯誤。如果你想成為更好的軟體工程師，你應該學習和練習這些技能。 15. **遵守編碼規則和最佳實踐**。 如果您剛開始成為一名軟體工程師，您可能不知道在您的語言或領域中編寫程式碼的規則和最佳實踐。 學習並遵循這些標準和最佳實踐非常重要，因為它們可以幫助您編寫更易於閱讀、維護和使用的程式碼。 它們還可以幫助您避免常見的錯誤和陷阱，並且可以使其他軟體工程師更容易理解和使用您的程式碼。 通過遵循編碼標準和最佳實踐，您可以提高程式碼質量並使其對您和其他人更有用。 16. **承擔困難的專案和問題**。 如果您剛開始成為一名軟體工程師，您可能會傾向於只從事小型或簡單的專案，這樣您就不會太忙或太沮喪。 但重要的是要推動自己並承擔更大、更艱鉅的專案，因為這是你作為一名軟體工程師學到最多和成長的方式。 通過解決難題和克服障礙，您可以提高自己的技能、獲得信心並建立一個您可以引以為豪的工作體系。 17. **積極主動，主動出擊。** 不要只是等待別人告訴你該怎麼做。尋找學習和成長的機會，迎接新的挑戰。 18. **Google 一切。** 了解如何使用 google、觀看視頻和教程、存取 stackoverflow 和 reddit。但切勿在不了解其工作原理的情況下複製程式碼塊。 另外，在詢問其他高級開發人員之前，給自己設定一個谷歌搜尋的時間限制。 ##初學者應該避免的事情 以下是新軟體工程師不應該做的一些事情： 1. **忽略編程領域的最新趨勢**或時尚。 編程世界瞬息萬變，總有新的語言、框架、工具和技術需要學習。 然而，並非所有這些發展都具有同等價值或相關性，追逐每一個新趨勢或時尚可能會浪費時間和精力。 相反，專注於編程的基本概念和原則，並學習與您的目標和專案最相關和最有用的工具和技術。 2. **忽略成為完美**軟體工程師的壓力。 作為初學者，很自然地會感到要做到完美、避免犯錯或達到更有經驗的軟體工程師的標準的壓力。 然而，完美是可望不可及的，更重要的是專注於學習和提高。 樂於犯錯，從中吸取教訓，並作為一名軟體工程師繼續成長和發展。 3. **忽略將自己與他人比較**的誘惑。 作為初學者，很容易將自己與其他可能比您有更多經驗、更多技能或更成功的軟體工程師進行比較。 然而，比較很少有用，而且可能會損害您的信心和動力。 相反，專注於你自己的目標和進步，並慶祝你自己的成就，無論它們看起來多麼微不足道。 4. **忽略那些告訴你你不夠好或者你做不到的聲音**。 作為一名初級軟體工程師，你可能會遇到很多聲音告訴你你不夠好，你沒有合適的技能或知識，或者你應該放棄。 這些聲音可以來自很多方面，包括你自己的疑惑，別人的期望，或者領域的挑戰。忽略這些聲音並相信自己和自己的能力很重要。 你有潛力成為一名成功的熟練軟體工程師，如果你願意付出努力和奉獻，你就可以實現你的目標。 5. **忽略讓你的解決方案過於復雜化的誘惑**。 作為初學者，您可能會試圖使您的解決方案過於復雜，加入不必要的功能或增強功能，或者試圖用您的程式碼打動別人。 然而，簡單直接的解決方案往往是最好的，而且它們比複雜精密的解決方案更有效、更易於維護和有效。 通過關注核心需求並避免不必要的複雜化，您可以編寫對自己和他人更有價值和有用的程式碼。 6. **忽略對失敗的恐懼。** 作為初學者，您可能害怕失敗、犯錯誤或達不到他人的期望。 這種恐懼會讓你退縮，阻止你冒險、探索新想法或挑戰自己。重要的是要忽略這種恐懼，並將失敗視為學習和成長的機會。 通過從錯誤和失敗中吸取教訓，您可以成為更好的軟體工程師，並且可以培養在該領域取得成功所必需的韌性和毅力。 --- 作為初學者，很難採納建議，即使建議的人是出於善意。但如果你能堅持下去，按照有經驗的人告訴你的去做，你就會變得比你想像的更快。所以不要害怕邁出這一步並嘗試新事物。
**舊的 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 新手發問＆交流群組！歡迎加入討論！
