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