Talk about what Svelte.js technology does and how to achieve it (on)

Talk about what Svelte.js technology does and how to achieve it (on)

This article

There should be many people who have learned the Svelte.js technology, but most of the articles and videos still stop at listing the usage, as well as the examples on the official website. We are not limited to the introduction this time, we will also discuss some inspiring ideas of Svelte.js , And will analyze with you how it implements these functions. Although we will not go into the source code analysis, we will carefully analyze the packaged code.
After seeing frameworks like vue and react, we have to learn a little bit differently, and what are we waiting for?

1. Introduction that will not be absent

I dare to say that I am slim. It seems that he is very confident in his performance.

First post a paragraph of what the official website said:

1609c7313f08a0 Svelte transforms your application into an ideal JavaScript application in the This means that you don't need to pay for the performance consumed by the framework, and there is no additional loss when the application is first loaded.

2. Why is it lightweight

For example, vue has a monitoring system consisting of deep and watch . A change in a certain value of an object will trigger a series of operations, such as the generation of virtual dom, but Svelte opposite. The logic of what operations need to be triggered when a certain value changes directly in the compilation stage is written into the packaged code. It can be simply understood as not monitoring the value, but returning to the most essential js writing method, using the function directly Trigger, this may not be straightforward enough. Next, we will have a part of analyzing the code after Svelte

3. Set up a development environment and install plug-ins

Official recommendation method:

npx degit sveltejs/template 项目名

cd 项目名

yarn

yarn dev

Here I am using it for demonstration, and it is called demo directly. Our story starts with this file App.svelte

Please use vscode and install the plugin


Four. Variables

Let me demonstrate 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="写法1" />
    <img src="/{path1}.png" alt="写法2" />
    <img {src} alt="写法3" />
  </div>

The effect is as follows:


The use of variables is just a pair of parentheses. What is more surprising is that it can be spliced with strings at will. Another good point is that there is no need to have only one root element, and the happiness of writing code is enhanced.

V. Incident

N++ per click

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

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

Events can be repeated

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

When we trigger a click event, it will trigger the events in the order of binding events.

6. Conditional statement

It is not written as a dom command like vue.

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

As you write here, you will find that Svelte.js is really interesting, but it does not conform to the traditional grammar of our js and dom. At this point, we already have a basic understanding of this technology. Let’s start to combine the packaged Have a chat about files.

7. Start analyzing the packaged files

Use the most basic code:

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

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

Let's just pack it and take a look

yarn build

Can't see at all:


Remove the confusion and change the packaging mode (by the way, learn about rollup )

This is also off to save some performance:

Got the clear code:


8. What did you do when you created it


The examples provided on the official website are all over here, but we can conduct detailed research through the packaged files, such as tracking the init event to the position shown in the figure:


$$ contains some mount targets and life cycle functions. These are not our focus today. Let’s look down.

Remember that instance returned a return [n, addn]; .


9. It is interesting to judge that two values are not equal

There may be an NAN !== NAN , but have we noticed that when we write code?

    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');
    }

10. Binding events

While binding the event, the delete event operation is given out. This is a good way of writing.

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

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

to sum up.

Svelte more like a compiler, it just translates the code we write into an executable'MVC' mode, so we don't need to it like 0609c7313f0c2b in 1609c7313f0c2d vue and react, we can this. Way to design code.

end.

Space is limited and more interesting usages will be discussed in the next article. This is the case this time, and I hope to make progress with you.