Huli's Blog

Learning by sharing

Lidemy 鋰學院是一個為初學者而生的線上程式課程平台,希望能以淺顯易懂的教學,帶領初學者更快速地入門程式設計。你可以直接到網站註冊,或者是追蹤 Lidemy 的粉絲專頁,就能搶先得知課程的最新消息

2018-03-10 近況更新

| Comments

這個部落格已經好一陣子沒動了,但因為長期累積下來的文章,其實放著也有不小的流量在
不知道會不會有人疑惑:咦,居然已經這麼久沒發文了,然後想知道這個 blog 的主人現在正在做什麼
下面就來交代一下我的近況以及這個 blog 之後的發展

其實在好一陣子前,就有過要搬離 logdown 的想法了,但因為文章都在這邊所以也懶得搬走
只是在這邊待越久,其實壞處越多
最大的考量應該是 logdown 現在已經是個幾乎沒人在維護的專案了,不知道什麼時候會整個死掉
其實待在這邊風險是很大的

所以我在前陣子把 logdown 的文章都搬到 hexo 去,想說那就自己建個 blog 好了
https://blog.huli.tw/
可是建完之後,發現我不喜歡
我還是比較喜歡 logdown 的介面跟後台
logdown 真的是我用過最喜歡的一個平台,只可惜沒有繼續維護,不然我是絕對不會搬的

後來 Medium 出現了,我就開始在 Medium 上面寫些東西
https://medium.com/@hulitw
不過我認為 Medium 不太適合寫技術文章,因為要放 code 有點麻煩
所以上面都是一些跟程式、科技相關的文章,比較沒有像這個 blog 一樣這麼偏技術

最後呢,我決定把我之後的技術文章都放在 TechBridge 的 blog
https://blog.techbridge.cc/
我跟幾個朋友輪流,每週一個人寫文章,四個人輪下來一個月會有一篇
所以我近期的技術文章都放在那邊了

大概就是這樣
所以這邊應該暫時不會再更新了
想看新的文章的話可以前往 Medium 或者是 TechBrdige
感謝大家

一起用 JavaScript 來複習經典排序法吧!

| Comments

前言

最近剛好上到 CS50 Week3,這一週的主題是:Algorithms,裡面介紹到了幾種經典的排序法,像是選擇排序、泡沫排序、插入排序以及合併排序。

我覺得身為一個軟體工程師,大概一輩子都脫離不了排序了,畢竟這是經典演算法之一嘛!與其每次要面試之前都凌亂的準備,不如現在就整理出一篇,紀錄一下各個排序法的心得,幫自己做個統整。

因此,這一篇將利用 JavaScript 來實作各個經典排序演算法。

這次實做的排序法都會是由小到大排序,並且為了方便起見,每一個排序法「都會直接更改原本的 array」,但如果你不想改到原本的也很簡單,在每一個的函式最開頭加上:arr = arr.slice()複製一份原本的即可。

還有,因為文章裡面比較難放動畫,所以我只能放一些圖片而已,若是想搭配視覺化演算法一起學習的話,我非常推薦 VISUALGO,這網站絕對會讓你對排序的理解度更上一層樓。

DOM 的事件傳遞機制:捕獲與冒泡

| Comments

前言

(補充:感謝 othree 前輩的指點,指出這其實是在講 DOM 裡面事件傳遞的順序,因此把標題以及內文修正,原標題為:JavaScript 的事件傳遞機制:捕獲與冒泡)

今天為大家帶來的內容是 DOM 裡面的事件傳遞機制,而與這些事件相關的程式碼,相信大家應該不太陌生,就是addEventListener, preventDefaultstopPropagation

簡單來說,就是事件在 DOM 裡面傳遞的順序,以及你可以對這些事件做什麼。

為什麼會有「傳遞順序」這一詞呢?假設你有一個ul元素,底下有很多li,代表不同的 item。當你點擊任何一個li的時候,其實你也點擊了ul,因為ul把所有的li都包住了。

假如我在兩個元素上面都加了eventListener,哪一個會先執行?這時候呢,知道事件的執行順序就很重要。

另外,由於某些瀏覽器(沒錯,我就是在說 IE)的機制比較不太一樣,因此那些東西我完全不會提到,有興趣的可以研究文末附的參考資料。

循序漸進理解 HTTP Cache 機制

| Comments

前言

前陣子在研究跟 HTTP Cache 有關的一些東西,看得眼花撩亂,不同的 Header 愈看愈混亂,像是Pragma, Cache-Control, Etag, Last-Modified, Expires 等等。找了許多參考資料閱讀之後才有了比較深刻的理解,想說若是從一個比較不同的角度來理解 Cache,說不定會比較容易了解這些 Header 到底在做什麼。

在之前查的資料裡面,很多篇都是逐一解釋各個 Header 的作用以及參數,而我認為其實參數講多了容易造成初學者混淆,想說怎麼有這麼多奇怪的參數,而且每一個看起來都很像。所以這篇文章嘗試一步一步藉由不同的問題來引導出各個 Header 使用的場景以及出現的目的。還有,因為這篇是給初學者看的,所以不會講到所有的參數。

其實關於 Cache 這一部分,很多網路資源的說法都不太一樣,如果碰到有疑義的地方我會盡量以 RFC 上面寫的標準為主。如果有錯誤的話還麻煩不吝指正,感謝。

輕鬆理解 Ajax 與跨來源請求

| Comments

前言

一般來說在學習寫網頁的時候,最先碰到的會是 HTML 與 CSS,負責把版面刻出來以及美化版面,當基礎打穩之後,會開始學習 JavaScript,試著做出一點互動性的效果。而「互動」除了使用者跟瀏覽器的互動以外,別忘了還有 Client 端跟 Server 端的互動,也就是必須要學會從瀏覽器用 JavaScript 跟後端 Server 拿資料,否則你的網頁資料都只能是寫死的。

這篇的主要預設讀者是網頁前端的初學者,希望能讓本來不太理解怎麼跟 Server 交換資料或是怎麼串 APi 的讀者看完之後,能夠更了解該怎麼跟後端串接。