???? 应该有不少人学习了Svelte.js
技术, 但大部分文章与视频还是停留在罗列用法, 以及演示官网的示例而已, 我们这次就不局限在介绍用法, 我们还会讨论Svelte.js
的一些有启发的思想, 以及会与大家一起分析它是如何实现这些功能的, 虽然不会深入源码分析, 但我们会认真分析它打包后的代码。
???? 看惯了vue与react这类框架, 我们要学点不同的啦, 还等什么快上车。
???? 竟然敢说自己是苗条的
, 看来它对自身的性能很有自信啊。
先贴一段官网说的话:
Svelte 在 _构建/编译阶段_ 将你的应用程序转换为理想的 JavaScript 应用,而不是在 _运行阶段_ 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。
???? 比如说vue
它是有一套监听系统由deep
与watch
组成, 某个对象的某个值的变化会触发一系列的操作, 比如常说的虚拟dom的生成, 但是Svelte
反其道而行之, 他直接在编译阶段就把某个值变化时需要触发什么操作这类逻辑, 写入到了打包后的代码里面, 可以简单理解为不对值做监听了, 而是回归最本质的js写法, 用函数直接触发, 这样说可能还是不够直接, 下面我们就会有对Svelte
打包后的代码进行分析的部分, 我们这就开始吧。
官方推荐方式:
npx degit sveltejs/template 项目名
cd 项目名
yarn
yarn dev
这里我用于演示, 直接叫demo了, 我们的故事就从这个App.svelte
文件开始。
请使用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>
???? Svelte
更像一个编译器, 他只是把我们写的代码翻译成了可执行的'MVC'的模式, 所以我们不用像在vue与react
里面全是this.
的这种写法, 我们可以按原生js的方式去设计代码。
???? 篇幅有限更多有趣的用法我们下一篇再讨论啦, ,这次就是这样, 希望和你一起进步。
本文主要讲解的是按钮的样式。 1.选项 2.尺寸 3.活动状态 4.禁用状态 5.可做按钮...
inline-flex 和 inline-block 一样,对内部元素来说是个 display:flex 的容器,...
DocumentFragment DocumentFragment 是什么 ? DocumentFragment,文档片段接口...
原文链接: TypeScript入门 之前阅读vue源码的时候发现有TypeScript,一脸懵逼,...
本次主要来了解的是布局,这个大部分在HTML的基本标签中也是存在的,所以相对比...
在用Dreamweaver编辑网页时,经常会在某一页面中要设置许多的连接,正因为要设置...
前言 有时候,我们会使用 iframe标签,将前端分离项目无感的嵌入 如以Freemark为...
当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是...
在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高...
我们使用translate这个参数来实现移动 translateX:向X轴平移,填正数往右平移,...