聊聊Svelte.js技术它做了什么以及如何实现的(上)

聊聊Svelte.js技术它做了什么以及如何实现的(上)

本篇

     应该有不少人学习了Svelte.js技术, 但大部分文章与视频还是停留在罗列用法, 以及演示官网的示例而已, 我们这次就不局限在介绍用法, 我们还会讨论Svelte.js的一些有启发的思想, 以及会与大家一起分析它是如何实现这些功能的, 虽然不会深入源码分析, 但我们会认真分析它打包后的代码。
     看惯了vue与react这类框架, 我们要学点不同的啦, 还等什么快上车。

一. 不会缺席的介绍

image.png

     竟然敢说自己是苗条的, 看来它对自身的性能很有自信啊。

先贴一段官网说的话:

Svelte 在 _构建/编译阶段_ 将你的应用程序转换为理想的 JavaScript 应用,而不是在 _运行阶段_ 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。

二. 为何轻量

     比如说vue它是有一套监听系统由deepwatch组成, 某个对象的某个值的变化会触发一系列的操作, 比如常说的虚拟dom的生成, 但是Svelte反其道而行之, 他直接在编译阶段就把某个值变化时需要触发什么操作这类逻辑, 写入到了打包后的代码里面, 可以简单理解为不对值做监听了, 而是回归最本质的js写法, 用函数直接触发, 这样说可能还是不够直接, 下面我们就会有对Svelte打包后的代码进行分析的部分, 我们这就开始吧。

三. 搭建开发环境, 安装插件

官方推荐方式:

npx degit sveltejs/template 项目名

cd 项目名

yarn

yarn dev

这里我用于演示, 直接叫demo了, 我们的故事就从这个App.svelte文件开始。

image.png

请使用vscode并安装插件
image.png

四. 变量

     我来演示一下它是如何使用变量的。

<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>

效果如下:
image.png

     使用变量就是一对括号, 比较让人惊喜的是他可以与字符串随意的拼接, 还有一个不错的点就是不用只有一个根元素了, 写代码的幸福感都提升力。

五. 事件

每次点击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>

image.png

当我们触发点击事件的时候, 他会按绑定事件的先后顺序来触发事件。

六. 条件语句

它的写法并不是像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

根本没法看:
image.png

去掉混淆, 改变打包模式 (顺便了解一下rollup)
image.png
这个也关了省点性能:
image.png
得到了清晰的代码:
image.png

八. 创建时都做了什么

image.png
     官网提供的例子都是到这里就结束了, 但我们可以通过打包文件进行详细的研究, 比如追踪init事件来到了如图所示的位置:
image.png

     $$里面都是一些挂载目标以及生命周期函数, 这些不是我们今天的重点我们往下看。

image.png

还记得instance返回了个 return [n, addn];
image.png

九. 判断两个值不相等挺有意思的

     可能会出现 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>

image.png

image.png

image.png

总结.

     Svelte更像一个编译器, 他只是把我们写的代码翻译成了可执行的'MVC'的模式, 所以我们不用像在vue与react里面全是this.的这种写法, 我们可以按原生js的方式去设计代码。

end.

     篇幅有限更多有趣的用法我们下一篇再讨论啦, ,这次就是这样, 希望和你一起进步。

自信自律, 终身学习.

5.5k 声望
6.8k 粉丝
0 条评论
推荐阅读
学会了slidev.js的开发者, 也许可以考虑不用ppt了?
&ensp;&ensp;&ensp; 作为一个开发者, 每次使用PPT或者Word写简历或者述职都好痛苦啊, 这些App也不太适合展示代码, 但是今天来的家人们有福了, 一款叫做是slidev的库露出了邪魅的微笑 官网地址。

lulu_up8阅读 1.3k

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图

自信自律, 终身学习.

5.5k 声望
6.8k 粉丝
宣传栏