作者：滴滴公共前端团队 - Neurotoxin
前言
如果你已经开发过 JavaScript 应用程序，你可能会遇到或者至少听说过像 React、Vue、Angular 这样的框架。这些工具都有一个共同的目标，让开发者可以轻松地建立流畅的交互式应用。
如果你看过 Vue 的源码打包，你会认识 rollup~ 对，下面我们要介绍的就是这个前端轮子哥的又一个作品：
Svelte (发音: svelt)
The magical disappearing UI framework
目前的 star 数目相比前面提到的几个框架基本可以忽略，不过论作者的代码能力，不容忽视
和上面的框架有一个关键的区别：
Svelte 不是在运行时解析你的 JavaScript 代码，在构建时你的代码被编译为可直接运行的 JavaScript 代码。
这意味着首屏加载的时候无需浪费时间在加载框架上，也为你节省了运行框架本身的时间。
之前尤大也在知乎上评价过：
从 Ractive 传承过来的 API 设计框架核心思想：
通过静态编译减少框架运行时的代码量
正因为无需依赖框架本身，你可以轻松地在现有应用程序中渐进式的采用 Svelte ，或将某个组件作为独立包运行在任何地方。
svelte 的内容覆盖比较多，我们会以多篇文章系列的形势呈现给大家，当然也祝福大家新年快乐~
快速开始
在这里我为大家提供了一个 Example ，可以直接访问地址 Svelte-Example 查看。
安装 && 启动
git clone https://github.com/neurotoxinvx/svelte-example.git
cd svelte-example
npm install
cd svelte-example
npm run dev复制代码常用 API
注：下方的展示部分为图片演示，实际操作体验请启动后体验。
1、模板渲染
<p>欢迎使用 {{ title }} ， {{ title }} 是一个 {{ type }} ，推崇组件 {{ describe }} 的方式。p>
<style>
style>
<script>
export default {
data() {
return {
title: 'Sevlte',
type: '编译型框架',
describe: '开箱即用'
}
}
}
script>复制代码2、IF…ELSE
{{#if type}}
<div>BLOCK TRUEdiv>
{{else}}
<div>BLOCK FALSEdiv>
{{/if}}
<button on:click="switchFirst(type)">switchbutton>
<style>
div {
font-size: 14px;
}
button {
margin-top: 10px;
}
style>
<script>
export default {
data() {
return {
type: true
}
},
methods: {
switchFirst(type) {
type = !type;
this.set({
type: type
})
}
}
}
script>复制代码3、双向绑定
<input type="text" bind:value="name" placeholder="ente your name">
<p>Hello {{name || 'stranger'}}!p>
<script>
export default {
data() {
return {
name: ''
}
}
}
script>复制代码4、事件绑定
<p>{{data}}p>
<button on:click="add()">click mebutton>
<style>
style>
<script>
export default {
data() {
return {
data: 'DiDi'
}
},
methods: {
add() {
let _data = this.get('data');
this.set({
data: _data + 'Di'
})
}
}
}
script>复制代码5、监听数据变化
<p>打开控制台查看p>
<p>{{data}}p>
<button on:click="add()">click mebutton>
<style>style>
<script>
export default {
data() {
return {
data: 'DiDi'
}
},
methods: {
add() {
let _data = this.get('data');
this.set({
data: _data + 'Di'
})
}
},
onrender() {
// 此处注意，监听时会触发一次回调函数，使用时请进行第一次判断
const observer = this.observe('data', data => {
console.log('新的数据是' + data);
});
// observer.cancel();
}
}
script>复制代码6、计算属性
<p>
现在时分, 北京时间 {{ hour }} 点 {{ minutes }} 分 {{ seconds }} 秒
p>
<script>
export default {
data() {
return {
date: new Date()
}
},
computed: {
hour: date => date.getHours(),
minutes: date => date.getMinutes(),
seconds: date => date.getSeconds()
}
}
script>复制代码7、Props 传值到子组件
Wrap
<Inner name="Neurotoxin" bind:count>Inner>
<button on:click="plus(count)">click mebutton>
<script>
import Inner from './Inner';
export default {
data() {
return {
count: 0
}
},
methods: {
plus(count) {
this.set({
count: count + 1
})
}
},
components: {
Inner
}
}
script>复制代码Inner
<p>Hello {{ name }}, this is inner componentp>
<p>The Number is {{ count }}p>
<script>
export default {
data() {
return {
name: 'unKnown',
count: 0
}
}
}
script>复制代码8、REFs
Wrap
<div id="refs">
<Inner ref:inner>Inner>
<button on:click="triggerInner()">click mebutton>
div>
<script>
import Inner from './Inner';
export default {
data() {
return {
data: 'REFs Inner'
}
},
methods: {
triggerInner() {
const inner = this.refs.inner;
inner.change();
}
},
components: {
Inner
}
}
script>复制代码Inner
<p>{{ data }}p>
<script>
export default {
data() {
return {
data: 'REFs Inner'
}
},
methods: {
change() {
this.set({
data: Math.random()
})
}
}
}
script>复制代码9、Emit
Wrap
<div>
{{ thing }}
div>
<Inner on:Bomb="action(event.thing)">Inner>
<script>
import Inner from './Inner';
export default {
data() {
return {
thing: 'Nothing'
}
},
methods: {
action(thing) {
this.set({
thing: thing
});
}
},
components: {
Inner
}
}
script>复制代码Inner
<script>
export default {
onrender() {
let num = 0;
setInterval(() => {
this.fire('Bomb', {
thing: num += 1
})
}, 1000);
}
}
script>复制代码自定义 Svelte 文件后缀
可能有的同学对于 .html 文件感觉有些不适应，我们可以将 .html 结尾的 Svelte 组件后缀改为 .svelte ，然后修改
webpack.dev.conf.js 中的
module: {
rules: [
{
test: /\(.html|.svelte)$/, // 这里加上对 svelte 文件的解析
exclude: /node_modules/,
use: 'svelte-loader'
}
]
},复制代码此时，我们发现在编辑器中 .svelte 文件失去了语法高亮和自动补充，如果你使用的是 WebStorm ，可以打开 Preferences -> Editor -> File types
手动添加，将 .svelte 文件识别为 HTML 即可
总结
经过上面的介绍，我们可以看到 Svelte 吸收了很多 Vue、React 中的精华部分，甚至连 svelte-loader 的模板也和 .vue 文件十分相似，对于熟悉 Vue、React 的同学来说上手非常的快速。
由于 Svelte 是一个编译型框架，打包后的文件大小相比基于其他框架开发的应用会小很多，所以非常适合开发 SDK 、插件。
但是由于 Svelte 编译后的代码复用性相比 Vue、React、Angular 等具有 Runtime 的框架较差，我们对于用 Svelte 开发中大型应用依然持怀疑态度，但是无疑，在开发 SDK 插件方面， Svelte 几乎是目前最好的选择。
更多文档手册请访问 SVELTE官网
github.com/sveltejs/sv…
欢迎关注DDFE
GITHUB：github.com/DDFE
微信公众号：微信搜索公众号“DDFE”或扫描下面的二维码