本書讀者對(duì)象
《Svelte和Sapper實(shí)戰(zhàn)》一書面向希望提升開發(fā)效率的Web開發(fā)人員。也許你一直在思考是不是有一種更簡(jiǎn)單的開發(fā)方式來開發(fā)Web應(yīng)用程序。恭喜你，答案就在《Svelte和Sapper實(shí)戰(zhàn)》。通過大量代碼示例，你將學(xué)會(huì)如何使用Svelte和Sapper開發(fā)Web應(yīng)用程序。
《Svelte和Sapper實(shí)戰(zhàn)》面向的讀者需要具備一些基本的HTML、CSS和JavaScript知識(shí)。
· 關(guān)于HTML，讀者需要熟悉html、head、link、style、script、body、div、span、p、ol、ul、li、input、textarea和select等元素。
· 關(guān)于CSS，讀者需要理解CSS語法規(guī)則，什么是CSS的級(jí)聯(lián)，了解基本的CSS選擇器(包括元素名、類名、id、繼承關(guān)系)，了解常用的CSS屬性(包括color、font-family、font-size、font-style和font-weight)以及CSS盒模型(content、padding、border和margin)。
· 關(guān)于JavaScript，讀者需要知道變量、字符串、數(shù)組、對(duì)象、函數(shù)、類、promise、解構(gòu)、spread操作符、export和import。
如果你發(fā)現(xiàn)了關(guān)于《Svelte和Sapper實(shí)戰(zhàn)》的任何問題，可以在網(wǎng)絡(luò)上與我們溝通。我希望當(dāng)你讀完《Svelte和Sapper實(shí)戰(zhàn)》時(shí)，能夠發(fā)現(xiàn)Svelte和Sapper的一些與眾不同的地方，并在下一個(gè)項(xiàng)目中嘗試使用它們。
《Svelte和Sapper實(shí)戰(zhàn)》的結(jié)構(gòu)：路線圖
《Svelte和Sapper實(shí)戰(zhàn)》分為四部分，包括21章。
第Ⅰ部分介紹Svelte和Sapper。
· 第1章主要闡述Svelte和Sapper的一些過人之處，在結(jié)尾部分介紹Svelte Native，并與其他主流的Web框架進(jìn)行對(duì)比。此外，還介紹開發(fā)所需的工具。
· 第2章將帶你使用在線工具(REPL)創(chuàng)建個(gè)Svelte應(yīng)用程序。通過這種在線方式構(gòu)建的應(yīng)用程序可以在線保存，并與他人共享代碼，還可將代碼導(dǎo)出到本地繼續(xù)進(jìn)行開發(fā)。此外，還介紹在本地開發(fā)Svelte應(yīng)用程序的步驟。
第Ⅱ部分將深入研究Svelte，并提供大量代碼示例供參考。
· 第3章介紹如何構(gòu)建Svelte組件，包括其中的邏輯、標(biāo)簽和樣式。隨后介紹如何使用響應(yīng)式語句以及模塊上下文來管理組件狀態(tài)。后，將展示一個(gè)自定義組件的示例。
· 第4章涵蓋Svelte的塊結(jié)構(gòu)，包括條件邏輯、迭代、promise異步控制HTML標(biāo)簽等。{#if}實(shí)現(xiàn)了條件邏輯，{#each}實(shí)現(xiàn)了迭代遍歷的功能，{#await}實(shí)現(xiàn)了promise異步功能。
· 第5章將帶你探索組件之間的通信，包括props、雙向綁定、slot、事件和上下文。
· 第6章闡述如何使用store共享組件之間的數(shù)據(jù)。store有四種類型：可讀寫、只讀、派生和自定義。隨后介紹如何使用JavaScript類創(chuàng)建store以及持久化store中的數(shù)據(jù)。
· 第7章展示在Svelte組件中操作DOM的幾種方法，包括插入HTML，使用動(dòng)作獲得DOM元素，在Svelte重新渲染后使用tick函數(shù)手動(dòng)修改DOM。后，將展示一個(gè)對(duì)話框以及實(shí)現(xiàn)拖曳功能的示例。
· 第8章將講解Svelte的生命周期函數(shù)，包括onMount、beforeUpdate、afterUpdate和onDestroy。后，展示一個(gè)基于現(xiàn)有Svelte生命周期函數(shù)自定義新的生命周期函數(shù)的示例。
· 第9章演示為Svelte應(yīng)用程序添加頁面路由的三種方法：手動(dòng)路由、哈希路由以及使用page.js進(jìn)行路由。我們將開發(fā)一個(gè)購物應(yīng)用程序來演示這三種路由。此外，還可使用Sapper實(shí)現(xiàn)路由，相關(guān)內(nèi)容將在第16章詳細(xì)介紹。
· 第10章探討在Svelte中對(duì)于動(dòng)畫的有力支持，詳細(xì)介紹svelte/animate、svelte/motion和svelte/transition這三個(gè)包，以及在兩個(gè)列表之間移動(dòng)列表元素的兩種方式：一種方式使用fade過渡效果和flip動(dòng)畫的組合，另一種方式使用crossfade過渡效果。后討論如何創(chuàng)建自定義動(dòng)畫以及如何使用過渡事件。
· 第11章展示如何調(diào)試Svelte應(yīng)用程序。包括@debug標(biāo)簽、使用console方法調(diào)試響應(yīng)式語句以及配套的瀏覽器調(diào)試插件svelte-devtools。
· 第12章演示Svelte應(yīng)用程序的多種測(cè)試方法。Jest和svelte-testing-library可用來執(zhí)行單元測(cè)試。端到端的測(cè)試可使用Cypress。Svelte還為可訪問性提供了一些測(cè)試手段，如果你想進(jìn)行額外的可訪問性測(cè)試，可采用Lighthouse、axe和WAVE。后，可以使用Storybook展示和操作測(cè)試組件。
· 第13章將帶你探索如何部署Svelte應(yīng)用程序，包括手動(dòng)部署一個(gè)HTTP服務(wù)器，以及如何使用Netlify、VercelNow和Docker。
· 第14章主要介紹Svelte的其他一些知識(shí)點(diǎn)，包括表單驗(yàn)證、CSS變量、使用特殊元素創(chuàng)建Svelte組件庫，以及利用Svelte組件生成Web Components。
第Ⅲ部分將深入研究Sapper。Sapper是一個(gè)基于Svelte的Web應(yīng)用程序開發(fā)框架。
· 第15章將使用Sapper重構(gòu)第9章中的購物應(yīng)用程序，這將是你的個(gè)Sapper應(yīng)用程序。
· 第16章將全面介紹Sapper。首先介紹Sapper應(yīng)用程序的結(jié)構(gòu)，之后是Sapper的一些功能，包括頁面路由、頁面布局、預(yù)加載、預(yù)請(qǐng)求以及代碼分割。
· 第17章將探索Sapper的服務(wù)器路由，通過服務(wù)器路由，我們的項(xiàng)目就不僅是Web應(yīng)用程序的客戶端了，還具備了提供API服務(wù)的能力。你將學(xué)會(huì)創(chuàng)建、查詢、更新、刪除(CRUD)等一系列服務(wù)是如何實(shí)現(xiàn)的。
· 第18章展示如何將Sapper應(yīng)用程序部署成一個(gè)靜態(tài)站點(diǎn)。對(duì)于那些采用HTML作為頁面展示載體的應(yīng)用程序來說，這非常有用。后，將帶你一起實(shí)現(xiàn)一個(gè)類似的應(yīng)用程序，其中包括兩個(gè)頁面，一個(gè)是石頭剪刀布的游戲，另一個(gè)是我家的狗。
· 第19章描述如何使用service worker實(shí)現(xiàn)Sapper的離線功能。將介紹以下內(nèi)容：多種緩存策略；Sapper內(nèi)置service worker的一些細(xì)節(jié)，包括install、activate和fetch等service worker事件；如何啟用HTTPS。后，帶你一起體驗(yàn)Sapper的離線功能是如何發(fā)揮作用的。
第Ⅳ部分將不局限于Svelte和Sapper。
· 第20章將帶你探索對(duì)于高級(jí)語法的預(yù)處理技術(shù)，包括Sass、TypeScript和Markdown，并提供這些預(yù)處理技術(shù)對(duì)應(yīng)的示例。
· 第21章將介紹Svelte Native以及如何使用Svelte和NativeScript來開發(fā)Android端和iOS端的移動(dòng)應(yīng)用程序。我們將利用REPL創(chuàng)建兩個(gè)在線的Svelte Native應(yīng)用程序，使用REPL的好處是并不需要在計(jì)算機(jī)中安裝任何軟件。同時(shí)將提供一個(gè)示例來詳細(xì)解釋顯示、表單、動(dòng)作、對(duì)話框、布局和導(dǎo)航等組件的實(shí)現(xiàn)細(xì)節(jié)，以及如何為Svelte Native組件添加樣式。后，介紹NativeScript UI組件庫，并使用其中的組件RadSideDrawer創(chuàng)建一個(gè)示例應(yīng)用程序。
后一章結(jié)束后我們的學(xué)習(xí)并沒有告一段落！還有七個(gè)附錄在等著你。
· 附錄A整理與Svelte、Sapper和Svelte Native相關(guān)的資料的鏈接。
· 附錄B介紹如何使用Fetch API請(qǐng)求REST服務(wù)。
· 附錄C介紹在第17章中使用過的MongoDB數(shù)據(jù)庫。
· 附錄D介紹如何配置和使用ESLint來檢查應(yīng)用程序中的問題。
· 附錄E介紹如何配置和使用Prettier來格式化Svelte和Sapper應(yīng)用程序中的代碼。
· 附錄F介紹在使用VS Code開發(fā)Svelte和Sapper應(yīng)用程序時(shí)所用到的幾種插件。
· 附錄G介紹如何使用Snowpack構(gòu)建Svelte應(yīng)用程序。Snowpack與傳統(tǒng)的編譯工具(如Webpack、Rollup和Parcel)相比，是一種更高效的構(gòu)建Web應(yīng)用程序的工具。
在《Svelte和Sapper實(shí)戰(zhàn)》中，我們將開發(fā)一個(gè)Travel Packing應(yīng)用程序�！禨velte和Sapper實(shí)戰(zhàn)》中的大部分章節(jié)都圍繞這個(gè)應(yīng)用程序展開討論，并以它為基礎(chǔ)添加對(duì)應(yīng)的功能。
對(duì)于Svelte新手來說，應(yīng)該首先按照順序讀完《Svelte和Sapper實(shí)戰(zhàn)》的第1～8章，這八章涵蓋了Svelte的核心理念。之后可以根據(jù)興趣和需要有選擇地進(jìn)行閱讀。當(dāng)然，如果你有使用Svelte的經(jīng)驗(yàn)，那么可以根據(jù)興趣從《Svelte和Sapper實(shí)戰(zhàn)》的任何章節(jié)開始閱讀。
關(guān)于代碼
可掃描封底二維碼來下載相關(guān)代碼。
《Svelte和Sapper實(shí)戰(zhàn)》中包含了很多用于演示的源代碼，既有通過編號(hào)列舉出來的，也有與正文混排在一起的。上述兩種源代碼會(huì)被格式化為等寬字體。有一些代碼還會(huì)被特意加粗以強(qiáng)調(diào)其與之前章節(jié)中代碼的區(qū)別，比如當(dāng)為之前的代碼添加一段新功能，新功能的代碼就會(huì)被加粗。
有些情況下，源代碼已經(jīng)被重新格式化過了；為適應(yīng)《Svelte和Sapper實(shí)戰(zhàn)》印刷的排版，額外增加了換行符，并重新設(shè)計(jì)了縮進(jìn)。然而在極少數(shù)情況下，換行符和縮進(jìn)也無法解決排版混亂的問題，為此會(huì)增加續(xù)行標(biāo)記(?)來調(diào)整排版。此外，代碼的注釋會(huì)被從代碼清單中刪除，而是在代碼清單外的其他地方標(biāo)注出來，以強(qiáng)調(diào)注釋的重要性。
其他在線資源
附錄A列出了一系列在線資源。其中的大多數(shù)都與Svelte和Sapper有直接關(guān)系，但也有一些涵蓋了適合于所有Web開發(fā)的內(nèi)容。
關(guān)于彩圖
正文中有時(shí)提到界面顏色，由于《Svelte和Sapper實(shí)戰(zhàn)》是黑白印刷，將無法顯示彩色。請(qǐng)讀者在實(shí)際操作過程中從計(jì)算機(jī)屏幕上查看；另外，也可掃描封底二維碼下載彩圖。