iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

不用前端框架 手把手打造基礎SPA網站 系列

主要分享近來研究的成果, 運用HTML+CSS+Javascript, 搭配NPM套件管理工具及Webpack網頁打包工具, 從淺入深進行前端開發, 並手動實作一個SPA網站.

鐵人鍊成 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文
DAY 11

[DAY11]Webpack自動化打包工具

前言 開頭還是不免俗的來聊聊前端這幾年的變化,在這個大前端時代,除了要會HTML/CSS/JS這些語言的基礎知識,前端工程師也要學會使用自動化工具,來幫助開發加...

2020-09-25 ‧ 由 yellow_river 分享
DAY 12

[DAY12]無痛模組化Javascript,匯出引入so easy

相信大家應該都有這樣的經驗,當同一隻JS裡程式碼越寫越多,維護起來是一件很頭痛的事。如果將一隻JS拆分多個檔案出來,雖然是拆開了,但相互調用變數只能透過全域變數...

2020-09-26 ‧ 由 yellow_river 分享
DAY 13

[DAY13]手動打造SPA - 環境初始化建置

經過前面漫長的鋪陳,差不多是時候來進行SPA完整的實做了,接下來我們就來試試用Node搭配原生JS建立單頁應用網站吧! 建立專案 這邊我們先新建一個專案資料夾,...

2020-09-27 ‧ 由 yellow_river 分享
DAY 14

[DAY14]手動打造SPA - 建立Component

上一篇我們使用Node建立了基本的開發環境與安裝套件後,今天就來建立元件(Component)吧!前面有提到SPA render的原理,以及建立Componen...

2020-09-28 ‧ 由 yellow_river 分享
DAY 15

[DAY15]手動打造SPA - 建立Router與Route(上篇)

昨天我們建立了Component做為SPA裡的頁面之後,再來要建立一種方式,可以動態判斷網址與對應的頁面元件,SPA中的路由(Router)與路徑(Route)...

2020-09-29 ‧ 由 yellow_river 分享
DAY 16

[DAY16]手動打造SPA - 建立Router與Route(下篇)

大家好,昨天我們建立了Route並設定好路徑與匹配對應的元件,今天目標要來繼續完成Router。Router作為判斷符合設定的路徑並匹配對應的Component...

2020-09-30 ‧ 由 yellow_river 分享
DAY 17

[DAY17]進階應用 - 幫你的SPA套上Bootstrap

前面我們以原生Javascript手動完成SPA的基礎架構,從建立Component,到設定Route與Router,並搭配Webpack進行模組化的開發。前面...

2020-10-01 ‧ 由 yellow_river 分享
DAY 18

[DAY18]進階應用 - SPA簡易生命週期實現

什麼是生命週期 在進入這個主題前,首先需要了解什麼是網頁的生命週期。在以往傳統網頁,每頁都是獨立分開的個體,生命週期的起算,從網頁開始讀取,到DOM(Docum...

2020-10-02 ‧ 由 yellow_river 分享
DAY 19

[DAY19]進階應用 - 元件內部State的應用

什麼是State 當我們在設計某些功能時,會需要把值暫時保存起來並存至變數供日後使用,state就像component裡的變數,當UI要顯示某個state,就可...

2020-10-03 ‧ 由 yellow_river 分享
DAY 20

[DAY20]進階應用 - 監聽事件的處理(上篇)

今天要來談談SPA監聽事件的處理,由於篇幅的關係,文章分成上下兩篇,那麼就開始今天的主題吧。我們知道Javascript可以監聽瀏覽器事件,而且可以針對不同事件...

2020-10-04 ‧ 由 yellow_river 分享