Svelte 和 Sapper 實戰 Svelte and Sapper in Action
Mark Volkmann 顏宇 周軼 王威 譯
- 出版商: 清華大學
- 出版日期: 2022-01-01
- 定價: $708
- 售價: 8.5 折 $602
- 語言: 簡體中文
- 頁數: 408
- ISBN: 7302595151
- ISBN-13: 9787302595151
- 此書翻譯自: Svelte and Sapper in Action
立即出貨 (庫存 < 3)
買這商品的人也買了...
-
$250命令行中的數據科學 (Data Science at the Command Line:Facing the Future with Time-Tested Tools)
-
$699$552 -
$500$450 -
$750$638 -
$690$587 -
$680$537 -
$680$537 -
$560$437 -
$500$395 -
$480$374 -
$580$493 -
$520$406 -
$620$484 -
$780$616 -
$564雲原生安全:攻防實踐與體系構建
-
$400$316 -
$600$570 -
$800$624 -
$720$562 -
$305React 基礎教程
-
$551現代 JavaScript 庫開發:原理、技術與實戰
-
$479$455 -
$580$458 -
$580$458 -
$417LangChain實戰:大模型應用開發實例
相關主題
商品描述
主要內容 ●創建 Svelte組件 ●通過store管理共享數據 ●配置頁面路由 ●調試、測試和部署Svelte 應用程序 ●使用Sapper開發動態網站和靜態網站
作者簡介
R. Mark Volkmann從1996年開始就提供軟件諮詢和培訓服務,目前是位於聖路易斯的Object Computing公司的合作人。作為一名資深的諮詢顧問,Mark為很多公司提供JavaScript、de.js、Svelte、React、Vue、Angular等方面的幫助,創建並講授了許多課程,包括React、Vue、AngularJS、de.js、jQuery、JavaScript、HTML5、CSS3、Ruby、Java和XML。他經常面向聖路易斯地區的用戶發表演講,並出席各種會議,包括rdic.js、Jfokus、NDC Oslo、Strange Loop、MidwestJS、 Fluff Just Stuff和XML DevCon。 Mark長期撰寫各類關於軟件開發的文章,這些文章收錄在https://objectcomputing.com/resources/publications/mark-volkmann。
在業餘時間,Mark愛好跑步,已經在39個州參加了49場馬拉鬆比賽。
目錄大綱
第Ⅰ部分 起步
第1章 初識Svelte 2
1.1 Svelte介紹 3
1.1.1 為什麼選擇Svelte 3
1.1.2 重新思考響應式設計 7
1.1.3 Svelte的缺點 9
1.1.4 Svelte原理 9
1.1.5 Svelte“消失”了? 11
1.2 Sapper介紹 11
1.2.1 為什麼選擇Sapper? 11
1.2.2 Sapper的工作方式 13
1.2.3 Sapper適用的場景 13
1.2.4 Sapper不適用的場景 13
1.3 Svelte Native介紹 13
1.4 Svelte與其他框架對比 14
1.4.1 Angular 14
1.4.2 React 14
1.4.3 Vue 14
1.5 開發工具 15
1.6 小結 15
第2章 個Svelte應用程序 16
2.1 Svelte REPL 16
2.1.1 Svelte REPL的使用 17
2.1.2 個REPL應用程序 18
2.1.3 保存REPL應用程序 22
2.1.4 分享REPL應用程序 24
2.1.5 REPL URL 24
2.1.6 導出REPL應用程序 24
2.1.7 引用npm包 25
2.1.8 REPL限制 25
2.1.9 CodeSandbox 26
2.2 在REPL之外開發 26
2.2.1 npx degit入門 27
2.2.2 package.json 28
2.2.3 關鍵代碼 29
2.2.4 你的 個本地Svelte應用程序 31
2.3 獎金應用程序 32
2.4 小結 36
第Ⅱ部分 深入探討Svelte
第3章 創建組件 38
3.1 .svelte文件內容 39
3.2 組件標記 39
3.3 組件名稱 42
3.4 組件樣式 42
3.5 CSS特異性 43
3.6 作用域樣式和全局樣式 45
3.7 使用CSS預處理器 47
3.8 組件邏輯 47
3.9 組件狀態 49
3.10 響應式語句 49
3.11 模塊上下文 52
3.12 構建自定義組件 53
3.13 構建Travel Packing應用程序 54
3.14 小結 57
第4章 塊結構 59
4.1 使用{#if}條件邏輯 59
4.2 使用{#each}迭代 61
4.3 使用{#await}處理promise 62
4.4 構建Travel Packing應用程序 65
4.4.1 Item組件 66
4.4.2 實用函數 67
4.4.3 Category組件 68
4.4.4 Checklist組件 70
4.4.5 App組件 73
4.4.6 運行應用程序 74
4.5 小結 75
第5章 組件通信 76
5.1 組件通信方式 77
5.2 props 77
5.2.1 屬性通過export傳入 77
5.2.2 屬性改變時的響應 79
5.2.3 屬性類型 80
5.2.4 指令 81
5.2.5 表單元素中的bind指令 81
5.2.6 bind:this 84
5.2.7 使用bind導出屬性 85
5.3 slot 89
5.4 事件 90
5.4.1 事件派發 90
5.4.2 事件轉發 92
5.4.3 事件修飾符 92
5.5 context 92
5.6 構建Travel Packing應用程序 94
5.7 小結 97
第6章 store 98
6.1 可寫store 98
6.2 可讀store 100
6.3 在合適的地方定義store 100
6.4 使用store 101
6.5 派生store 107
6.6 自定義store 108
6.7 結合類使用store 109
6.8 持久化store 113
6.9 構建Travel Packing應用程序 114
6.10 小結 114
第7章 DOM交互 115
7.1 插入HTML 115
7.2 action 118
7.3 tick函數 119
7.4 實現對話框組件 122
7.5 拖曳 125
7.6 繼續構建Travel Packing應用程序 127
7.7 小結 129
第8章 生命週期函數 130
8.1 安裝 130
8.2 onMount生命週期函數 132
8.2.1 移動焦點 132
8.2.2 檢索來自API服務的數據 132
8.3 onDestroy生命週期函數 133
8.4 beforeUpdate生命週期函數 135
8.5 afterUpdate生命週期函數 136
8.6 使用輔助函數 137
8.7 進一步構建Travel Packing應用程序 139
8.8 小結 139
第9章 客戶端路由 140
9.1 手動路由 140
9.2 hash路由 148
9.3 使用page.js庫 150
9.4 結合page.js使用路徑參數和查詢參數 151
9.5 完善Travel Packing應用程序 155
9.6 小結 156
第10章 動畫 157
10.1 緩動函數 158
10.2 svelte/animation包 158
10.3 svelte/motion包 160
10.4 svelte/transition包 164
10.5 fade過渡效果和flip動畫效果 165
10.6 crossfade過渡效果 167
10.7 draw過渡效果 169
10.8 自定義過渡效果 170
10.9 transition與in和out 172
10.10 過渡事件 172
10.11 為Travel Packing應用程序添加動畫效果 173
10.12 小結 175
第11章 調試 176
11.1 @debug標籤 176
11.2 響應式語句 179
11.3 Svelte開發者工具 179
11.4 小結 182
第12章 測試 183
12.1 使用Jest進行單元測試 184
12.1.1 為Todo應用程序添加單元測試 186
12.1.2 為Travel Packing應用程序增加單元測試 188
12.2 使用Cypress執行端到端測試 193
12.2.1 對Todo應用程序執行端到端測試 194
12.2.2 對Travle Packing應用程序執行端到端測試 196
12.3 無障礙可訪問性測試 200
12.3.1 Svelte compiler 201
12.3.2 Lighthouse 201
12.3.3 axe 204
12.3.4 WAVE 206
12.4 使用Storybook展示並調試組件 208
12.5 小結 216
第13章 部署 217
13.1 使用HTTP服務器部署Sevlte應用程序 217
13.2 Netlify使用 218
13.2.1 通過Netlify頁面部署應用程序 218
13.2.2 通過Netlify命令行部署應用程序 219
13.2.3 Netlify收費計劃 221
13.3 Vercel使用 221
13.3.1 通過Vercel頁面部署應用程序 221
13.3.2 通過Vercel命令行部署應用程序 222
13.3.3 Vercel收費計劃 222
13.4 Docker使用 223
13.5 小結 223
第14章 Svelte高級特性 224
14.1 表單校驗 225
14.2 使用CSS框架 228
14.3 特殊元素 232
14.4 引用JSON文件 235
14.5 創建組件庫 236
14.6 Web Components 237
14.7 小結 241
第Ⅲ部分 深入探討Sapper
第15章 你的 個Sapper應用程序 244
15.1 創建一個全新的Sapper應用程序 245
15.2 使用Sapper重新開發購物應用程序 247
15.3 小結 250
第16章 Sapper應用程序 251
16.1 Sapper項目的文件結構 252
16.2 頁面路由 254
16.3 頁面佈局 256
16.4 錯誤處理 258
16.5 在服務端和客戶端運行代碼 258
16.6 Fetch API包裝器 259
16.7 預加載 259
16.8 預請求 262
16.9 代碼分割 263
16.10 構建Sapper版本的Travel Packing應用程序 264
16.11 小結 267
第17章 Sapper服務端路由 268
17.1 服務端路由的源文件 269
17.2 服務端路由函數 269
17.3 一個CRUD的例子 270
17.4 切換至Express 277
17.5 構建Travel Packing應用程序 278
17.6 小結 284
第18章 使用Sapper導出靜態站點 285
18.1 Sapper的細節 286
18.2 何時使用導出功能 286
18.3 應用程序示例 287
18.4 小結 295
第19章 Sapper的離線支持 296
19.1 service worker概述 297
19.2 緩存策略 298
19.3 Sapper service worker配置 300
19.4 service worker事件 301
19.5 在Chrome中管理
service worker 302
19.6 在Sapper服務器中開啟HTTPS 306
19.7 驗證離線功能 307
19.8 構建Travel Packing應用程序 308
19.9 小結 312
第Ⅳ部分 Svelte和Sapper的其他相關知識
第20章 預處理器 314
20.1 自定義預處理器 315
20.2 svelte-preprocess包 317
20.2.1 auto-preprocessing模式 317
20.2.2 外部文件 318
20.2.3 全局樣式 319
20.2.4 使用Sass 320
20.2.5 使用TypeScript 320
20.2.6 VS Code提示 322
20.3 使用Markdown 322
20.4 使用多個預處理器 324
20.5 圖像壓縮 325
20.6 小結 325
第21章 Svelte Native 326
21.1 內置組件 327
21.1.1 展示組件 327
21.1.2 表單組件 328
21.1.3 行為組件 328
21.1.4 對話框組件 329
21.1.5 佈局組件 329
21.1.6 導航組件 331
21.2 Svelte Native入門 332
21.3 本地開發Svelte Native應用程序 333
21.4 NativeScript樣式實現 334
21.5 預定義NativeScript CSS類 335
21.6 NativeScript 主題 337
21.7 綜合示例 337
21.8 NativeScript UI組件庫 353
21.9 Svelte Native的問題 357
21.10 小結 358
附錄A 資源 359
附錄B 調用REST服務 365
附錄C MongoDB 368
附錄D Svelte的ESLint配置 375
附錄E 在Svelte中使用Prettier 377
附錄F VS Code 379
附錄G Snowpack 383