鐵人檔案
主要分享近來研究的成果, 運用HTML+CSS+Javascript, 搭配NPM套件管理工具及Webpack網頁打包工具, 從淺入深進行前端開發, 並手動實作一個SPA網站.
前言 開頭還是不免俗的來聊聊前端這幾年的變化，在這個大前端時代，除了要會HTML/CSS/JS這些語言的基礎知識，前端工程師也要學會使用自動化工具，來幫助開發加...
相信大家應該都有這樣的經驗，當同一隻JS裡程式碼越寫越多，維護起來是一件很頭痛的事。如果將一隻JS拆分多個檔案出來，雖然是拆開了，但相互調用變數只能透過全域變數...
經過前面漫長的鋪陳，差不多是時候來進行SPA完整的實做了，接下來我們就來試試用Node搭配原生JS建立單頁應用網站吧! 建立專案 這邊我們先新建一個專案資料夾，...
上一篇我們使用Node建立了基本的開發環境與安裝套件後，今天就來建立元件(Component)吧！前面有提到SPA render的原理，以及建立Componen...
昨天我們建立了Component做為SPA裡的頁面之後，再來要建立一種方式，可以動態判斷網址與對應的頁面元件，SPA中的路由(Router)與路徑(Route)...
大家好，昨天我們建立了Route並設定好路徑與匹配對應的元件，今天目標要來繼續完成Router。Router作為判斷符合設定的路徑並匹配對應的Component...
前面我們以原生Javascript手動完成SPA的基礎架構，從建立Component，到設定Route與Router，並搭配Webpack進行模組化的開發。前面...
什麼是生命週期 在進入這個主題前，首先需要了解什麼是網頁的生命週期。在以往傳統網頁，每頁都是獨立分開的個體，生命週期的起算，從網頁開始讀取，到DOM(Docum...
什麼是State 當我們在設計某些功能時，會需要把值暫時保存起來並存至變數供日後使用，state就像component裡的變數，當UI要顯示某個state，就可...
今天要來談談SPA監聽事件的處理，由於篇幅的關係，文章分成上下兩篇，那麼就開始今天的主題吧。我們知道Javascript可以監聽瀏覽器事件，而且可以針對不同事件...
