说说Svelte.js技术是干什么的以及它是如何实现的（上）

说说Svelte.js技术是干什么的以及它是如何实现的（上）这篇文章学过Svelte.js的人应该很多technology，但大部分文章和视频仍然只是罗列用法和演示官网的例子。这次我们不仅限于介绍用法。我们还将讨论Svelte.js的一些鼓舞人心的想法，并与您一起分析它们是如何实现这些功能的，虽然我们不会深入分析源码，但我们会仔细分析其打包后的代码。我们用惯了Vue、React这样的框架，我们要学点不一样的，还等什么，快上车吧。1.永远不会缺席的介绍??????敢说自己苗条，看来对自己的表现很有信心。先贴一下官网说的：Svelte在_build/compile阶段_将你的应用程序转换成理想的JavaScript应用程序，而不是在_run阶段_解释应用程序的代码。这意味着您无需为框架消耗的性能付费，并且在应用程序首次加载时不会有额外的损失。2、为什么是轻量级的比如Vue有一个由deep和watch组成的监控系统。一个对象某个值的变化会触发一系列的操作，比如常说的虚拟dom的生成，但是Svelte却反其道而行之，他写的是当某个值需要触发什么操作的逻辑编译阶段直接改成打包代码，可以简单理解为不监听值，而是回到最本质的js写法，直接由一个函数触发。这可能不够直接。接下来我们分析一下Svelte打包后的代码。让我们现在开始。3.搭建开发环境，安装插件官方推荐方式：npxdegitsveltejs/template项目名cd项目名yarnyarndev这里我用它来演示，直接调用demo，我们的故事就从这个App.svelte开始文件。请使用vscode并安装插件4.Variables下面我来演示一下它是如何使用变量的。

name:{name}

效果如下：使用变量是一对括号。更让人惊喜的是，它可以随意拼接琴弦。还有一个好处就是不需要只有一个根元素，写代码的快乐度会提高。5.每次点击事件n++事件可以重复当我们触发点击事件，它将按照绑定事件的顺序触发事件。6.条件语句没有像vue那样写成dom指令。<脚本>让n=0;函数addn(){n++;}写到这里，你会发现Svelte.js的语法真的很有趣，其实它并不符合我们js和dom的传统语法。说到这里，我们已经对这项技术有了基本的了解。下面开始说说打包后的文件。七。使用最基本的代码开始分析打包文件：点击{n}次首先打包，看yarnbuild，完全看不出来：去掉混淆，换打包方式（顺便学习一下rollup）为了节省性能，这个也关掉了：搞清楚代码：8.创建时做了什么官网提供的例子都在这里，但是我们可以进行详细的研究通过package文件，比如跟踪init事件到图中所示位置：$$contains这些是一些挂载目标和生命周期函数。这些不是我们今天的重点。我们往下看。请记住，实例返回一个return[n,addn];。9.判断两个值不相等很有意思可能会出现NAN!==NAN这种尴尬的场景，但是我们平时写代码的时候有没有注意到呢？functionsafe_not_equal(a,b){//aisNANthenReturnbwhetherbisnan,//如果aisnotNAN,returnaequaltoboraisanobjectoraisafunctionreturna!=a?b==b:a!==b||((a&&typeofa==='对象')||typeofa==='函数');}10.绑定事件在绑定事件的同时，把删除事件的操作给出来了，写法不错。functionlisten(node,event,handler,options){node.addEventListener(event,handler,options);return()=>node.removeEventListener(event,handler,options);}十一。如何存储多个变量？我们更改代码并封装{n}{y}{n1}{n2}{n3}{n11}{n21}{n31}总结。Svelte更像是一个编译器，他只是把我们写的代码翻译成可执行的‘MVC’模式，所以我们不需要写这个。在vue和react中，我们可以按照原生js的方式来设计代码。结尾。空间有限。更多有趣的用法将在下一篇文章中讨论，这次就这样了，希望和大家一起进步。