目    录

第Ⅰ部分  起步  

第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