一杯茶的時(shí)間,上手 Svelte 前端框架
提到前端開發(fā)框架，我相信大家第一時(shí)間想到的就是 Vue、React 和 Angular 三大主流。畢竟它們各個(gè)都是 GitHub 上 10w+ star 的知名項(xiàng)目，每個(gè)前端工程師至少要學(xué)習(xí)其中一個(gè)框架。
但是，最近幾年，一個(gè)新的前端框架逐漸出現(xiàn)在人們眼前，它就是后起之秀『 Svelte 』。目前已經(jīng)接近 4w 個(gè) star，雖然暫時(shí)無法撼動(dòng)三大主流框架的霸主地位，但是其恐怖的 star 增速，值得我們關(guān)注和思考。
Svelte 到底是什么樣的框架？它和三大主流框架有什么不同？為什么發(fā)展如此迅猛？
帶著這些問題，我們一起來學(xué)習(xí)下 Svelte 框架，并用它從 0 到 1，開發(fā)一個(gè)讀書筆記小網(wǎng)站。
可以先通過一分鐘的小視頻簡(jiǎn)單地了解下 Svelte ~
揭開 Svelte 的神秘面紗
按照官網(wǎng)的描述，Svelte 是一種構(gòu)建用戶界面的框架，框架自身具有反應(yīng)性，可以幫助開發(fā)者書寫更精簡(jiǎn)的代碼，開發(fā)出體積更小、更迅速的 App。
使用 Svelte 框架進(jìn)行開發(fā)，需要遵循其特定的語法，編寫 .svelte 后綴的文件。如下是 Svelte 框架的 Hello World 代碼：
你可能會(huì)質(zhì)疑：這不就和 Vue、React 之類的前端框架一樣么？不就是用個(gè)數(shù)據(jù)綁定、抄個(gè) API 和語法風(fēng)格、改個(gè)文件后綴名么？憑什么能獲得 4w 的 star？
其實(shí)，近幾年出現(xiàn)的新前端框架并不少，但都被遮擋在了三座大山下，沒有一個(gè)能夠像 Svelte 一樣在短期內(nèi)得到大量的關(guān)注。
究竟是什么讓 Svelte 框架破圈突圍，劍指 Angular ？
Svelte 新在哪兒？
我們先來看兩張圖，是對(duì) 20 多種前端框架 Demo 項(xiàng)目的性能對(duì)比和評(píng)測(cè)。
第一張圖是對(duì)比各框架開發(fā)的項(xiàng)目的尺寸：
第二張圖是對(duì)比各項(xiàng)目的 Lighthouse 性能評(píng)分：
從上面兩張圖，我們發(fā)現(xiàn)，Svelte 框架無論是在項(xiàng)目尺寸還是性能方面，都表現(xiàn)卓越。一個(gè)用 Svelte 開發(fā)的 Demo 項(xiàng)目竟然僅有 15 KB！怎么會(huì)這么小呢？有黑魔法？
這和 Svelte 獨(dú)特的設(shè)計(jì)思想有關(guān)。基本所有傳統(tǒng)的前端框架，在項(xiàng)目運(yùn)行時(shí)都會(huì)依賴框架本身的代碼，即引入了框架作為 runtime（運(yùn)行時(shí)），因此需要將框架代碼打進(jìn)項(xiàng)目包，占用了一定的包大小。
比如 Vue 項(xiàng)目的包管理文件 package.json 中，將 Vue 作為生產(chǎn)環(huán)境運(yùn)行時(shí)依賴引入。
"dependencies":?{
??"vue":?"^2.6.11"
}
而 Svelte 框架的核心思想在于『 通過靜態(tài)編譯減少框架運(yùn)行時(shí)的代碼量 』（尤雨溪大佬的解釋）。
Svelte 不會(huì)將自己打包進(jìn)項(xiàng)目，而是在編譯打包階段，將 Svelte 組件轉(zhuǎn)換為原生 DOM 操作。因此，使用 Svelte 開發(fā)的項(xiàng)目，并不依賴 runtime，更沒有像 Vue 和 React 中的 Virtual DOM，項(xiàng)目的體積也非常地小。
下面是 Svelte 項(xiàng)目的 package.json 文件，可以發(fā)現(xiàn)，svelte 是被作為開發(fā)時(shí)依賴引入。
"devDependencies":?{
??"svelte":?"^3.0.0"
}
這是 Svelte 和其他前端框架的明顯區(qū)別。與其說是 “新”，倒不如說是回歸原始，返璞歸真。
除了不依賴 runtime 和 Virtual DOM 外，Svelte 另一個(gè) “新” 體現(xiàn)在其自身具有反應(yīng)性，可以輕松地實(shí)現(xiàn)狀態(tài)管理，而無需像 Vue 和 React 框架一樣引入 Vuex 和 Redux 之類的狀態(tài)管理庫。這一點(diǎn)給開發(fā)者提供了極大地便利。
了解了 Svelte 框架的獨(dú)特之處，讓我們趁熱打鐵，做一個(gè)小項(xiàng)目來感受使用 Svelte 進(jìn)行開發(fā)的高效和樂趣~
十分鐘開發(fā)讀書筆記
接下來，我們要開發(fā)一個(gè)讀書筆記，來記錄自己每日的學(xué)習(xí)內(nèi)容。
先分析下需求，讀書筆記需要有如下基本功能：
- 添加讀書筆記
- 展示已添加的讀書筆記
- 刪除某一條讀書筆記
- 導(dǎo)出讀書筆記成 Markdown 格式的文件，并下載至本地
成品效果如下：
體驗(yàn)地址：https://read-note.now.sh/
總共分為四步，順利的話，只用十分鐘就可以開發(fā)完成并部署上線~
1. 啟動(dòng)模板項(xiàng)目
可以通過以下兩種方式下載 Svelte 的模板項(xiàng)目。
方式一
直接下載壓縮包，并手動(dòng)解壓，地址：https://github.com/sveltejs/template/archive/master.zip
方式二
通過 npx 命令創(chuàng)建一個(gè) Svelte 模板項(xiàng)目：
npx?degit?sveltejs/template?svelte-app
下載模板到本地后，進(jìn)入項(xiàng)目目錄，輸入命令安裝依賴：
npm?install
Svelte 框架使用 Rollup 作為 JS 模塊打包工具（也是大佬寫的輪子），依賴安裝完成后，通過控制臺(tái)輸入命令，在本地啟動(dòng)項(xiàng)目：
npm?run?dev
控制臺(tái)看到如下輸出，項(xiàng)目啟動(dòng)成功：
瀏覽器訪問 localhost:5000，可以看到如下界面：
2. 開發(fā)界面
完成項(xiàng)目模板的下載和啟動(dòng)后，開始進(jìn)入讀書筆記界面的開發(fā)。
讀書筆記只有一個(gè)主頁面，先觀察頁面的布局，分為上下兩部分，上方是一張張相同樣式卡片組成的列表，下方是操作面板：
因此，我們只需要開發(fā)兩個(gè)組件，卡片 和 操作面板。然后將多張卡片組成列表放在主頁面上方，操作面板固定在主頁面底部。
在項(xiàng)目 src 目錄下新建幾個(gè) .svelte 文件（Svelte 框架的頁面文件，App.svelte 為模板自帶的主頁面），此時(shí)目錄結(jié)構(gòu)如下：
.svelte 文件的語法結(jié)構(gòu)和 Vue 框架非常類似，由行為、頁面、樣式三部分組成，分別對(duì)應(yīng) JavaScript、HTML、CSS 代碼。一個(gè)標(biāo)準(zhǔn)的 .svelte 文件代碼如下：
<script>
?//?編寫網(wǎng)頁交互行為
script>
<div>
?
div>
<style>
?/*?編寫?CSS?樣式?*/
style>
2.1 開發(fā)卡片組件
讀書筆記的每張卡片都要有標(biāo)題、內(nèi)容和創(chuàng)建日期，還要給卡片編號(hào)，并給不同編號(hào)的卡片加上不同的顏色。當(dāng)鼠標(biāo)移到卡片上時(shí)，出現(xiàn)刪除按鈕。
打開 Card.svelte 文件，先在 script 標(biāo)簽中用 JavaScript 定義幾個(gè)屬性變量（組件內(nèi)唯一）和一個(gè)刪除函數(shù)：
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>