## 課程目標 - 認識 Lifecycle Hooks 與 Watchers ## 課程內容 來認識一下 Lifecycle Hooks - https://vuejs.org/guide/essentials/lifecycle.html 簡單來說，在 vue 執行階段，又可分為 `mounted` `updated` `unmounted` 等等，將近十個時間點 根據應用程式的需要，可以在這十個時間點，進行必要的檢查＆執行特定任務 但是，實務上，除了 `mounted` 經常用來跑一些初始化任務之外，其餘的時間點，幾乎不會用到 所謂 Lifecycle Hooks 是一個有點過時的觀念！稍微讀一下就好，相關功能大多被 Watchers 取代了 --- 接著就來認識一下 Watchers - https://vuejs.org/guide/essentials/watchers.html 簡單講，在 Vue 中，所謂的 Reactivity 已經很好用了： 「某些變數在更新之後，其他相關變數、以及畫面 UI，會跟著自動更新」 除此之外，還可以進一步使用更進階功能： 「隨時監控某些變數，如果發現它們更新，就執行一些相關的任務」 這些任務我們稱之為 `副作用（side effects）` 關於 side effects 怎麼解釋，是一個比較困難的主題 這邊先不詳談，目前有點困惑沒關係，作業中會讓你練習一下，先有點小感覺就好 ## 課後作業 承接上一課的作業 這一課要來做自動儲存功能 請使用 Watchers 去監聽 `notes` 狀態 每次 `notes` 有更新，就自動儲存到 Local Storage 裡面！ 接著，在 `mounted` 裡面檢查 Local Storage 如果有資料，就把資料更新到 `notes` 裡面 如此一來，就完成了自動儲存功能，連儲存按鈕都不用做！ --- 提示：普通的 watchers 不夠用，要使用 Deep Watchers 這部份有點難解釋，你先知道：普通的 data 變數型態，例如字串、數字、布林，可以用普通的 watcher 但如果是陣列或物件型態的 data，就要使用 Deep Watchers 先知道這樣就好 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習事件處理的寫法 ## 課程內容 來學一下事件處理的寫法 - https://vuejs.org/guide/essentials/event-handling.html 眼花撩亂沒關係，我已經多次告訴過你應該用什麼心態去面對 不用把這些東西看得太神奇，這些東西的背後，就只是你已經寫過的 html `onclick` 那些東西而已，只是多加一層「抽象化」，由 Vue 中介在中間管理 DOM 我們在寫 Vue 的時候，就是「完全不親自操作 DOM」了，通通交由 Vue 處理 我們負責專心管理 application state 就好，不用費心思去管理 DOM 用了框架，就不要再去直接操作 DOM，否則會跟框架起衝突、讓程式充滿 bug --- 有件事我必須說一下，就是 `@click` 後面可以放函式名稱，也可以直接執行函式 這個設計，實在很糟糕！我非常不喜歡！ ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <button @click="hello1"> hello 1 </button> <button @click="hello2('John')"> hello 2 </button> </div> <script> const { createApp } = Vue createApp({ methods: { hello1() { alert('hi'); }, hello2(name) { alert('hello ' + name) } } }).mount('#app') </script> ``` 以上範例，在 `@click` 裡面的內容，到底要不要加上小括號 `()`？ 乍看之下，根本無法理解。要翻閱文件，才發現原來兩種寫法都可以 我認為這違反了程式碼風格應該要 `保持一致性（consistency）` 的原則 Vue 這種彈性設計，讓程式碼變得令人困惑、難以理解 --- 再提一件事，Vue 的 template 中，雙引號的內容，到底是 `變數` 還是 `字串`？ ``` <button @click="greet">Greet</button> ``` 這個 greet 是函式名稱，是變數 ``` <div :class="{ active: isActive }"></div> ``` 這裡在雙引號內容，宣告 JSON 物件，所以是變數 ``` <template v-if="ok"> ``` 這裡是變數，變數型態大概是布林 ``` <div class="active text-danger"></div> ``` 這裡是字串 ``` <input :value="text" @input="event => text = event.target.value"> ``` 這邊的 `text` 到底是字串還是變數？ ``` <input ref="input"> ``` 這邊的 `input` 到底是字串還是變數？ 透過觀察可以發現，冒號開頭 `:`，或者小老鼠開頭 `@` 或者縮寫法 `v-` 開頭的，雙引號裡面是變數 不然的話，就跟普通 html attribute 一樣，雙引號裡面就只是字串而已 對於 Vue 這種彈性設計，我一樣「非常不喜歡」！ 當然，這些都是我個人主觀看法，一定很多人覺得又好寫、又彈性 這對於只想快速開發、懶得追根究底的新手，可能很方便 但在深入思考、試著搞懂資料型別、試著像資深工程師一樣思考的時候，會造成很多額外的困惑 --- 我想說的是，遇到這類問題，你就多試一下、多翻官網文件 然後不要覺得自己很笨、被框架嚇傻了 要知道複雜的工具，本身背後就代表多種不同的主觀偏好，然後那些主流觀點，可能真的不怎麼樣，所以不是你的問題 隨著更有經驗之後，你會能夠做出各種主觀的判斷、能夠比較各種設計的優劣之處 目前階段，你就先想辦法讓程式能跑、能完成任務就好了！ --- 再來學一下表單欄位內容的處理 - https://vuejs.org/guide/essentials/forms.html 在上個系列課程中，我們學過 data model + render function 的寫法 使用框架之後，則變成，就連表單欄位內容，也是 data model 的一部份 乍聽之下有點怪，其實，實際寫過之後，會發現還滿方便的！ ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <input v-model="username"> <button @click="greet"> Greet </button> <h1> {{ username }} </h1> </div> <script> const { createApp } = Vue createApp({ data() { return { username: "John Doe" } }, methods: { greet() { alert('Hello, ' + this.username); } } }).mount('#app') </script> ``` 正因為把 `欄位中目前輸入的值` 視為 `當前應用程式的狀態` 的一部份 所以可以隨時取得表單欄位內容，而不用像以前那樣，要透過 DOM selector 之類的，去找到元素、才拿到內容！ 一樣，表單欄位內容的取得，寫法多種，就挑順眼、簡單的來用即可 ## 課後作業 承接上一課的作業 這次要來開發「新增」與「刪除」功能囉！ 請在記事列表的上方： - 新增一個 `input` 來輸入「記事標題」 - 新增一個 `textarea` 來輸入「記事內容」 - 新增一個 `select` 來選擇顏色 - 新增一個「新增」按鈕，點擊之後，會新增記事 - 請將這些欄位的內容，放在 application state 裡面管理 然後，請在每則記事的裡面，新增一個「刪除」按鈕。點擊之後，會刪除記事 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習迴圈的寫法 ## 課程內容 來學一下在 Vue 模板裡面，如何寫迴圈、顯示陣列內容 - https://vuejs.org/guide/essentials/list.html 老樣子，同一件任務，有很多種不同的寫法 隨便挑一個你覺得順眼的、好理解的方式來寫即可 ## 課後作業 承接上一課的作業 之前我們在 template 都是用索引的方式，直接從陣列取得元素 `notes[0]` 這一次的作業，請把 template 的內容，使用 for 迴圈來改寫 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習條件判斷式的寫法 ## 課程內容 先來學一下管理 css class 與 style 的一些寫法 - https://vuejs.org/guide/essentials/class-and-style.html 老樣子，這些寫法比較進階，稍微有個印象就好 你也可以發揮創意，使用 Vue 的一些其他方法寫，反正能把正確的 css class 跟 style 加上去就行了 --- 再來學一下 Vue 之中關於條件判斷式的寫法 - https://vuejs.org/guide/essentials/conditional.html 老話一句，文件中提供你很多不同選項的寫法 隨便挑一個你覺得順眼的、好理解的方式來寫即可 ## 課後作業 承接上一課的作業 在 state 裡面，有個 `color` 屬性一直沒有用到 這次作業要來使用它 請讓每個記事，根據 color 的值，來顯示為不同顏色 如果不知道什麼意思，請再把玩一下 Google Keep，其中有變色的功能 提示：為了簡單起見，可以用 `:style` 的方式，直接加入顏色即可 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 體驗一下 Reactivity 的效果與便利 ## 課程內容 來學 Vue 之中 Reactivity 的基本觀念 - https://vuejs.org/guide/essentials/reactivity-fundamentals.html 老樣子，大部份看不懂沒關係，稍微有個印象就好 記得之前的課程，每次更新完 state，你都要接著去執行 `render()` 函式嗎？ 所謂 Reactivity 就只是說：當你更新完 application state 之後，Vue 會自動幫你更新 UI 上的內容 就只是這樣，不要把它想得太複雜 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> 嗨，我是 {{ user.name }} <button @click="changeNewName"> 改名字 </button> </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" } } }, mounted() { this.user.name = "Frank" }, methods: { changeNewName() { this.user.name = "Kevin" } } }).mount('#app') </script> ``` 到 jsfiddle 跑跑看，看看畫面上出現什麼 `mounted` 是 vue 將畫面第一次載入之後，可以安排任務的地方，通常會放一些「系統初始化任務」 `@click` 跟 `methods` 那些，就只是操作事件的寫法而已，先照做就好 以上兩點，後面課程會詳談 --- 在 Vue 文件中，你會到處看到 `this` 這個關鍵字 要存取 application state，有時前面要加 `this.` 有時又不用 關於 `this` 關鍵字，它是一個 JavaScript 程式語言裡面過時又晦澀難懂的觀念 我不想細談，你也先不用研究。就先照做、程式能跑就好了 反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 接著來學 Vue 之中 Computed 屬性的觀念 - https://vuejs.org/guide/essentials/computed.html 老話一句，看不懂沒關係 雖然大家都說用這寫法，效能會比較好、程式碼會比較優雅 但實際上，我自己在好幾個專案，就完全不使用任何 `computed` 功能 一律通通只用 `methods` 來寫程式，根本也不會怎麼樣 --- 在整門系列課程，會常常像這樣，我叫你讀官網文件的很多內容 但我接著又會說，看不懂沒差，其中 XXX 根本沒用，其中 YYY 也沒必要用，只學 ZZZ 就好 這些都是我個人的主觀意見。如果你在網路上找資料，會看到許多工程師，有跟我完全相反的建議 這是軟體工程師圈子的常態，充滿各種主觀喜好、偏見，你要習慣一下 （如果你很好奇我是怎麼做出這些判斷的，請重新閱讀此系列課程，第一篇文章：前言，裡面的最後一段） 你不需要完全同意我的觀點，在研究過程中，如果你有發現比較喜歡的寫法，就直接用沒關係 如同我多次提醒過：只要能解決問題就好，你就隨便寫沒關係 各種做法細微的差異，將來有一天你會慢慢理解 ## 課後作業 承接上一課的作業 這一課來簡單體驗一下 reactivity 的效果就好 也就是簡單更新一下 application state 就好 請加入 `mounted` 函式，在裡面把「第一個記事」的內容更新為「多出門、到處走走、也要多運動」 完成之後，你會發現，你的春節行程安排，看起來積極多了～ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠運行 Vue 基本環境 - 能夠 render state ## 課程內容 身為工程師，要習慣到處翻閱各種技術文件 這次的課程，我不會手把手帶領，細談所有觀念 我會一次提供一個官網連結。請你一邊閱讀，一邊把其中的範例貼到 jsfiddle 跑跑看 我會額外提供簡單介紹＆關鍵字，然後補充一些注意事項 官網文件內容是英文，如果對英文沒把握，就去翻中文官網 https://cn.vuejs.org/guide/introduction.html 但是，長遠來說，還是要逐漸提升自己的英語閱讀能力才行 --- 先學基本的安裝＆運行 - https://vuejs.org/guide/quick-start.html 這系列課程，我們用最簡單的 CDN 環境來跑就好了，先只學 CDN 那一段就好 --- 接著來學 Vue 最基本觀念 - https://vuejs.org/guide/essentials/application.html - https://vuejs.org/guide/essentials/template-syntax.html 內容很多，大部份看不懂沒關係，稍微有個印象就好 如同我在前言所說，同一件事有很多種花俏寫法，你根本不用全部學會 這一課我們只要學會如何 render state 就好了 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> {{ user.name }} 喜歡吃 {{ fruits[0].name }} 以及 {{ fruits[1].name }} </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" }, fruits: [ { name: "Apple", }, { name: "Banana", }, ] } } }).mount('#app') </script> ``` 上面這段範例，在 `data()` 函式將 application state 準備好 然後只要將一段作為 UI 的 html 寫好，我們稱之為模板（template） 接著 Vue 就會把 state 放進 template 裡面，把結果給 render 出來 貼到 jsfiddle 跑跑看吧，你會發現非常簡單、好理解 ## 課後作業 這系列課程，我們要模仿 Google Keep 製作一個應用程式 請先把玩一下 Google Keep https://keep.google.com/ 作業使用 jsfiddle 來寫 --- 這一課先簡單呈現 UI 就好 請使用以下這段 code 作為 application state ``` data() { return { notes: [ { title: "春節行程安排", content: "吃飽睡，睡飽吃", color: "red", }, { title: "工作待辦事項", content: "詢問各家廠商報價", color: "green", }, { title: "運動健身計畫", content: "每天早上六點去健身", color: "blue", }, ] } } ``` 使用以下這段 code 作為 template ``` <div id="app"> <div class="note"> <h3 class="title"> <!-- 請顯示第一個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第一個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第二個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第二個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第三個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第三個項目的內容 --> </p> </div> </div> ``` - 陣列內容就只有三筆資料，就只要顯示這三筆資料就好 - 在 application state 裡面的陣列，直接用 `索引` 來取出值就好，這一課先不用寫 for 迴圈 - color 這一課還不會用到，可以先忽略沒關係 - 請在 `<style>` 加上一些樣式，讓整個頁面漂亮一點 - 每則記事可以單純的放進網頁就好，不用像 Google Keep 那樣花式的排版（那種叫瀑布流排版，很難寫） 做出以上功能，你就完成這次的課程目標了！
我知道你們很多人，來上這門課程，都是希望可以儘快去上班、賺錢 所以... 我們來學 Vue 吧！ --- 在開始之前，我必須再次強調 與坊間很多補習班不同，我們已經花了六門課程的時間，在練習原生 JavaScript 與網頁基本觀念 也就是説，就算完全不使用任何套件，只用最原始的開發方式，你也已經可以寫出各種前端功能了 就算現在直接拿職場上的客戶需求給你，請你做出來，其實很多需求「你已經可以直接寫出來」了 只是有些客戶要求的功能，畫面上的 `狀態` 與 `互動行為` 太多，原生 JavaScript 寫起來會很吃力 就算引入 data model + render function 的觀念來輔助，還是很難寫 所以我們要學習「框架」，讓應用程式的 `狀態` 與 `互動行為` 變得更好管理 --- 我想說的是，不管你被要求去學習哪種框架 你都要知道，不管寫起來多花俏、或者語法看起法多晦澀難懂，追根究底，都只是在管理 `狀態` 與 `互動行為` 然後底層就只是一堆 `變數` 跟 `各種對於 DOM 的增減操作` 而已 不要把框架想得太神奇，都是你已經會寫的東西，只是為了方便而進一步包裝而已。業界術語叫：抽象化（abstraction） --- 最後，我想說明一下學習複雜工具該有的心態 即便是在同一個社群內（例如 Vue 社群） 對於完成一個任務，該把語法設計成什麼樣，都有各種不同意見 也就是想要解決一個問題，看起來寫法 A 就可以做到 有人會說不夠好，要用寫法 B 才算是漂亮 有人會說都不行，要用花俏的寫法 C 才算是真正完成 我個人的建議是：先從最單純、好理解的寫法開始學起！工作上也只使用這些即可！就算程式碼會因此冗長一點，也沒關係！ --- 在學習任何框架的路上，面對某個部份，經常會出現這種感覺： 「這部份好複雜，雖然好像可以解決問題，但我有點不懂，這好像用更簡單的 XX 寫法就可以，不是嗎？」 一旦出現這種感覺，一律就只用 XX 寫法就好，不用管別人怎麼說 用簡易好懂的寫法 A 如果可以完成一堆任務，就通通都用寫法 A 就好 更進階的寫法 B 以及更花俏的寫法 C，只要「知道有他們的存在」就好，不用急著搞懂 在未來，真的遇到寫法 A 的瓶頸時，你自然會想起 B 跟 C，也才會終於了解他們的價值 也很有可能，整個職業生涯都用不到 B 跟 C，那本來就是一些花俏人士的個人偏好而已，你不用在意 所以，能解決問題就好，不要被框架的龐大文件，與社群的各種五花八門意見所迷惑了！ 話不多說，讓我們馬上開始來寫 Vue 吧！ --- **2024-04-30 補充：[為什麼站長的教材，看起來是教 Vue 2，不是教 Vue 3？](https://codelove.tw/@howtomakeaturn/post/GqPpwq)**
像這邊的文章輸入是使用textarea 想要用JS得到文章內容可以直接抓 但有些地方是編輯器 通常長的就比較奇怪 會像是html的結構 甚至有的貼出來是用iframe去完成 我最近想要實作備份文章內容的腳本 發現一些問題 首先是在it幫這邊測試  我發現就算在開發者工具改動文章內容 回到編輯那邊 卻又會跳回來 如果是textarea 我用value就可以改動 不太知道這種狀況 要怎麼用JS去改動裡面結構 就算我學裡面的span去貼 會發現只會跳會原本的內容 動彈不得 是說該怎麼處理 我發現就算我改innerText 表面上會改一下 當我要編輯 又會跳回去 這樣子是什麼問題 這樣的效果也會導致假設我想要用JS輸入文章也會遇到障礙 這方面該怎麼解決呢～～
# 主題 一直覺得看別人的code可以學到很多 不只是方法還有寫程式的觀念 想許願新的教學文章是 帶著看code 解讀網頁上實際運用到的東西 我第一個想丟出來討論的是破解右鍵 # 程式碼 ```javascript= javascript: (function() { function R(a) { ona = "on" + a; if (window.addEventListener) window.addEventListener(a, function(e) { for (var n = e.originalTarget; n; n = n.parentNode) n[ona] = null; }, true); window[ona] = null; document[ona] = null; if (document.body) document.body[ona] = null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart"); } )() ``` # 我的觀察與分析 ## 程式風格分析 我只看的出來這邊 他非常非常聰明 的利用一個function 去做一堆addEventListener 感覺這是pureJs很漂亮的寫法 而不是每個都在那邊addEventListener五坨 似乎這樣寫會比較乾淨 或者說有概念 總之就是比較酷也比較厲害的感覺 ### 我的看法 不知道有沒有什麼名詞可以形容這個概念 如果是Jquery 我覺得類似手法應該是變成一個Jquery物件群組（不太確定這個名詞） 然後再直接live或on或是trigger好像就可以了！？ ## 程式內容討論 originalTarget跟parentNode可以查MDN看到，不過還是不太了解具體內涵。 大概只知道原理應該就是解除所有，監聽那些「禁止操作」的listener 但搞不太清楚怎麼寫成這樣子 ### 我的看法 感覺如果用Jquery 似乎可以直接unbind就解決了！？ # 總結 以上我覺得這題材是很不錯的討論 目前網路上應該都沒有人願意進行這種探討 但這恐怕卻是最多人接觸JS的其中一環 有點矛盾XD 看是不是有機會可以以此為題材 針對code去重構 分析討論都滿好的～～～ 如果各位同學也好奇的一起＋１ 或是有懂的 也來分享！！ 一起交流這塊 # 後記 這樣慢慢學習的日子感覺我自己真的進步很多 從前連markdown是什麼都不懂 現在都能使用 而且發現根本就很簡單 github 的push也是 都慢慢跳脫舒適圈 才發現以前卡關就是不太去嘗試 希望大家都能越來越厲害！！
網站上的文章開始變多了 需要回頭找文章、查一些關鍵字的時候，可以使用
作為開發人員，我們在終端機上花費了大量時間。有很多有用的 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 應用程式列表，以及一種在您的系統中安裝和保持它們最新的方法。 希望其中一些對你們中的一些人有用:)
身為開發者，一定會常常需要使用 Markdown 格式來寫文件。 Markdown 究竟是什麼？它看起來像純文本，有點像 HTML，但兩者都不是？ 別擔心，我第一次使用 Markdown 時也是有點困惑。但不久之後，我就習慣了，並意識到它真的很酷。到本文結束時，您將掌握日常使用 Markdown 所需了解的一切。 原文出處：https://dev.to/imluka/the-only-markdown-cheatsheet-you-will-ever-need-ccg --- ## 好的，再告訴我一次，什麼是 Markdown，我將在哪裡使用它？ Markdown 是一種輕量級標記語言，可用於格式化純文本文檔。 您可能知道 GitHub 上的每個存儲庫都有自己的 README 文件，其中解釋了存儲庫的用途。每個專案都需要好的文件。 GitHub 的文件是使用 Markdown 編寫的。這正是為什麼有必要知道一些基礎知識。第二個原因是，您最有可能通過吸引人的個人檔案 README 來吸引新的人脈並改善您的網絡。 就是這樣！今天的理論足夠了。來點實用的吧。 --- ## 段落 通過編寫常規文本，您基本上是在寫一個段落。  ## 標題 有 6 種標題變體。後面跟著文字的“**#**”符號的數量表示標題的重要性。  ## 重點 修改文本是如此整潔和容易。您可以將文本設為粗體、斜體、刪除線、突出顯示、下標或上標。  ## 區塊引用 想強調文本的重要性？這樣即可。  ## 圖片 如果您使用的是 GitHub，最好的方法是簡單地將圖像從您的計算機直接拖放到 README 文件中。您還可以建立對圖像的引用並以這種方式顯示它。  ## 連結 與圖像類似，連結也可以直接插入或通過建立引用來插入。您可以建立內聯連結和塊連結。  ## 程式碼 您可以建立內聯和全塊程式碼片段。您還可以定義您在程式碼段中使用的程式語言。全都是使用反引號。  ## 列表 正如您在 HTML 中所做的那樣，Markdown 允許建立有序列表和無序列表。   您還可以混合兩個列表並建立子列表。 **PS.** 盡量不要建立超過兩層的列表。這是最佳實踐。  也可以建立定義列表（術語 - 定義），您可能不會常使用這個，但有機會用到。  ## 表格 顯示排列資料的好方法。使用“**|**”符號分隔列，使用“**:**”符號對齊行內容。  您還可以通過排除外部“**|**”符號而不是使您的程式碼結構良好來建立“混亂”的表格。當然，它仍然有效，但是嘿 → 我們應該始終以正確的方式安排事情。  ## 任務列表 跟踪已完成的任務和需要完成的任務。  ## 腳註 想在文件末尾描述一些東西嗎？使用腳註！  ## 標題編號 您可以為標題指定 ID，以便無論您身在何處都可以直接跳轉到文件的該部分。  ## 水平線 您可以使用星號、連字符或下劃線（*、-、_）來建立水平線。唯一的規則是您必須至少包含符號的三個字符。  ## HTML 您還可以在 Markdown 文件中使用原始 HTML。大多數情況下效果很好，但有時您會遇到一些在使用標準 HTML 時不習慣的差異。使用 CSS 將不起作用。  --- 以上簡單分享，希望對您有幫助！
使用這些單行程式碼將您的 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) ``` --- 以上簡單分享，希望對您有幫助！
讓我總結說明一下，老方法、新方法的關鍵思維差異： - 在老方法中，工程師眼中主要關心 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
## 課程目標 繼續熟悉 data model 的觀念 ## 課程內容 有了 data model 與 render function 之後，還有一個很大的好處 就是當應用程式的狀態，作為資料，需要跟外部溝通時，也很好用 直接把 data model 轉換為字串，傳出去就可以了 在跟第三方程式溝通、或者要儲存到資料庫、或者某種儲存機制的時候，都會用到 將 data model 轉為字串這種行為，我們叫：資料序列化（serialization） 有了序列化資料，要接著轉換回來，變成程式可用的資料，也很容易，我們叫：反序列化（deserialization） ## 課後作業 接續上一課作業，這次來實作「儲存」按鈕 請在「匯出」按鈕旁邊，增加一個「儲存」按鈕，讓待辦事項在頁面重新整理之後，還可以繼續使用 按下按鈕之後，使用 local storage 儲存待辦事項資料，並跳出 alert 提示「儲存成功！」 頁面載入的時候，檢查 local storage，有資料的話，就復原到畫面上 過程中，不能更新 DOM，只能更新 data model 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠從陣列刪除元素 認識 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> ``` 做出以上功能，你就完成這次的課程目標了！
>最近在忙著實作我的一些小項目，沒有上來發文，但還是一直學習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 各位都應該去點個讚！！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
