날씬한 특수 요소

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
Svelte는 전방 웹 응용 프로그램을 개발하는 데 사용되는 신흥 전방 프레임워크입니다.
그것은 사용이 간단해서 우리가 결과를 신속하게 만들 수 있게 한다.
본고에서 우리는 특수한 날씬한 요소와 그것을 어떻게 사용하는지 소개할 것이다.

날씬:구성 요소
우리는 svelte:component 요소를 사용하여 동적 구성 요소를 불러올 수 있습니다.그것은 불러올 구성 요소의 대상을 받아들이는 this 도구가 필요합니다.
예를 들어 다음과 같이 사용할 수 있습니다.

<script>
  import Foo from "./Foo.svelte";
  import Bar from "./Bar.svelte";

let component = Foo;
  const toggle = () => {
    component = component === Foo ? Bar : Foo;
  };
</script>

<button on:click={toggle}>Toggle</button>

<svelte:component this={component}/>

위 코드에서 우리는 toggle와 component 사이를 전환하여 Foo를 Bar로 설정하여 불러올 구성 요소로 설정합니다.
그리고 우리는 component 도구에 부품을 탑재하기 위해 component 전달할 것이다.

날씬하다
우리는 this 구성 요소를 사용하여 svelte:window 대상에 탐지기를 추가할 수 있다.
예를 들어 다음과 같이 사용할 수 있습니다.

<script>
  let key;
  const handleKeydown = e => {
    key = e.keyCode;
  };
</script>

<p>{key}</p>

<svelte:window on:keydown={handleKeydown}/>

위의 코드는 window를 handleKeydown 대상에 추가합니다.window 이벤트 대상handleKeydown에서 keyCode을 받은 다음 값을 e로 설정합니다.key 그리고 p 요소에 표시됩니다.그리고 우리가 버튼을 눌렀을 때, 우리는 눌린 키 코드를 볼 수 있다.
다른 DOM 요소와 마찬가지로 이벤트 수식자 key 를 preventDefault 에 추가할 수 있습니다.
또한 다음과 같은 등록 정보svelte:window를 바인딩할 수도 있습니다.

window

innerWidth

innerHeight

outerWidth

outerHeight

scrollX

scrollY  — online의 별칭

window.navigator.onLine와 scrollX를 제외한 모든 속성은 읽기 전용입니다.예를 들어, 다음 코드를 작성하여 화면에 이러한 값을 표시할 수 있습니다.

<script>
  let innerWidth;
  let innerHeight;
  let outerWidth;
  let outerHeight;
  let scrollX;
  let scrollY;
  let online;
</script>

<p>{innerWidth}</p>
<p>{innerHeight}</p>
<p>{outerWidth}</p>
<p>{outerHeight}</p>
<p>{scrollX}</p>
<p>{scrollY}</p>
<p>{online}</p>

<svelte:window
  bind:innerWidth
  bind:innerHeight
  bind:outerWidth
  bind:outerHeight
  bind:online
  bind:scrollX
  bind:scrollY
/>

우리는 scrollY를 사용하여 값을 변수에 귀속시키기 때문에 이 값들은 자동으로 업데이트됩니다.

날씬한 몸매bind 요소는 우리가 svelte:body 중의 사건을 감청할 수 있도록 허용한다.
예를 들어, 다음과 같이 Body 요소에서 마우스의 움직임을 들을 수 있습니다.

<script>
  let clientX;
  let clientY;
  const handleMousemove = e => {
    clientX = e.clientX;
    clientY = e.clientY;
  };
</script>

<p>{clientX}</p>
<p>{clientY}</p>
<svelte:body on:mousemove={handleMousemove} />

위의 코드는 document.body 명령어를 on:mousemove에 추가하고 svelte:body 프로세서 함수를 값으로 설정하여 마우스의 신체 이동을 감시합니다.
그리고 이벤트 대상handleMousemove에서 clientX과 clientY를 가져와 변수로 설정해서 마우스 위치를 얻습니다.
마지막으로, 우리는 p 요소에 이 변수를 삽입해서 이 값을 표시합니다.
따라서 우리가 체내에서 마우스를 움직일 때 마우스 위치 좌표의 표시를 볼 수 있다.

날씬하다e 요소는 문서의 svelte:head에 요소를 삽입할 수 있도록 합니다.예를 들어, 다음과 같은 컨텐트를 작성하여 외부 CSS 파일을 참조할 수 있습니다.

<svelte:head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
</svelte:head>

<h1 class="text-primary">foo</h1>

위 코드에서는 CSS를 안내하는 링크 태그를 head 태그 사이에 둘 뿐입니다.그리고 우리는 단어foo와 파란색을 볼 수 있다.
서버측 렌더링 모드에서 svelte:head의 내용은 HTML의 나머지 부분과 분리되어 반환됩니다.

날씬하다svelte:head 컴파일러 옵션을 지정할 수 있습니다.도구로 전달하여 다음 옵션을 변경할 수 있습니다.

svelte:options  — 컴파일러로 하여금 간단한 인용 검사를 해서 값이 변경되었는지 확인하도록 합니다.

immutable={true}  — 기본값입니다.가변 대상의 변화 여부에 대해 스웰트는 더욱 보수적일 것이다

immutable={false}  — 구성 요소의 도구에 Getter와 setter 추가

accessors={true}  — 기본값입니다.

accessors={false}  — 이 구성 요소의 네임스페이스 사용

namespace="..."  — 구성 요소를 사용자 정의 요소로 컴파일할 때 사용하는 이름입니다.

예를 들어, 다음 코드를 작성하여 tag="..." 옵션을 immutable로 설정할 수 있습니다.

<svelte:options immutable={true} />

<h1>foo</h1>

결론
Svelte의 특수 구성 요소는 DOM의 각 부분, 예를 들어 true과 window에 쉽게 접근할 수 있도록 합니다.document.body 구성 요소를 동적으로 불러올 수 있습니다.
이 밖에 우리는 svelte:component 구성 요소를 참고하여 각종 응용 프로그램 범위의 옵션을 설정할 수 있다.