讓我總結說明一下，老方法、新方法的關鍵思維差異： - 在老方法中，工程師眼中主要關心 html，開發過程會一直去思考 html 結構，因為「應用程式的狀態（資料）」就存在 html 之中，html 同時是狀態、也是 UI - 在新方法中，工程師眼中主要關心 data model，通常就是一個 JSON 物件。這個物件的各個屬性，足以表達目前應用程式的狀態。至於狀態要怎麼呈現為 UI，則視為另一個獨立任務，可以另外處理。像這樣把兩件事分開來思考，對頭腦的負擔也比較小 --- 同樣的待辦清單小工具，原本的寫法，與現在的新寫法，請你比較一下程式碼 有沒有覺得變得易讀、好維護許多呢？ 在課程中，我多次說過以下這段描述： > 原本那種寫法，我稱之為「在各處胡亂更新各處 DOM」的寫法 > 新的那種寫法，只有在寫 render 時，腦中要思考 DOM > 在應用程式的其他地方，腦中都是思考 data model 就好 現在你懂我描述的感覺了嗎？ 在這個小工具的例子中，改善的程度可能不夠明顯 但在中型以上的網站、具有高互動性的複雜網頁，一定是用新寫法比較好 --- 這次的課程，讓你的能力從「前端設計」進入到「前端工程」了 之所以叫「工程」，是因為有時候需要建立中型、大型應用程式，這時就需要工程素養 原本那種「在各處胡亂更新各處 DOM」的寫法，絕對無法建立出大型軟體 就跟蓋房子一樣，隨便蓋的小房子臨時居住一下還可以，真的要蓋出厲害的高樓，當然需要足夠的工程技法、素養 --- 寫本課程作業時，render function 的內容會變很多 在實務上，render function 的任務會由框架或者某種模板引擎（template engine）套件完成 所以開發起來會省力很多，不像本課程作業寫起來那樣吃力 你未來使用任何工具只要知道：這些工具的背後，大概就是做了類似這樣 data model + render function 的事情即可！ --- 本課所教的 data model + render function 的寫法 是我為了教學方便，設計出來的一種「手工」開發方法 實務上，中型以上專案，幾乎都會使用 React 或者 Vue 框架 我留意到坊間許多課程、補習班，很快就進入框架的教學 我認為許多學員在結業之後，還是一知半解，甚至分不清哪些是 JavaScript 觀念，哪些是框架獨有的觀念 所以我才在這邊，教導這套手工、但很簡單的開發方法 寫過這種開發方法，接著再去學前端框架，我認為可以大幅改善那種「框架後面很黑箱」的感覺 所以你之後挑選任何框架學習，關於 `application state` 與 `render 出 UI` 這兩者的關係，就大致有個底了 --- 最後，老話一句，視網頁的需要，如果只是簡單頁面、小小 UI 工具，那麼就用老方法隨便寫即可。何況還有 data attribute 可以使用來管理狀態，簡單又方便。很多實務情境下，這樣也很夠了 如果真的有工程等級的需要，則可以使用本課程技巧，管理好「應用程式的狀態」，或者直接挑選框架使用 這行業有一句話叫做：No Silver Bullet（沒有萬用解法） 在開發手法的選擇上，也是一樣，請綜合權衡之後，選擇當下適合的方法吧！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（七）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/AqJGxd
## 課程目標 能夠新增元素到陣列 ## 課程內容 因為我們不再使用「在各處胡亂更新各處 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(); } ``` 做出以上功能，你就完成這次的課程目標了！
身為前端新手學習者，雖然你已經知道怎麼寫 UI 小元件、怎麼寫簡單小工具 但是看著自己每天在用的那些網站、大型科技公司開發的 web application（網路應用程式） 你一定常常心想：這也太華麗了，畫面上 DOM 的變化很複雜、很頻繁，我好像寫不出來呀？ 別擔心，這是因為你目前為止的技能與開發方法，大概只接近 2010 年以前的業界工程師 你目前為止的能力還是比較接近「能把東西設計出來、做出來」而已，還不能夠「帶著工程思維去建造應用程式」 --- 這一門課程，會教你現代前端工程師，開發應用程式的方法與技巧 雖說是現代技巧，但完全不會用到 React 或者 Vue 這種框架 但在學完之後，你將可以比別人更懂，各種框架背後的基礎原理 這些內容非常有趣，將會大幅提升你的「工程素養」，讓你具備遠超過一般新手的基本功！ 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
>最近在忙著實作我的一些小項目，沒有上來發文，但還是一直學習JS， >累積滿多經驗，也累積不少疑問。 >之前站長阿川有跟我提到相關話題，也就是UJS，想說把它拿過來聊一聊。 >剛好最近弄的東西，跟這個也有一些關聯性。 ## html與JS的交互關係。 Inline JavaScript是什麼呢？ 就把JS寫在html裡面的一種手段，也就是onclick那些東西，在自學教材會學到唷：））。 其中也有個東西叫做JavaScript pseudo-protocol，他好像有點像是給一個js的前綴， 讓瀏覽器讀取html的時候知道要開始讀取JS了，用法如： `<a href="javascript:alert(1)">my website</a>` 這樣子的作法都讓JS侵入到html裡面，也就是行為跟結構沒有分離。 是否要UJS，站長上次有提到這可以看專案大小來區分，這篇閒聊開起來可以提供更多細節。 --- 不過我不打算就此結束文章，我要額外分享與XSS相關的內容。 XSS其實是CSS，跨站指令碼Cross Site Script的意思，只是因為縮寫重複CSS樣式（Cascading Style Sheets ）所以用X代替。 簡單理解它就是一種攻擊手段，讓別人網站上執行我的代碼。 --- 有趣的事情來了，那html跟JS交互關係跟XSS又有什麼關聯呢？ 想像一下，當今天小明要做一個討論區，讓使用者用html編輯打文章，就必須小心有人會放一些JS的代碼。 小明想說，我要過濾`<script>`標籤來保證他們乖乖地寫html。 請問這樣子是否就安全了呢？ 答案是否定的，這時候使用Inline JavaScript會發生什麼狀況？ 試想一下因為小明沒有CSP相關設定，防止使用者偷偷塞JS到html裡面，導致小明的壞朋友大胖， 可以直接寫一個`<img src=x onerror="alert(1)">`在留言區裡面， 完全沒有使用到`<script>`標籤，卻也能造成XSS。 --- ## 關於防禦： ### CSP 設定嚴格一點，可以阻止很多XSS，舉例來說文章一開始有`href="javascript:alert(1)"`， 可以設定href後面只能接上http開頭的東西。 ### WAF 他是Web Application Firewall 的簡稱，中文通常叫作「網站應用程式防火牆」 可以建立及管理避免網際網路威脅的規則，包括IP 位址、HTTP 標頭、HTTP 主體、URI 字串、跨網站命令檔(XSS)、SQL 隱碼攻擊及其他OWASP 定義的漏洞。 ### 自己建立fliter 自己過濾也是可行的（不建議），把字串符碼都轉成HTML Entities，例如把 (<)寫成 ` < or <` ，透過這樣的過濾render出來的就不會是指令了。 為什麼不建議，是因為你過濾的東西有可能會被double encoded URL之類的手法繞過。 或是你覆蓋了document.write，以為安全了，但是我用孿生函數(twin function)的document.writeIn你可能就忘了過濾。 這剛好就是我最近在研究的東西。 ## 相關討論問題： 1.對於文章的內容，有沒有什麼錯誤呢？或相關名詞想法想補充？ 2.是否要UJS的實際使用，有哪些想法？或是有什麼經驗？
因為我有個點子是搞一個梗圖的網站 就想說上網先看看人家怎麼弄的 看著就到了梗圖倉庫 欸 突然眼熟的看到站長阿川！？ 稍微確認一下才知道是我們的站長 挖真的是偶像啊0.0 早我好幾百年就已經弄得票漂亮亮有聲有色 我還在那邊１＋１咧 哭暈在廁所 難怪自我介紹說有經驗 相關問題都能回答 這豈止是回答 是模範 是偶像欸（跪了 是說站長人格方面可能才是我最欽佩的 為人善良熱情 低調謙虛 沒有把自己的行頭 作品都丟上來搞一個自我經歷很豐富這樣的介紹 真的很低調欸 小弟個人覺得這真的是各位學習的典範 這邊不知道會不會不太好 推薦這篇 [工程師的缺德行為：叫朋友去學C/C++](https://blog.turn.tw/?p=2568) 太中肯啦 最屌的一句話 我真心覺得屌 非吹捧 是「別擔心，這不是你的錯，是那些書寫得不夠好」 說實話要說那些書很爛嗎 也沒有 但說真的 真的不夠好 其實現在的網路課程 線上教學也是有同樣的問題 課程編排都很死 講老半天的閉包 hoisting 那些東西 不是說這些不重要 要面試 要工作恐怕那是最基本的 可是我身為一個愛好者 我沒看見那些觀念真的被套用&應用在實際狀況 舉例來說我學變數的觀念 是經由RPG製作大師 要修復做寶箱會無限開的bug 因此設定一個變數是off 打開是on 然後用if條件式去判斷 我一次學會好多東西 第一個我懂了變數 我知道需要記憶體幫我存資料 第二資料型態 Boolean 就是on跟off兩種 然後我也學會流程判斷 也就是if x=off then....這樣子 後來用CE修改器發現要找血量 是小數點 所以搜尋要用浮點數(float) 再來是玩VB要寫自動發話所以瞭解了迴圈 並知道要寫一個函式 再去call它 多麼精彩啊這些片段！每一個細節我都忘不了！全部都是畫面！全部都很有趣！ 以此類推 講真的到現在 每一個語法都是我靠著自己實踐 找出來的 雖然這樣子花了十來幾年 程度還很弱 但我敢說這樣子的內容有趣 甚至我也敢說 這樣才有意義 我至今到現在常常看網路教學影片 還是一堆講課講老半天都是程式的語法 沒有實戰也就算了 先理解語法 但講解的都很生硬 完完全全都只是為了講課而解釋&示範 真正要實戰了的話也都玩那幾招 沒有變化 明明這個網路世界 程式世界是如此的繽紛 到了他們教學的手上 真的是變黑白 也難怪需要特別聰明跟有天分的人才能駕馭 因為教學資源的傾向就是科板書的教法 當然要足夠聰明 而不是有熱誠 純有熱誠也要能像我這樣十來年慢慢去搞 錯誤了沒地方搞懂 再等好幾年後發現問題 對我來說 我不是特別聰明 我一路走來也理解了 我的確偏笨 但打開書本或是課程 從VScode建置開始 慢慢開始介紹語言的歷史 我真的看不下去 無聊死了 我寧願花個十年 用我有趣的摸索去實戰 去玩 也不要聽課 對我來說 這些課不是爛 是真的不夠好 我用我的自學證明 有一套比他們的課程更生動活潑 更有愛的方法能學程式 至少對我自己來說永遠為真 嗯嗯 離題了 主要是在這個論壇 真的很棒 鼓勵大家也多多發文分享 大多數擁有聰明頭腦的人 或是自己熬過來的工程師 只會轉頭批評外行人蠢或笨 要不然就是酸 藏私 不回答你還講幹話說 這你就不懂 或是重複一次問題說 就把這個解決就好啦 優越感灌下去 見不得你好 甚至批評你是在搞東搞西 我真的遇到一個 我發問問A問題 結果有個嘴臭仔他不回答就算了 在那邊嘴說看我過去發文 過去問B過去問C 說我是搞東搞西沒屁用 叫我去系統性學 在那邊講跟我問題無關的屁話 系統性學要是能解決 我早就解決了== 要怎樣的系統 笑死 你說的系統才是系統喔 我只想知道我研究的領域 你要我系統去哪裡 真的超傻眼 雖然文長有點抒發心情 但收尾主要還是想說 這個網站的資源是不同於其他地方的 還有這個網站的站長也是很真心要提升台灣程式社群的 所以我們可以一起利用這個資源～一起好好努力～ 讓未來新加入的分子 可以看到有趣的例子、找到真的有用的問答文章~ 站長是個很熱心 很有才華想法的大家長 我認為難得的是也很善良與見解獨到 能體會我們這種熱愛程式的人的心 https://codelove.tw/@howtomakeaturn/post/VaGR3p 各位都應該去點個讚！！
在這門課程之前，你所掌握的知識大多是關於「設計出漂亮的網頁」 在這門課程中，學會了 Cookie, Local Storage, AJAX 等等現代技術 從這門課程開始，你逐漸開始具備「前端工程開發」的能力 能夠跟伺服器端溝通、能將狀態存在瀏覽器端，打造出好用、功能豐富的應用程式！ 身為前端工程師，本課程的內容，已經足以讓你跟後端工程師溝通、配合，完成各種專案的需求 各種資料結構、互動方式單純的中小型專案，你已經有能力從無到有打造出來 實務上，當應用程式更複雜，也就是資料更複雜、用戶操作行為更豐富的時候，會需要更進階的方式來開發，這些在之後的課程會提到 本課程提到的各種關鍵字、物件、函式，都只是簡單地介紹基本用法 針對有興趣的部份，歡迎自行上網研究，了解這些物件更多的屬性與函式用法！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（六）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/2anPxn
如果你是網頁設計師，或者開發的網站以公司介紹、形象網站為主 那麼目前為止的課程，已讓你具備相當的動態網頁開發能力 各種特效與視覺效果，你都做得出來 甚至更複雜的動態效果，直接上網找現成的套件，也都不是問題，你都能夠自行研究＆導入了 不過，如果需要開發與伺服器互動的應用程式，例如電子商務網站 或者是更多功能的工具類型網站，例如各種生產力工具 那麼就需要學習本課程的內容，包含 Cookie、Local Storage、與 Ajax 的說明 這些內容非常有趣，能讓你開發出各種多功能的前端應用程式，讓工程師的創造力有更多發揮空間 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
第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很重要。 另外讀第三方套件文件內容都是英文，一開始讀有點措手不及，有些東西看不懂和不了解其意思，但動手試試看觀察變化，試個幾次就明白了，請勇於嘗試會發現很好玩。
我英文很OK 所以資源滿豐富的 這點我很幸運也很感激 只是我點子也比較多 常常想要實作超出我能力的東西 例如串後端 資料庫 弄出會員系統 發送email驗證 一些實作python的爬蟲 因為我也常常搜尋人家前輩的作品 心有所向 就很嚮往也做出那些東西 (例如這種論壇 就是我的目標之一 之前一直很期待有這種程式的討論社團.....版主實現我的願望 ) 可是後端我完全不懂 還不會 目前還在專注練習html+css+js的小作品 心中的焦慮感太強了...導致往往都沒法動手 畢竟我未來要搞的作品就是專案 有時候小作品太小 都沒什麼動力練 可是自己實力又還不到.... 挫折˙真的滿滿啊... 感謝版主開這個論壇 讓我抒發... 學習規劃真的不容易...
框架背後有什麼必學觀念的？這篇文章簡單整理如下 原文出處：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) 上見到我。 但請記住，所有其他選擇都同樣有效。你不應該因為我這麼說就選擇一個框架，而應該使用最適合你的框架。
軟體工程師寫部落格，對於職業生涯很有幫助，有很多好處。這篇文章的作者簡單分享心得。 原文出處：https://dev.to/nasirovelchin/every-software-developer-should-write-a-blog-4622 --- 作為一名軟體工程師，我常常打算明天、下週甚至下個月，就要開始寫部落格。但幾年過去了，我還沒有寫過一篇文章。我沒有開始的原因是，我覺得，我不是專家、不是名人、也不擅長寫作，只是一個普通的軟體工程師。因此，為什麼我要花時間寫一篇文章，根本沒有人會讀。這總是阻止我開始寫。但最近，在我閱讀了幾篇軟體工程師的文章後，我改變了主意，決定開始寫。 有很多理由開始寫文章，而且，我認為每個軟體開發人員都應該擁有部落格。理由大致如下： **更快地學習並提高您的技術技能** 當我試圖解釋或教別人時，我自己也學得更快。我從大學的電腦科學課的小組作業專案中了解到這一點。我仍然記得我試圖向其他小組成員解釋和展示的一切。解釋會促使你更多地了解這個主題，這不僅對你的讀者有好處，對你自己也有好處。開設技術部落格與教學非常相似，因為在您的部落格中，您將向世界教授寫程式和電腦科學。 **推銷自己並開始你的職業生涯** 您的部落格將為您可能無法找到的各種網絡和商業機會打開大門。通過部落格，您可以得到很多機會成為自由工作者和接案者。舉個真實的例子，我的一個朋友，他開始學習 Java 程式語言，並在他的部落格上分享他的進度，有招聘人員向他發送了他從未申請過的工作機會，他們發現他在網上分享的文章。而且，他甚至在完成 Java 課程之前就開始了他的軟體工程師生涯。 **記錄您的回饋進度** 您每周有多少次找到完美的 StackOverflow 文章來解決您的問題並節省您數小時的頭撞牆？有多少次您花費數小時解決問題，但沒有其他人從您的解決方案中獲益？ 即使你不時地、每週寫一篇文章，你也可以展示你面臨什麼樣的挑戰，你是如何解決它們的，你使用了哪些方法和技術，你避免了哪些。一年後，當您回顧時，您會發現您的文件對別人幫助很大，這些有用的見解，以及解決問題的方法，都很有幫助。 此外，與經驗豐富的軟體工程師相比，寫程式經驗很少的人可以更好地展示他們如何在某些主題上掙扎，陷阱和不明顯的部分在哪裡。因此，閱讀您貼文的人不會陷入您所寫內容的陷阱。 **學習如何交流和表達你的想法** 信不信由你，但您的軟體職業生涯在很大程度上取決於您溝通和表達想法的能力。即使你是一個優秀的軟體工程師，如果沒有良好的溝通和展示自己的能力，你的軟體生涯也不會大放異彩，而且會受到限制。此外，許多軟體工程師都說寫文章也能幫助他們寫出更好的程式碼。 **消除你的壓力** 脫離日常的寫程式生活，給自己一些自由，隨心所欲地寫一些你想分享的東西，分享你自己的觀點，寫下來並發表。這些都會讓你感到放鬆。 總的來說，作為軟體開發人員，寫部落格是提升個人風格的絕佳方式。寫部落格可以促進您所做或計劃做的任何事情。它打開了您意想不到的大門。值得一試，看看會發生什麼好事吧。
#學習混亂期 在廣大的網路中，要有超級多資源可以學習，過往的經驗，因為資訊太多根本不知道該選什麼影片或網站來當作學習的範本，聽到別人說python適合入手，就上網找尋，常常卡住後就會放棄。總是找不清楚什麼是前端、後端、github怎麼使用，環境應該如何構架等。 #尋找對資源 這次在FB彈出，AC的廣告，覺得很有興趣，初期課程為3000大洋，但他循序漸進的教學方式，還有把所有的工具前後關係及如何使用講的非常清楚。覺得超乎自已的期待。 #學習目標 不要遇到挫折就放棄，我一定可以的
在這份教材中，實際使用了多個第三方套件，來達成功能 不斷上網找適合套件、翻文件、找範例程式碼、確認堪用，是軟體工程師的日常 到處用現成套件，其實滿好玩的，可以做到很多強大的效果，也在這個過程中，了解實務上要如何跟第三方套件互動 --- 如果你是網頁設計師，目前為止的能力，已經足以應付你工作上絕大多數的需求 如果你是前端工程師，面對這些套件，首先學會「如何使用」即可 工作一陣子後，要學會「如何調整、客製化」以及「背後原理」 多年之後，你要學會「如何自己寫一套同樣強大的套件」，至少要知道大方向 否則你就永遠只是套件的「使用者」而已，無法成為資深工程師 不過，可以先把這些視為中長期目標就好，剛開始工作，就先以完成任務為主吧 業餘空閒時間，再找時間把有興趣的套件，深入研究一番即可！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（五）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/Zq4v3w
## 課程目標 認識並且能使用 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 文字變為紅色 寫完之後，你自行比較一下，網頁多加一個肥大的套件，但是可以少打這些字，你覺得值得嗎？ 這是一個主觀問題，你就根據情況決定你的答案吧！ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能使用 vanilla-lazyload 套件 ## 課程內容 這次的套件是 https://github.com/verlok/vanilla-lazyload 文件與 demo 在 https://www.andreaverlicchi.eu/vanilla-lazyload/ 當畫面上圖片很多的時候，頁面載入會很慢 lazy load 是所謂的延遲載入技術 也就是不會在一開始就通通載入，而是使用者在網頁上下滑動的時候，圖片元素出現在畫面中的時候，才動態去載入圖片 ``` <img alt="A lazy image" class="lazy" data-src="lazy.jpg" /> ``` 使用了 img 元素，class 設為 lazy，但不設定 src 屬性（因為設了瀏覽器就會直接去抓圖片），而是使用 data attribute 來另外給一個 data-src 屬性 這是一種常用的 API 設計，套件會自己去找出 `.lazy` 的元素，然後去找元素的 `data-src` 屬性，接著載入圖片 要啟用套件，需要以下 javascript ``` var lazyLoadInstance = new LazyLoad({ // Your custom settings go here }); ``` 這樣就完成了，很簡單吧？ 這邊用到了 javascript 的 OOP 物件導向語法，new 出一個新物件。可以先不管 OOP 細節，照做就好，反正就是創造一個物件然後執行一些函式 創造的同時，會傳一個用大括號 `{}` 包起來的物件進去，當作套件的設定值。這邊因為都用預設的設定，所以傳空物件進去就好 `//` 開頭的是註解，是給開發者自己看的提醒文字，沒有實際功能 比較進階的用法會類似這樣 ``` var lazyLazy = new LazyLoad({ elements_selector: ".horizContainer", callback_enter: initOneLazyLoad, unobserve_entered: true // Stop observing .horizContainer(s) after they entered }); ``` 這個例子傳了有三個屬性的物件進去 各個設定與功能效果，可以再查文件，反正會用 `{}` 包起來的物件去進行參數設定就對了 這種「傳一個物件當參數，來進行套件的功能設定」的設計，也是 javascript 套件的常用 API 設計 關於物件這種資料型態，之後的課程會再進一步學習 ## 課後作業 請使用 https://jsfiddle.net 接著上網尋找 10 張漂亮圖片。參考圖庫：https://unsplash.com/ 假設正在開發一個包含大量高畫質、大圖片的企業形象網站，包含這 10 張圖片，上往下依序排列 一次載入，實在太慢了，尤其是手機用戶、舊電腦的用戶、或者網速很慢的用戶 請替這些圖片加上 lazy loading 功能 做出以上功能，你就完成這次的課程目標了！
進入到 JavaScript 基礎課程的第四部份 你已經算是有了初步的前端開發與設計能力了 實務上，我們在專案中大部份的功能、元件，都會去找找看「現成的」、「開源專案」來使用 也就是如果已經有人做過了、有人分享過了，如果堪用，基本上就不會自己重做一個 因為成本差太多，什麼都自己做實在太花時間、花金錢 這一課我們稍微認識一下開源生態系，用用看這些現成套件 這些東西，我們叫：「第三方套件」，或者插件、外掛，都可以 我會分享幾個我自己在滿多專案都會用的套件，順便在這過程學習一些知識 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
建議您將自己完成的網站分享給您的朋友，讓大家看看您最新學會的技能！ 完成這些，你就完成這次的課程目標了！ 想成為網頁設計師的朋友，之後可以開始找更多資源學習CSS的進階技術。 想成為前端工程師的朋友，之後可以開始找 JavaScript 的資源學習。 想成為後端工程師的朋友，之後可以開始找喜歡的後端程式語言學習（例：PHP）。 最後，謝謝你耐心的完成這整套課程！
在這份教材中，實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件，但已能滿足許多網站設計需求 實務上，不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎，接著客製化與修改，例如最知名的 Bootstrap 套件 但是，不論是網頁設計師、前端工程師，在使用現成套件之餘，稍微知道背後的原理，比較好 這樣才能更好地掌握工具，以及在必要的時候能夠親自開發與修改 而到目前為止，我認為，你已經能夠親手製作出設計師要求的大部份靜態＆動態設計了！ --- 真正在工作的時候，也會很像本次課程這樣，幾乎完全沒人幫你 但或許會有人告訴你關鍵字，或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過，但你有信心，可以找到相關資源、可以做得出來 身為軟體工程師，需要有這種「大致知道自己潛力在哪」的能力與信心，才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中，在我完全沒有教學的情況下，你就成功做到了 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（四）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/837eq0
簡單複習一下，在這份教材中，我們學會了 - 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
## 課程目標 學會基本的 Selector API 用法 學會基本的 `.closest()` 的用法 ## 課程內容 課程到目前為止，要存取元素，都是使用 `document.getElementById` `.parentElement` `.children` 然後上上下下到處爬來爬去、找到目標元素 在網頁結構簡單的時候還好，一旦內容複雜起來，你會發現這樣寫，有點麻煩 其實，在學習 css 的時候，就有一套指定元素的方法了，如果能直接用 css 那套設定樣式的方法，來找到元素，那不是很方便嗎？ ``` <div> <div id="wrapper"> 我想跟您說： <p> Hi, <span id="target">早上好</span> </p> <p> Hi, <span>中午好</span> </p> <p> Hi, <span>晚上好</span> </p> </div> </div> ``` ``` document.querySelector('#wrapper p span').style.color = 'red'; ``` 在 jsfiddle 試試看，會發現「早上好」變成紅字了 使用 `.querySelector()` 可以很方便的找到元素！如果找到多個元素，只會回傳第一個元素 接著試試這樣 ``` var spans = document.querySelectorAll('#wrapper p span'); for (span of spans) { span.style.color = 'red'; } ``` 在 jsfiddle 試試看，會發現三塊文字，都變成紅字了 使用 `.querySelectorAll()` 可以很方便的找到多個元素！接著就用陣列來處理即可！ 以上兩種用法，是不是比之前的老方法方便許多呢？ --- 有件事要提一下，老方法的 `.getElementById()` 只能用在 `document` 物件上 新方法的 `.querySelector()` `.querySelectorAll()` 除了可以用在 `document` 之外，還能用在一般 DOM 元素上喔！ ``` var wrapper = document.querySelector('#wrapper') wrapper.querySelector('p span').style.color = 'red'; ``` 所以這樣寫也可以！是不是覺得更彈性、更強大、更好用了呢？ 有了這些，可以完全取代 `document.getElementById` 與 `children` 的寫法！ --- 接著來看看有什麼新方法可以取代 `.parentElement` 吧 ``` var target = document.querySelector('#target') target.closest('span').style.color = 'red'; ``` ``` var target = document.querySelector('#target') target.closest('p').style.color = 'red'; ``` ``` var target = document.querySelector('#target') target.closest('div').style.color = 'red'; ``` 在 jsfiddle 分別試試看，這三種程式碼，會讓哪些文字變紅色吧！ `.closest()` 會回傳第一個找到的「祖先元素」 也就是順序為父元素、祖父元素、曾祖父元素，依此類推，不斷往上尋找，到找到第一個為止 實務上這個函式非常好用，可以完全取代 `.parentElement` 的寫法！ ## 課後作業 接續前一課的作業，現在要來重構（refactor）程式碼 所謂的「重構」程式碼，就是程式的功能完全不變，但是讓程式碼更好讀、好維護 --- 請把作業中出現的 `.getElementById()` `.parentElement` `.children` 全部拿掉 通通使用本課教導的函式來改寫 改寫完之後，你會發現，原本的程式碼，如果不看 html，只看 JavaScript，只會看到 parentElement、children、跟一堆索引，到處爬，不知道在幹嘛 而在改寫之後，至少看起來比較像在寫 css 樣式的時候，會用 `span` `li` `button` 這些元素名稱來上下查找元素 光看 JavaScript 程式碼，會比原本好讀一些些！ 單看這次作業，可能感覺還好。但在專案很大的時候，你不會想在程式碼看到全是 parentElement、children、跟一堆索引，你會希望有更多額外資訊 你會希望程式碼能更清楚表達：「目前到底是在找什麼元素」。所以實務上都是以新寫法為主的 不過呢，這依然是主觀問題。如果你喜歡整個職業生涯都用老寫法來做，應該也可以。高興就好囉！ --- 完成這次重構，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
