Svelte.js: What it does and how it's implemented

Svelte.js: What it does and how it’s implemented

this

There are probably a lot of people who have learned svelte.js, but most of the articles and videos are just examples of how to use it, and examples of how to use it on the website. We’re not going to stop there, we’re going to talk about some of the most inspiring ideas. We’ll look at how it does all of this, and we won’t go into the source code, but we’ll look at the packaged code. We’re used to seeing frameworks like Vue and React. We need to learn something different. Why wait to get on the bus?

One. Not absent introduction

Dare to say he is slim, it seems that its own performance is very confident ah.

First post a paragraph of official website said:

Svelte converts your application into an ideal JavaScript application during the _ build/compile phase, rather than interpreting the application code during the _ run phase. This means you don't have to pay for the performance that the framework consumes, and there's no extra cost when the application first loads.

Why light weight

For example, Vue is a set of monitoring system composed of deep and watch. The change of a certain value of an object will trigger a series of operations, such as the generation of virtual DOM, which is often said. However, Svelte is on the contrary. Write to the package code inside, can be simply interpreted as not to do the value of listening, but return to the most essential JS writing method, with the function directly triggered, this may not be direct enough, the following we will have to Svelte after the package code analysis part, let’s begin.

3. Build the development environment and install plug-ins

Official recommendation:

NPX degit sveltejs/template Project name CD Project name yarn yarn dev

I’m just going to do a demo, I’m just going to call it a demo, and we’re going to start our story with this app.svelte file.

Please use thevscodeAnd install the plug-in

Four variables.

Let me show you how it uses variables.

<script> let name = 'name'; const path = 'favicon'; const src = '/favicon.png' </script> <p>name: {name} < / p > < div > < img SRC = "/ favicon. PNG" Alt = "write 1" / > < img SRC = "/ {path1}. PNG" Alt = "method 2" / > < img Alt = {SRC} "writing 3" / > </div>

The effect is as follows:

The use of variables is a pair of parentheses, which is surprisingly easy to concatenate with strings. The nice thing is that it doesn’t have to have only one root element, which makes writing code happier.

5. Events

Every time I hit n++

<script> let n = 0; function addn() { n++; } < / script > < div > < button on: click = {addn} > once ordered {n} < / button > < / div >

Event repeatability

<script> let n = 0; function addn() { n++; Console. log(' triggered :addn'); } function handlClick1() {console.log(' triggered :handlClick1'); } function handlClick2() {console.log(' triggered :handlClick2'); < span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 13px! Important; word-break: inherit! Important;"

When we trigger the click event, it triggers the event in the order of the binding event.

6. Conditional statements

It is not written as a DOM directive like vue.

<script> let n = 0; function addn() { n++; } < / script > < div > < button on: click = {addn} > once ordered {n} < / button > {# if n % 2} < p > n is odd number < / p > {/ if} {# if! (n % 2)} is even < / p > < p > n / {if} {# if n % 2} < p > n was: is odd < / p > {: else} < p > n was: is an even number < / p > {/ if} < / div >

The syntax of svelte.js is really interesting, but it doesn’t conform to the traditional syntax of JS and DOM. Now that we have a basic understanding of this technology, let’s talk about the packaged files.

Start analyzing the package file

Using the most basic code:

<script> let n = 0; function addn() { n++; Console. log(' triggered :addn'); } </script> <button on:click={addn}>

Just pack it up and have a look

yarn build

It’s impossible to watch:

Remove confusion and change the packaging pattern (by the wayrollup)

This is also disabled to save some performance:

You get clear code:

Eight. What did you do when you created it

The examples on the website stop there, but you can package files for detailed research, such as trackinginitThe event came to the position shown in the diagram:

$$is full of mount targets and lifecycle functions, but that’s not what we’re going to focus on today.

Do you rememberinstanceReturns a return [n, addn];.

It’s interesting to determine that two values are not equal

There might be NAN! == NAN this embarrassing scene, and we usually write code have you noticed that?

Function safe_not_equal(a, b) {// if a is NAN return if b is NAN, // if a is not NAN return if a is equal to b or a is an object or a is a function return a! = a ? b == b : a ! == b || ((a && typeof a === 'object') || typeof a === 'function'); }

X. Binding events

Bind the event and give out the delete event, which is a good way to write it.

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

How to store multiple variables?

Let’s change the code and package it

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

Summary.

Svelte is more like a compiler, it just translates the code we write into an executable ‘MVC’ pattern, so we don’t have to be full of this like vue and React. In this way, we can design the code as native JS.

end.

Space limited more interesting usage we will discuss in the next article, this time is such, hope to progress with you.

Svelte.js: What it does and how it’s implemented