網上關於Svelte.js的介紹文章已經有很多了，大多是挨個把功能和使用方法大體介紹一下，想學的話建議從官網學習，官網提供了一個REPL，可以一邊看講解一遍動手學習，語言簡潔準確，絕對是最好的資料。
官網列出其三大優點：
- No virtual DOM ——不使用虛擬DOM
- Write less code ——代碼量少
- Truly reactive —— 真正的響應性
無虛擬DOM
它的特性在這個三大框架極爲流行的時代，光不使用虛擬DOM這一點就已經很特殊了。虛擬DOM作爲React和Vue選擇的解決部分性能問題的方案，的確帶來了很多優勢，但Svelte不採用虛擬DOM的方案，在某些應用場景之下速度甚至要快與虛擬DOM的方案，真是令人驚歎，但他似乎並不能太成爲在其他框架面前特別出衆的理由。
代碼量很少
另一個優點代碼量少，歸功於一些很有思想，很有趣的設計，據我對作者與Svelte相關的一些項目閱讀和總結，作者是在Svelte中推薦一種通過文件引入，作用域，組合形成一種類似其他語言中“類”這個結構效果，這個“類”中聲明的變量即“類”的屬性，函數即“類”的方法。比如下面這段代碼：
const nodeMap = new Map()
let _id = 0
let currentBlock
export function getNode(id) {
return nodeMap.get(id)
}
export function getAllNodes() {
nodeMap.values()
}
const rootNodes = []
export function getRootNodes() {
return rootNodes
}
function addNode(node, target, anchor) {
nodeMap.set(node.id, node)
nodeMap.set(node.detail, node)
let targetNode = nodeMap.get(target)
if (!targetNode || targetNode.parentBlock != node.parentBlock) {
targetNode = node.parentBlock
}
node.parent = targetNode
const anchorNode = nodeMap.get(anchor)
if (targetNode) {
let index = -1
if (anchorNode) index = targetNode.children.indexOf(anchorNode)
if (index != -1) {
targetNode.children.splice(index, 0, node)
} else {
targetNode.children.push(node)
}
} else {
rootNodes.push(node)
}
add(node, anchorNode)
}
這段代碼來自於一個叫做 svelte-listener 的包，是我在閱讀Svelte-devtool的源碼時看到的。看代碼的結構給人的感覺，是不是一種“類”的感覺，有屬性，有get，有add，包括看官網給出的tutorial中的一些實例代碼，比如：
<script>
let count = 0;
$: console.log(`the count is ${count}`);
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
count 是可以作爲一個參數傳入 handleClick() 方法的，只需要改變一下形式爲：
function handleClick(count) {
return count += 1;
}
也可以完成一樣的效果，但是這種設計就很好的減少了一部分工作，達到代碼量更少的目的。
在不引入其它內置方法的前提下，可以相似的對應Vue的 data，props，computed，method幾個屬性。
js，HTML，CSS分離且接近於寫原生代碼，在我看來學習成本是相對較小的。這中設計模式是爲我比較喜歡的Svelte的優勢之一，也就是響應性提供了一些基礎。
響應式編程
Svelte的響應式設計是我比較喜歡的特性之一，依託於 $: 符號的響應設計，雖然這並不是全部，但是很有代表性，類似於Vue.js中 computed 的特性，自動分析依賴的屬性並訂閱，一旦變化會出發一塊域的調用，使用方式非常簡單，基本上這是框架必實現的功能，React和Vue的設計也沒有什麼不好，但是最近的實踐經歷讓我感覺其帶來的負擔是相對較小的。
內置功能
Svelte有意的地方在於提供了一些有意思的內置功能。
如 <svelte:window> <svelte:self> 等特殊標籤。
如motion提供的是一個平滑變化的方法，Transitions提供的是一些簡單的易用的出入場動畫，animation則是提供CSS屬性變換動畫製作方法，Context雖然與其他組件的略有不同但也不用多說。最讓我推崇的其實是內置的Store特性！
Store
Store作爲一種組件間通信需求的解決方案，每個框架都爲此努力，React會有Redux的需求，Vue配套了Vuex，還有如mobx等一系列有設計哲學的狀態管理方案。但是Svelte自己內置了一套Store功能，而且非常好用！！
具體不介紹使用方法，但他的自動訂閱，自定義以及與響應式極好的貼合是真的使一些原本複雜的功能需求變成一些簡單的組合，不存在額外引入組件間通信組件的負擔，這個特性在這些時間內的使用，讓我真的是要吹爆他！！！
相信Svelte一定會流行起來，成爲主流標誌之一的！！！