iT邦幫忙

spa相關文章
共有 34 則文章
鐵人賽 自我挑戰組 DAY 29

技術 [DAY29]番外篇-使用fetch傳送表單資料

昨天我們介紹fetch用get方式來請求資料,並將取得的資料轉為JSON格式做運用,今天要來介紹fetch的post方法,用非同步的方式來傳送表單資料。以下開始...

鐵人賽 自我挑戰組 DAY 28

技術 [DAY28]番外篇-使用fetch發送請求

大家好,距離完賽越來越近了,過完最後一天的雙十連假,心情也開始憂鬱了QQ,還好本系列複雜的文章差不多都介紹完了,終於不用再熬夜了。 什麼是fetch? 今天要來...

鐵人賽 自我挑戰組 DAY 27

技術 [DAY27]番外篇-用Javascript在SPA中實做Bootstrap Modal 之二

延續昨日的主題,我們用Javascript搭配Bootstrap,完成了Modal模組化實做Alert Modal(警告視窗),為了延伸更多的互動,今天再來嘗試...

鐵人賽 自我挑戰組 DAY 26

技術 [DAY26]番外篇-用Javascript在SPA中實做Bootstrap Modal

大家好,前幾天實做中有用到Bootstrap UI的Modal(彈出互動視窗)元件,因應這幾年使用者越來越注重UI的精緻程度,所以應用在開發上也會常來取代瀏覽器...

鐵人賽 自我挑戰組 DAY 23

技術 [DAY23]進階應用 - 將網址參數傳入元件

大家好,我們今天來點特別的,前面我們在實做Router的篇章中,成功運用正規表示式比對網址hash的部份,來找出對應的路徑和元件。不過有使用過框架的大大們就知道...

鐵人賽 自我挑戰組 DAY 22

技術 [DAY22]進階應用 - 元件內部共用函式調用

在開發階段通常會建立許許多多的函式來開發功能,為了有效管理程式碼,有時會重複地使用部份函式,所以我們今天要來實做在SPA中,如何管理並使用共用的函式,以下正式開...

鐵人賽 自我挑戰組 DAY 21

技術 [DAY21]進階應用 - 監聽事件的處理(下篇)

大家好,延續昨天的主題,我們希望可以對父層元件body使用新增/移除eventListeners來綁定監聽事件,並且需要一個方法,可以在切換頁面後移除曾經註冊監...

鐵人賽 自我挑戰組 DAY 20

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

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

鐵人賽 自我挑戰組 DAY 19

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

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

鐵人賽 自我挑戰組 DAY 18

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

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

鐵人賽 自我挑戰組 DAY 17

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 15

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

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

鐵人賽 自我挑戰組 DAY 14

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

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

鐵人賽 自我挑戰組 DAY 13

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

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

鐵人賽 自我挑戰組 DAY 12

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

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

鐵人賽 自我挑戰組 DAY 9

技術 [DAY09]小試身手-使用hash做出SPA

大家好,昨天我們用history API來實做簡單的SPA,今天我們要來實做第二種方式,使用location.hash做出SPA。 準備畫面 跟昨天模式一樣,先...

鐵人賽 自我挑戰組 DAY 8

技術 [DAY08]小試身手-使用history做出SPA

大家好,自從開賽已過了一周了,首先給自己一點掌聲,耶呼,大家一起繼續努力吧! 第一周主要聊些SPA的基本概念,今天我們來點有趣的,直接用簡單的範例來試做SPA...

鐵人賽 自我挑戰組 DAY 7

技術 [DAY07]SPA路由的應用(下篇)

各位好,延續昨天的內容,今天要說明如何透過監聽事件,來得知網址產生變化後的行為: 我們知道可以用Javascript讓網址產生了變化,但仔細想想,要怎麼知道在網...

鐵人賽 自我挑戰組 DAY 6

技術 [DAY06]SPA路由的應用(上篇)

大家好,在昨天有提到server side與client side運作的原理,今天我們進一步來談談SPA在路由上是如何應用的,並將搭配實例來說明。 當我們要造訪...

鐵人賽 自我挑戰組 DAY 5

技術 [DAY05]Server Side Render與Client Side Render

我們先前在Day2 3分鐘帶你初步認識SPA 的文章初步介紹過SPA,主要是用前端client side render的方式。另外在前兩天我們也提到了,前端可以...

鐵人賽 自我挑戰組 DAY 4

技術 [DAY04]淺談前端SPA框架-以React為例(下篇)

在了解什麼是render後,傑森從React官網看到另一個範例,有段文字這樣寫道: Component 使你可以將 UI 拆分成獨立且可複用的程式碼 什麼是...

鐵人賽 自我挑戰組 DAY 3

技術 [DAY03]淺談前端SPA框架-以React為例(上篇)

既然要自己寫SPA,我們先來談談前端框架,本文分成上下篇,這邊重點不在教會你使用,而是想告訴你框架做了些什麼,以下用React來當例子: 傑森是一名網頁設計師,...

鐵人賽 自我挑戰組 DAY 2

技術 [DAY02]3分鐘帶你初步認識SPA

近年來SPA在前端已是非常火紅的名詞,英文全名是Single Page Application,中文叫做單頁應用程式,即使你不了解它,應該也聽過一些。 與SPA...

鐵人賽 自我挑戰組 DAY 1

技術 [DAY01]前言-踏上SPA學習之旅

大家好,I am Yellow River,這次是第一次報名自我挑戰賽,題目是:「不用前端框架 手把手打造基礎SPA」。先簡單介紹一下自己,小弟任職過3年網頁設...

鐵人賽 Modern Web DAY 4

技術 Day 04 Inertia.js 的 Hello world

裝完 Laravel 後,我們就要開開心心地開始開發啦!首先第一步就是熟悉的 Laravel Router,把預設的 Welcome 視圖換成 Inertia...

鐵人賽 Modern Web DAY 3

技術 Day 03 初始化 Lightning - 安裝 Laravel & Vue.js & Inertia.js

準備好 Laravel 的開發環境後,就可以開始初始化專案了。 安裝 Laravel 說到 Laravel 最近的大事件,就是 Laravel 8 準備要發布...

鐵人賽 Modern Web DAY 2

技術 Day 02 Inertia.js 是什麼?

Inertia.js 不是框架,也不是要來取代現有的框架。Inertia.js 的本質是個前端的路由套件,透過銜接既有的「前端框架」和「後端框架」,來達到用...

鐵人賽 Modern Web DAY 1

技術 Day 01 為什麼我用 Laravel 寫 SPA 卻可以不寫 API?

2021/03/28: 前言 必須得承認,這個系列真是頻繁出事,用了 Laravel 7,寫到一半升到 8;Vue.js 2.6 升到 3;Tailwind...

鐵人賽 Modern Web DAY 18

技術 18. [FE] 為什麼網站要做成 SPA?SSR 的優點是什麼?

稍有經驗的開發者,可能對最近 SPA,SSR 等術語不太陌生,大概也能知道 SPA 指的是單頁式應用(Single Page Application)、SSR...