聊聊Svelte.js技術它作了什麼以及如何實現的(上)

時間 2021-05-10

標籤 vue node react git 框架 dom 函數源碼分析性能學習欄目 JavaScript 简体版

原文原文鏈接

聊聊Svelte.js技術它作了什麼以及如何實現的(上)

本篇

應該有很多人學習了Svelte.js技術, 但大部分文章與視頻仍是停留在羅列用法, 以及演示官網的示例而已, 咱們此次就不侷限在介紹用法, 咱們還會討論Svelte.js的一些有啓發的思想, 以及會與你們一塊兒分析它是如何實現這些功能的, 雖然不會深刻源碼分析, 但咱們會認真分析它打包後的代碼。
看慣了vue與react這類框架, 咱們要學點不一樣的啦, 還等什麼快上車。vue

一. 不會缺席的介紹

居然敢說本身是苗條的, 看來它對自身的性能頗有自信啊。node

先貼一段官網說的話:react

Svelte 在 _構建/編譯階段_ 將你的應用程序轉換爲理想的 JavaScript 應用，而不是在 _運行階段_ 解釋應用程序的代碼。這意味着你不須要爲框架所消耗的性能付出成本，而且在應用程序首次加載時沒有額外損失。

二. 爲什麼輕量

好比說vue它是有一套監聽系統由deep與watch組成, 某個對象的某個值的變化會觸發一系列的操做, 好比常說的虛擬dom的生成, 可是Svelte反其道而行之, 他直接在編譯階段就把某個值變化時須要觸發什麼操做這類邏輯, 寫入到了打包後的代碼裏面, 能夠簡單理解爲不對值作監聽了, 而是迴歸最本質的js寫法, 用函數直接觸發, 這樣說可能仍是不夠直接, 下面咱們就會有對Svelte打包後的代碼進行分析的部分, 咱們這就開始吧。git

三. 搭建開發環境, 安裝插件

官方推薦方式:框架

npx degit sveltejs/template 項目名

cd 項目名

yarn

yarn dev

這裏我用於演示, 直接叫demo了, 咱們的故事就從這個App.svelte文件開始。 dom

請使用vscode並安裝插件
函數

四. 變量

我來演示一下它是如何使用變量的。源碼分析

<script>
  let name = 'name';
  const path = 'favicon';
  const src = '/favicon.png'
</script>

  <p>name: {name}</p>
  <div>
    <img src="/favicon.png" alt="寫法1" />
    <img src="/{path1}.png" alt="寫法2" />
    <img {src} alt="寫法3" />
  </div>

效果以下:
性能

使用變量就是一對括號, 比較讓人驚喜的是他能夠與字符串隨意的拼接, 還有一個不錯的點就是不用只有一個根元素了, 寫代碼的幸福感都提高力。學習

五. 事件

每次點擊n++

<script>
  let n = 0;
  function addn() {
    n++;
  }
</script>

<div>
  <button on:click={addn} >點了{n}次</button>
</div>

事件可重複

<script>
  let n = 0;

  function addn() {
    n++;
    console.log('觸發了:addn');
  }

  function handlClick1() {
    console.log('觸發了:handlClick1');
  }

  function handlClick2() {
    console.log('觸發了:handlClick2');
  }
</script>

<div>
  <button 
    on:click={addn} 
    on:click={handlClick1} 
    on:click={handlClick2}
    >點了{n}次</button
  >
</div>

當咱們觸發點擊事件的時候, 他會按綁定事件的前後順序來觸發事件。

六. 條件語句

它的寫法並非像vue同樣的dom指令。

<script>
  let n = 0;

  function addn() {
    n++;
  }
</script>

<div>
  <button on:click={addn}>點了{n}次</button>

  {#if n % 2}
    <p>n是奇數</p>
  {/if}

  {#if !(n % 2)}
    <p>n是偶數</p>
  {/if}

  {#if n % 2}
    <p>n 竟然是: 是奇數</p>
  {:else}
    <p>n 竟然是: 是偶數</p>
  {/if}
</div>

寫到這裏你會發現, Svelte.js的語法真的有趣, 實際上是不太符合咱們js與dom的傳統語法的, 說到這裏其實咱們已經對這個技術有了基本的認知, 下面開始結合打包後的文件聊一聊。

七. 開始分析打包文件

使用最基礎的代碼:

<script>
  let n = 0;
  function addn() {
    n++;
    console.log('觸發了:addn');
  }
</script>

<button on:click={addn}>點了{n}次</button>

先直接打包看一下

yarn build

根本無法看:

去掉混淆, 改變打包模式 (順便了解一下rollup)

這個也關了省點性能:

獲得了清晰的代碼:

八. 建立時都作了什麼

官網提供的例子都是到這裏就結束了, 但咱們能夠經過打包文件進行詳細的研究, 好比追蹤init事件來到了如圖所示的位置:

$$裏面都是一些掛載目標以及生命週期函數, 這些不是咱們今天的重點咱們往下看。

還記得instance返回了個 return [n, addn];。

九. 判斷兩個值不相等挺有意思的

可能會出現 NAN !== NAN這種尷尬的場景, 而咱們平時寫代碼有沒有注意到那?

function safe_not_equal(a, b) {
        // a爲 NAN 則 返回 b是否爲nan,
        // a不爲NAN 則 返回 a等於b或者a是個對象或者a是個函數
        return a != a ?
            b == b :
            a !== b || ((a && typeof a === 'object') || typeof a === 'function');
    }

十. 綁定事件

綁定事件的同時把刪除事件操做給了出去, 這個寫法不錯。

function listen(node, event, handler, options) {
  node.addEventListener(event, handler, options);
  return () => node.removeEventListener(event, handler, options);
}

十一. 多個變量如何儲存?

咱們改一下代碼再打包

<script>
  let n = 1;
  let y = 1;
  let n1 = 1;
  let n2 = 1;
  let n3 = 1;
  let n11 = 1;
  let n21 = 1;
  let n31 = 1;
  function addY() {
    n += 1;
    y += 1;
    n1 += 1;
    n2 += 1;
    n3 += 1;
    n11 += 1;
    n21 += 1;
    n31 += 1;
  }
</script>

<button on:click={addY}>
  {n}{y}{n1}{n2}{n3}{n11}{n21}{n31}
</button>