Svelte和Sapper實(shí)戰(zhàn)（Web開(kāi)發(fā)與設(shè)計(jì)）

第Ⅰ部分  起步  
第1章  初識(shí)Svelte   2
1.1  Svelte介紹   3
1.1.1  為什么選擇Svelte   3
1.1.2  重新思考響應(yīng)式設(shè)計(jì)   7
1.1.3  Svelte的缺點(diǎn)   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適用的場(chǎng)景   13
1.2.4  Sapper不適用的場(chǎng)景   13
1.3  Svelte Native介紹   13
1.4  Svelte與其他框架對(duì)比   14
1.4.1  Angular   14
1.4.2  React   14
1.4.3  Vue   14
1.5  開(kāi)發(fā)工具   15
1.6  小結(jié)   15
第2章  個(gè)Svelte應(yīng)用程序   16
2.1  Svelte REPL   16
2.1.1  Svelte REPL的使用   17
2.1.2  個(gè)REPL應(yīng)用程序   18
2.1.3  保存REPL應(yīng)用程序   22
2.1.4  分享REPL應(yīng)用程序   24
2.1.5  REPL URL   24
2.1.6  導(dǎo)出REPL應(yīng)用程序   24
2.1.7  引用npm包   25
2.1.8  REPL限制   25
2.1.9  CodeSandbox   26
2.2  在REPL之外開(kāi)發(fā)   26
2.2.1  npx degit入門   27
2.2.2  package.json   28
2.2.3  關(guān)鍵代碼   29
2.2.4  你的個(gè)本地Svelte應(yīng)用程序   31
2.3  獎(jiǎng)金應(yīng)用程序   32
2.4  小結(jié)   36
第Ⅱ部分  深入探討Svelte
第3章  創(chuàng)建組件   38
3.1  .svelte文件內(nèi)容   39
3.2  組件標(biāo)記   39
3.3  組件名稱   42
3.4  組件樣式   42
3.5  CSS特異性   43
3.6  作用域樣式和全局樣式   45
3.7  使用CSS預(yù)處理器   47
3.8  組件邏輯   47
3.9  組件狀態(tài)   49
3.10  響應(yīng)式語(yǔ)句   49
3.11  模塊上下文   52
3.12  構(gòu)建自定義組件   53
3.13  構(gòu)建Travel Packing應(yīng)用程序   54
3.14  小結(jié)   57
第4章  塊結(jié)構(gòu)   59
4.1  使用{#if}條件邏輯   59
4.2  使用{#each}迭代   61
4.3  使用{#await}處理promise   62
4.4  構(gòu)建Travel Packing應(yīng)用程序   65
4.4.1  Item組件   66
4.4.2  實(shí)用函數(shù)   67
4.4.3  Category組件   68
4.4.4  Checklist組件   70
4.4.5  App組件   73
4.4.6  運(yùn)行應(yīng)用程序   74
4.5  小結(jié)   75
第5章  組件通信   76
5.1  組件通信方式   77
5.2  props   77
5.2.1  屬性通過(guò)export傳入   77
5.2.2  屬性改變時(shí)的響應(yīng)   79
5.2.3  屬性類型   80
5.2.4  指令   81
5.2.5  表單元素中的bind指令   81
5.2.6  bind:this   84
5.2.7  使用bind導(dǎo)出屬性   85
5.3  slot   89
5.4  事件   90
5.4.1  事件派發(fā)   90
5.4.2  事件轉(zhuǎn)發(fā)   92
5.4.3  事件修飾符   92
5.5  context   92
5.6  構(gòu)建Travel Packing應(yīng)用程序   94
5.7  小結(jié)   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  結(jié)合類使用store   109
6.8  持久化store   113
6.9  構(gòu)建Travel Packing應(yīng)用程序   114
6.10  小結(jié)   114
第7章  DOM交互   115
7.1  插入HTML   115
7.2  action   118
7.3  tick函數(shù)   119
7.4  實(shí)現(xiàn)對(duì)話框組件   122
7.5  拖曳   125
7.6  繼續(xù)構(gòu)建Travel Packing應(yīng)用程序   127
7.7  小結(jié)   129
第8章  生命周期函數(shù)   130
8.1  安裝   130
8.2  onMount生命周期函數(shù)   132
8.2.1  移動(dòng)焦點(diǎn)   132
8.2.2  檢索來(lái)自API服務(wù)的數(shù)據(jù)   132
8.3  onDestroy生命周期函數(shù)   133
8.4  beforeUpdate生命周期函數(shù)   135
8.5  afterUpdate生命周期函數(shù)   136
8.6  使用輔助函數(shù)   137
8.7  進(jìn)一步構(gòu)建Travel Packing應(yīng)用程序   139
8.8  小結(jié)   139
第9章  客戶端路由   140
9.1  手動(dòng)路由   140
9.2  hash路由   148
9.3  使用page.js庫(kù)   150
9.4  結(jié)合page.js使用路徑參數(shù)和查詢參數(shù)   151
9.5  完善Travel Packing應(yīng)用程序   155
9.6  小結(jié)   156
第10章  動(dòng)畫   157
10.1  緩動(dòng)函數(shù)   158
10.2  svelte/animation包   158
10.3  svelte/motion包   160
10.4  svelte/transition包   164
10.5  fade過(guò)渡效果和flip動(dòng)畫效果   165
10.6  crossfade過(guò)渡效果   167
10.7  draw過(guò)渡效果   169
10.8  自定義過(guò)渡效果   170
10.9  transition與in和out   172
10.10  過(guò)渡事件   172
10.11  為Travel Packing應(yīng)用程序添加動(dòng)畫效果   173
10.12  小結(jié)   175
第11章  調(diào)試   176
11.1  @debug標(biāo)簽   176
11.2  響應(yīng)式語(yǔ)句   179
11.3  Svelte開(kāi)發(fā)者工具   179
11.4  小結(jié)   182
第12章  測(cè)試   183
12.1  使用Jest進(jìn)行單元測(cè)試   184
12.1.1  為Todo應(yīng)用程序添加單元測(cè)試   186
12.1.2  為Travel Packing應(yīng)用程序增加單元測(cè)試   188
12.2  使用Cypress執(zhí)行端到端測(cè)試   193
12.2.1  對(duì)Todo應(yīng)用程序執(zhí)行端到端測(cè)試   194
12.2.2  對(duì)Travle Packing應(yīng)用程序執(zhí)行端到端測(cè)試   196
12.3  無(wú)障礙可訪問(wèn)性測(cè)試   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展示并調(diào)試組件   208
12.5  小結(jié)   216
第13章  部署   217
13.1  使用HTTP服務(wù)器部署Sevlte應(yīng)用程序   217
13.2  Netlify使用   218
13.2.1  通過(guò)Netlify頁(yè)面部署應(yīng)用程序   218
13.2.2  通過(guò)Netlify命令行部署應(yīng)用程序   219
13.2.3  Netlify收費(fèi)計(jì)劃   221
13.3  Vercel使用   221
13.3.1  通過(guò)Vercel頁(yè)面部署應(yīng)用程序   221
13.3.2  通過(guò)Vercel命令行部署應(yīng)用程序   222
13.3.3  Vercel收費(fèi)計(jì)劃   222
13.4  Docker使用   223
13.5  小結(jié)   223
第14章  Svelte高級(jí)特性   224
14.1  表單校驗(yàn)   225
14.2  使用CSS框架   228
14.3  特殊元素   232
14.4  引用JSON文件   235
14.5  創(chuàng)建組件庫(kù)   236
14.6  Web Components   237
14.7  小結(jié)   241
第Ⅲ部分  深入探討Sapper   
第15章  你的個(gè)Sapper應(yīng)用程序   244
15.1  創(chuàng)建一個(gè)全新的Sapper應(yīng)用程序   245
15.2  使用Sapper重新開(kāi)發(fā)購(gòu)物應(yīng)用程序   247
15.3  小結(jié)   250
第16章  Sapper應(yīng)用程序   251
16.1  Sapper項(xiàng)目的文件結(jié)構(gòu)   252
16.2  頁(yè)面路由   254
16.3  頁(yè)面布局   256
16.4  錯(cuò)誤處理   258
16.5  在服務(wù)端和客戶端運(yùn)行代碼   258
16.6  Fetch API包裝器   259
16.7  預(yù)加載   259
16.8  預(yù)請(qǐng)求   262
16.9  代碼分割   263
16.10  構(gòu)建Sapper版本的Travel Packing應(yīng)用程序   264
16.11  小結(jié)   267
第17章  Sapper服務(wù)端路由   268
17.1  服務(wù)端路由的源文件   269
17.2  服務(wù)端路由函數(shù)   269
17.3  一個(gè)CRUD的例子   270
17.4  切換至Express   277
17.5  構(gòu)建Travel Packing應(yīng)用程序   278
17.6  小結(jié)   284
第18章  使用Sapper導(dǎo)出靜態(tài)站點(diǎn)   285
18.1  Sapper的細(xì)節(jié)   286
18.2  何時(shí)使用導(dǎo)出功能   286
18.3  應(yīng)用程序示例   287
18.4  小結(jié)   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服務(wù)器中開(kāi)啟HTTPS   306
19.7  驗(yàn)證離線功能   307
19.8  構(gòu)建Travel Packing應(yīng)用程序   308
19.9  小結(jié)   312
第Ⅳ部分  Svelte和Sapper的其他相關(guān)知識(shí)
第20章  預(yù)處理器   314
20.1  自定義預(yù)處理器   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  使用多個(gè)預(yù)處理器   324
20.5  圖像壓縮   325
20.6  小結(jié)   325
第21章  Svelte Native   326
21.1  內(nèi)置組件   327
21.1.1  展示組件   327
21.1.2  表單組件   328
21.1.3  行為組件   328
21.1.4  對(duì)話框組件   329
21.1.5  布局組件   329
21.1.6  導(dǎo)航組件   331
21.2  Svelte Native入門   332
21.3  本地開(kāi)發(fā)Svelte Native應(yīng)用程序   333
21.4  NativeScript樣式實(shí)現(xiàn)   334
21.5  預(yù)定義NativeScript CSS類   335
21.6  NativeScript 主題   337
21.7  綜合示例   337
21.8  NativeScript UI組件庫(kù)   353
21.9  Svelte Native的問(wèn)題   357
21.10  小結(jié)   358
附錄A  資源   359
附錄B  調(diào)用REST服務(wù)   365
附錄C  MongoDB   368
附錄D  Svelte的ESLint配置   375
附錄E  在Svelte中使用Prettier   377
附錄F  VS Code   379
附錄G  Snowpack   383