[新框架] SVELTE入门介绍

做者：滴滴公共前端团队 - 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

注：下方的展现部分为图片演示，实际操做体验请启动后体验。

一、模板渲染

<p>欢迎使用 {{ title }} ， {{ title }} 是一个 {{ type }} ，推崇组件 {{ describe }} 的方式。</p>
<style> </style>
<script> export default { data() { return { title: 'Sevlte', type: '编译型框架', describe: '开箱即用' } } } </script>复制代码

二、IF…ELSE

{{#if type}}
<div>BLOCK TRUE</div>
{{else}}
<div>BLOCK FALSE</div>
{{/if}}
<button on:click="switchFirst(type)">switch</button>
<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>复制代码

三、双向绑定

<input type="text" bind:value="name" placeholder="ente your name">
<p>Hello {{name || 'stranger'}}!</p>
<script> export default { data() { return { name: '' } } } </script>复制代码

四、事件绑定

<p>{{data}}</p>
<button on:click="add()">click me</button>
<style> </style>
<script> export default { data() { return { data: 'DiDi' } }, methods: { add() { let _data = this.get('data'); this.set({ data: _data + 'Di' }) } } } </script>复制代码

五、监听数据变化

<p>打开控制台查看</p>
<p>{{data}}</p>
<button on:click="add()">click me</button>
<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>复制代码

六、计算属性

<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>复制代码

七、Props 传值到子组件

Wrap

<Inner name="Neurotoxin" bind:count></Inner>
<button on:click="plus(count)">click me</button>
<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 component</p>
<p>The Number is {{ count }}</p>
<script> export default { data() { return { name: 'unKnown', count: 0 } } } </script>复制代码

八、REFs

Wrap

<div id="refs">
  <Inner ref:inner></Inner>
  <button on:click="triggerInner()">click me</button>
</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>复制代码

九、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”或扫描下面的二维码