[新框架] 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」或掃描下面的二維碼