Introducción
Recordemos cómo escribimos aplicaciones web sin marcos:
Crea un elemento
// h1
const h1 = document.createElement('h1');
h1.textContent = 'Hello World';
// ... body
document.body.appendChild(h1);
Actualizando el elemento
// h1
h1.textContent = 'Bye World';
Quitando el elemento
// , h1
document.body.removeChild(h1);
Agregar estilos a un elemento
const h1 = document.createElement('h1');
h1.textContent = 'Hello World';
// h1
h1.setAttribute('class', 'abc');
// ... <style> head
const style = document.createElement('style');
style.textContent = '.abc { color: blue; }';
document.head.appendChild(style);
document.body.appendChild(h1);
Escuchar eventos de clic en un elemento
const button = document.createElement('button');
button.textContent = 'Click Me!';
// click
button.addEventListener('click', () => {
console.log('Hi!');
});
document.body.appendChild(button);
En JavaScript puro, necesitamos escribir algo como esto.
El propósito principal de este artículo es mostrar cómo el compilador Svelte convierte la sintaxis de Svelte en los bloques de código que mostré anteriormente.
Sintaxis esbelta
A continuación, le mostraré algunos ejemplos básicos de sintaxis de Svelte.
, Svelte:
<h1>Hello World</h1>
, <style>
:
<style>
h1 {
color: rebeccapurple;
}
</style>
<h1>Hello World</h1>
Svelte HTML, Svelte HTML .
, :
<script>
let name = 'World';
</script>
<h1>Hello {name}</h1>
JavaScript .
, on:
<script>
let count = 0;
function onClickButton(event) {
console.log(count);
}
</script>
<button on:click={onClickButton}>Clicked {count}</button>
<script>
let count = 0;
function onClickButton(event) {
count += 1;
}
</script>
<button on:click={onClickButton}>Clicked {count}</button>
Svelte JavaScript, .
Svelte
Svelte , JavaScript.
, Svelte , . , Svelte .
:
<h1>Hello World</h1>
:
function create_fragment(ctx) {
let h1;
return {
c() {
h1 = element('h1');
h1.textContent = 'Hello world';
},
m(target, anchor) {
insert(target, h1, anchor);
},
d(detaching) {
if (detaching) detach(h1);
},
};
}
export default class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, create_fragment, safe_not_equal, {});
}
}
2 :
create_fragment
class App extends SvelteComponent
create_fragment
Svelte - Svelte. Svelte DOM .
create_fragment
Svelte DOM .
create_fragment
. , :
c()
create. .
h1
:
h1 = element('h1');
h1.textContent = 'Hello World';
m(target, anchor)
mount. .
h1
target
:
insert(target, h1, anchor);
// http://github.com/sveltejs/svelte/tree/master/src/runtime/internal/dom.ts
export function insert(target, node, anchor) {
target.insertBefore(node, anchor || null);
}
d(detaching)
destroy. .
h1
DOM :
detach(h1);
// http://github.com/sveltejs/svelte/tree/master/src/runtime/internal/dom.ts
function detach(node) {
node.parentNode.removeChild(node);
}
. , .
export default class App extends SvelteComponent
- , API.
, create_fragment. Svelte , .
<h1>
, :
<!-- empty -->
class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, null, safe_not_equal, {});
}
}
Svelte null
create_fragment
!
init - , Svelte , :
,
ctx
Svelte create_fragment
DOM.
, this.$$
.
, $$
, . !
Svelte , :
<script>
let name = 'World';
</script>
<h1>Hello {name}</h1>
:
function create_fragment(ctx) {
// ...
return {
c() {
h1 = element('h1');
h1.textContent = `Hello ${name}`;},
// ...
};
}
let name = 'World';
class App extends SvelteComponent {
// ...
}
:
,
<script>
,
h1
, , .
:
<script>
let name = 'World';
function update() {
name = 'Svelte';
}
</script>
<h1>Hello {name}</h1>
… :
function create_fragment(ctx) {
return {
c() {
h1 = element('h1');
t0 = text('Hello ');
t1 = text(/*name*/ ctx[0]);
},
m(target, anchor) {
insert(target, h1, anchor);
append(h1, t0);
append(h1, t1);
},
p(ctx, [dirty]) {
if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
},
d(detaching) {
if (detaching) detach(h1);
},
};
}
function instance($$self, $$props, $$invalidate) {
let name = 'World';
function update() {
$$invalidate(0, (name = 'Svelte'));
}
return [name];
}
export default class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}
:
<h1>
2 ,text (...)
create_fragment
p(ctx, dirty)
instance
script
instance
,
create_fragment
,ctx[0]
?
Svelte , <script>
.
:
? :
count++
? :
name = 'Svelte'
?
<h1>Hello {name}</h1>
?
const i = 1;
let i = 1;
...
Svelte , (- name = 'Svelte';
), h1
, .
, , p
.
p(ctx, dirty)
u_p_date
p(ctx, dirty)
, (dirty
) (ctx
) .
instance
, App
.
instance
.
, , App
, :
<App />
<App />
<App />
<!-- -->
<h1>Hello world</h1>
<h1>Hello world</h1>
<h1>Hello world</h1>
name
1 , instance
:
<App />
<App />
<App />
<!-- -->
<h1>Hello world</h1>
<h1>Hello Svelte</h1>
<h1>Hello world</h1>
<!-- -->
instance($$self, $$props, $$invalidate)
instance :
Svelte ctx
.
init
Svelte instance
ctx
:
// ,
const ctx = instance(/*...*/);
const fragment = create_fragment(ctx);
//
fragment.c();
// DOM
fragment.m(target);
name
name
, ctx
:
t1 = text(/* name */ ctx[0]);
$$invalidate
Svelte - $$invalidate
.
,
$$invalidate
:
name = 'Svelte';
count++;
foo.a = 1;
//
name = 'Svelte';
$$invalidate(/* name */, name);
count++;
$$invalidate(/* count */, count);
foo.a = 1;
$$invalidate(/* foo */, foo);
$$invalidate
:
// ...
const ctx = instance(/*...*/);
const fragment = create_fragment(ctx);
// ,
const dirty = new Set();
const $$invalidate = (variable, newValue) => {
// ctx
ctx[variable] = newValue;
//
dirty.add(variable);
//
scheduleUpdate(component);
};
// ,
function flushUpdate() {
//
fragment.p(ctx, dirty);
//
dirty.clear();
}
<script>
let name = 'world';
function update() {
name = 'Svelte';
}
</script>
<h1 on:click={update}>Hello {name}</h1>
:
function create_fragment(ctx) {
// ...
return {
c() {
h1 = element('h1');
t0 = text('Hello ');
t1 = text(/*name*/ ctx[0]);
},
m(target, anchor) {
insert(target, h1, anchor);
append(h1, t0);
append(h1, t1);
dispose = listen(h1, 'click', /*update*/ ctx[1]);},
p(ctx, [dirty]) {
if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
},
d(detaching) {
if (detaching) detach(h1);
dispose();},
};
}
function instance($$self, $$props, $$invalidate) {
let name = 'world';
function update() {
$$invalidate(0, (name = 'Svelte'));
}
return [name, update];}
// ...
:
instance
2
listen
mount
dispose
destroy
, instance
, .
update
, instance
ctx
.
Svelte JavaScript, , .
listen dispose
, , Svelte , DOM.
,
<h1
on:click={update}
on:mousedown={update}
on:touchstart={update}>
Hello {name}!
</h1>
:
// ...
dispose = [
listen(h1, 'click', /*update*/ ctx[1]),
listen(h1, 'mousedown', /*update*/ ctx[1]),
listen(h1, 'touchstart', /*update*/ ctx[1], { passive: true }),
];
// ...
run_all(dispose);
, Svelte :
//
dispose1 = listen(h1, 'click', /*update*/ ctx[1]);
dispose2 = listen(h1, 'mousedown', /*update*/ ctx[1]);
dispose2 = listen(h1, 'touchstart', /*update*/ ctx[1], { passive: true });
// ...
dispose1();
dispose2();
dispose3();
, .
, , Svelte JavaScript. Svelte dispose
, .
Svelte - HTML.
Svelte, JavaScript .
3 :
1. create_fragment
, DOM .
2. instance
,
<script>
, .
, .
$$invalidate
3. class App extends SvelteComponent
create_fragment
instance
-
Svelte JavaScript, :
h1
,
create_fragment
instance
,
dispose
, .
...
, Svelte .
:
Únase a la comunidad de Svelte de habla rusa en Telegram: @sveltejs . Allí puede encontrar ayuda o consejos sobre casi cualquier tema, así como discutir los temas más urgentes. Si no tiene tiempo para chats, suscríbase al canal @sveltejs_public para recibir noticias y materiales útiles sobre Svelte.
¡Espero que este material te haya sido útil!