Svelte笔记：必须吹爆的几个理由

网上关于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中的一些实例代码，比如：

	Clicked {count} {count === 1 ? 'time' : 'times'}

count 是可以作为一个参数传入 handleClick() 方法的，只需要改变一下形式为：

	function handleClick(count) {
		return count += 1;
	}

也可以完成一样的效果，但是这种设计就很好的减少了一部分工作，达到代码量更少的目的。

在不引入其它内置方法的前提下，可以相似的对应Vue的 data，props，computed，method几个属性。

js，HTML，CSS分离且接近于写原生代码，在我看来学习成本是相对较小的。这中设计模式是为我比较喜欢的Svelte的优势之一，也就是响应性提供了一些基础。

响应式编程

Svelte的响应式设计是我比较喜欢的特性之一，依托于 $: 符号的响应设计，虽然这并不是全部，但是很有代表性，类似于Vue.js中 computed 的特性，自动分析依赖的属性并订阅，一旦变化会出发一块域的调用，使用方式非常简单，基本上这是框架必实现的功能，React和Vue的设计也没有什么不好，但是最近的实践经历让我感觉其带来的负担是相对较小的。

内置功能

Svelte有意的地方在于提供了一些有意思的内置功能。

如 等特殊标签。

如motion提供的是一个平滑变化的方法，Transitions提供的是一些简单的易用的出入场动画，animation则是提供CSS属性变换动画制作方法，Context虽然与其他组件的略有不同但也不用多说。最让我推崇的其实是内置的Store特性！

Store

Store作为一种组件间通信需求的解决方案，每个框架都为此努力，React会有Redux的需求，Vue配套了Vuex，还有如mobx等一系列有设计哲学的状态管理方案。但是Svelte自己内置了一套Store功能，而且非常好用！！

具体不介绍使用方法，但他的自动订阅，自定义以及与响应式极好的贴合是真的使一些原本复杂的功能需求变成一些简单的组合，不存在额外引入组件间通信组件的负担，这个特性在这些时间内的使用，让我真的是要吹爆他！！！

相信Svelte一定会流行起来，成为主流标志之一的！！！