Svelte和Sapper實戰(zhàn)（Web開發(fā)與設計）

第Ⅰ部分  起步  
第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  開發(fā)工具   15
1.6  小結(jié)   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之外開發(fā)   26
2.2.1  npx degit入門   27
2.2.2  package.json   28
2.2.3  關(guān)鍵代碼   29
2.2.4  你的個本地Svelte應用程序   31
2.3  獎金應用程序   32
2.4  小結(jié)   36
第Ⅱ部分  深入探討Svelte
第3章  創(chuàng)建組件   38
3.1  .svelte文件內(nèi)容   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  組件狀態(tài)   49
3.10  響應式語句   49
3.11  模塊上下文   52
3.12  構(gòu)建自定義組件   53
3.13  構(gòu)建Travel Packing應用程序   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應用程序   65
4.4.1  Item組件   66
4.4.2  實用函數(shù)   67
4.4.3  Category組件   68
4.4.4  Checklist組件   70
4.4.5  App組件   73
4.4.6  運行應用程序   74
4.5  小結(jié)   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  事件派發(fā)   90
5.4.2  事件轉(zhuǎn)發(fā)   92
5.4.3  事件修飾符   92
5.5  context   92
5.6  構(gòu)建Travel Packing應用程序   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應用程序   114
6.10  小結(jié)   114
第7章  DOM交互   115
7.1  插入HTML   115
7.2  action   118
7.3  tick函數(shù)   119
7.4  實現(xiàn)對話框組件   122
7.5  拖曳   125
7.6  繼續(xù)構(gòu)建Travel Packing應用程序   127
7.7  小結(jié)   129
第8章  生命周期函數(shù)   130
8.1  安裝   130
8.2  onMount生命周期函數(shù)   132
8.2.1  移動焦點   132
8.2.2  檢索來自API服務的數(shù)據(jù)   132
8.3  onDestroy生命周期函數(shù)   133
8.4  beforeUpdate生命周期函數(shù)   135
8.5  afterUpdate生命周期函數(shù)   136
8.6  使用輔助函數(shù)   137
8.7  進一步構(gòu)建Travel Packing應用程序   139
8.8  小結(jié)   139
第9章  客戶端路由   140
9.1  手動路由   140
9.2  hash路由   148
9.3  使用page.js庫   150
9.4  結(jié)合page.js使用路徑參數(shù)和查詢參數(shù)   151
9.5  完善Travel Packing應用程序   155
9.6  小結(jié)   156
第10章  動畫   157
10.1  緩動函數(shù)   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  小結(jié)   175
第11章  調(diào)試   176
11.1  @debug標簽   176
11.2  響應式語句   179
11.3  Svelte開發(fā)者工具   179
11.4  小結(jié)   182
第12章  測試   183
12.1  使用Jest進行單元測試   184
12.1.1  為Todo應用程序添加單元測試   186
12.1.2  為Travel Packing應用程序增加單元測試   188
12.2  使用Cypress執(zhí)行端到端測試   193
12.2.1  對Todo應用程序執(zhí)行端到端測試   194
12.2.2  對Travle Packing應用程序執(zhí)行端到端測試   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展示并調(diào)試組件   208
12.5  小結(jié)   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  小結(jié)   223
第14章  Svelte高級特性   224
14.1  表單校驗   225
14.2  使用CSS框架   228
14.3  特殊元素   232
14.4  引用JSON文件   235
14.5  創(chuàng)建組件庫   236
14.6  Web Components   237
14.7  小結(jié)   241
第Ⅲ部分  深入探討Sapper   
第15章  你的個Sapper應用程序   244
15.1  創(chuàng)建一個全新的Sapper應用程序   245
15.2  使用Sapper重新開發(fā)購物應用程序   247
15.3  小結(jié)   250
第16章  Sapper應用程序   251
16.1  Sapper項目的文件結(jié)構(gòu)   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  構(gòu)建Sapper版本的Travel Packing應用程序   264
16.11  小結(jié)   267
第17章  Sapper服務端路由   268
17.1  服務端路由的源文件   269
17.2  服務端路由函數(shù)   269
17.3  一個CRUD的例子   270
17.4  切換至Express   277
17.5  構(gòu)建Travel Packing應用程序   278
17.6  小結(jié)   284
第18章  使用Sapper導出靜態(tài)站點   285
18.1  Sapper的細節(jié)   286
18.2  何時使用導出功能   286
18.3  應用程序示例   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服務器中開啟HTTPS   306
19.7  驗證離線功能   307
19.8  構(gòu)建Travel Packing應用程序   308
19.9  小結(jié)   312
第Ⅳ部分  Svelte和Sapper的其他相關(guān)知識
第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  小結(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  對話框組件   329
21.1.5  布局組件   329
21.1.6  導航組件   331
21.2  Svelte Native入門   332
21.3  本地開發(fā)Svelte Native應用程序   333
21.4  NativeScript樣式實現(xiàn)   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  小結(jié)   358
附錄A  資源   359
附錄B  調(diào)用REST服務   365
附錄C  MongoDB   368
附錄D  Svelte的ESLint配置   375
附錄E  在Svelte中使用Prettier   377
附錄F  VS Code   379
附錄G  Snowpack   383