슬림한 JS 시작

여보게, 동료들아!이것은 Svelte JS에 대한 아주 작은 소개이자 초보자에게 Svelte를 설명하는 재미있는 방식이다. 이것은 단지 Svelte의 속도와 용이성을 보여주기 위해서이다.
React, Angular, Vue 개발자는 실행할 때 응용 프로그램에서 유지하고 컴파일해야 하는 패키지, node_모듈, 의존항을 알게 될 것입니다.이것은 틀림없이 응용 프로그램의 속도를 몇 밀리초 낮출 것이다.네, 아주 작지만 매번의 속도가 떨어질 때마다 결합해 보세요.우리는 몇 초 동안 손해를 볼 것이다. 이것은 매우 중요한 것이다.그렇다면 왜 우리는 응용 프로그램을 구축할 때 모든 일을 하지 않는가.실행할 때 컴파일하기보다, 왜 우리는 렌더링하기 전에 모든 내용을 구축하지 않습니까?

이것이 바로 SvelteJS가 유용한 곳이다.Svelte는 프레임워크가 아니라 컴파일러입니다.Svelte는 가상 DOM이 아닌 실제 DOM을 사용합니다.Svelte는 이 점을 이용하여 속도가 매우 빠르다.따라서 우리는 svelte를 사용하여 간단한 업무 목록을 만드는 방법을 더욱 깊이 있게 이해합시다.
응용 프로그램에서 우리는 볼 것이다

슬림한 구성 요소 생성 방법

구성 요소 간에 아이템을 전달하는 방법

구성 요소 간에 함수를 호출하는 방법

React 개발자라면 도구를 전달하고 도구나 구성 요소로서의 기능을 익힐 것입니다.

슬림한 어플리케이션 설정:

날씬한 템플릿을 사용할 수 있는 두 가지 방법이 있습니다.

REPL 사용

degit 사용

이 프로그램에 대해degit를 사용할 것입니다.REPL을 사용하려면 지침here을 따르십시오.
degit 사용:
Degit은 프로젝트 비계 도구입니다.터미널을 열고 슬림 프로젝트를 만들기 위해 다음과 같은 동작을 수행합니다.

npx degit sveltejs/template sample-svelte-project
cd sample-svelte-project
npm install
npm run dev

이제 프로젝트 구조를 살펴봅시다.

이것은 React 프로젝트와 매우 유사합니다.만약 당신이 src 디렉터리를 본다면main이 있다는 것을 발견할 수 있습니다.js와 응용 프로그램.날씬했어주체를 상상해 보세요.js는 당신의 색인을 좋아합니다.js는 모든 내용을 함께 컴파일하여 DOM과 상호작용을 합니다.The'.'svelte'파일은 독립된 구성 요소로 자신의 HTML, CSS, js 코드가 있습니다.기본 파일 보기
응용 프로그램.날씬했어

<script>
  export let name;
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {name}!</h1>

HTML, CSS, js를 포함하는 간단한 구성 요소일 뿐입니다.슬림한 구성 요소의 장점은 스타일이 구성 요소 블록 수준에 유지된다는 것이다.이것은 응용 프로그램에서 h1 탭에 스타일을 추가한다는 것을 의미합니다.svelte는 응용 프로그램에서 사용하지 않는 h1 탭에 반영되지 않습니다.날씬했어각도와 반응과 마찬가지로 변수의 사용 방식은 같다.
주요했어회사 명

import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    name: "world",
  },
});

export default app;

여기는 svelte가 프로그램을 컴파일하고 구축하는 곳입니다.이것은 구성 요소 프로그램을 가져오고 실제 DOM 주체 안에 도구 이름을 가진 새로운 요소를 만듭니다.
이제 저희 페이지를 한번 보도록 하겠습니다.

너무 빨리 물들었어!아닌가?

프로그래머: npm ru...
날씬: 완성!
이것이 바로 날씬한 쿨한 점이다.코드를 변경한 후save를 누르면 패키지를 검사합니다.js 아래의 공공과 모든 구성 요소를 찾을 수 있습니다. 클래스, 텍스트는 모든 컴파일이 준비되어 있으며, 단지 렌더링되기를 기다릴 뿐입니다.
지금, 우리는 업무 대기 항목의 목록을 좀 변경합시다.우리는 응용 프로그램을 4개의 서로 다른 가벼운 구성 요소로 나눌 것이다.

부록.슬림

사이드바.슬림

미처리 사항.슬림

TodoView.슬림

주.js

대기사항 목록 응용 프로그램 흐름
우리 단독으로 한번 봅시다.
주요했어회사 명

import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

현재, 우리는 응용 프로그램 구성 요소에 어떤 도구도 전달할 필요가 없기 때문에 도구를 무시합니다.
사이드 바.회사 명

<script>
  import Todo from "./Todo.svelte";

  export let viewTodo;
  export let removeTodo;

  let todo = "";
  let todoList = [];
  function addTodo(e) {
    if (e.keyCode === 13) {
      todoList = todoList.concat(todo);
      todo = "";
    }
  }

  function todoDone(key) {
    var temp = todoList;
    temp.splice(key, 1);
    todoList = temp;
    removeTodo();
  }
</script>

<style>
  .sidebar-container {
    position: fixed;
    right: 0;
    width: 400px;
    height: 100vh;
    background-color: #fff;
    top: 0;
    z-index: 999;
    box-shadow: 1px 1px 20px #000;
  }
  .todo-input {
    width: 100%;
    height: 5%;
  }
  input {
    color: rgb(56, 56, 56);
    font-weight: 70;
    font-size: 15px;
  }
  input::placeholder {
    color: rgb(165, 165, 165);
    font-weight: 70;
    font-size: 15px;
  }
  .empty-todo {
    padding: 10px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: rgb(133, 133, 133);
    font-weight: 70;
    font-size: 15px;
  }
  .todo-list-container {
    overflow-y: scroll;
    height: 95%;
  }
</style>

<div class="sidebar-container">
  <input placeholder="Enter todo list" type="text" class="todo-input" bind:value="{todo}" on:keydown="{addTodo}" />
  <div class="todo-list-container">
    {#if !todoList.length}
    <div class="empty-todo">No Todos yet!</div>
    {:else} {#each todoList as todo,i }
    <Todo todo="{todo}" key="{i}" viewTodo="{viewTodo}" todoDone="{todoDone}" />
    {/each} {/if}
  </div>
</div>

매우 간단한 업무 목록 사이드바우리는 TODO를 저장할 그룹을 만들고 TODO를 다른 구성 요소로 렌더링합니다.
미처리 사항.회사 명

<script>
  export let todo;
  export let key;
  export let todoDone;
  export let viewTodo;

  const completedMessage = ["I'm Done!", "Accomplished!", "Finished!", "Done and dusted!", "Done for the day!", "Peace out!", "Cash me outside!"];

  function setRandomCompletedMessage() {
    var index = Math.floor(Math.random() * 7);
    return completedMessage[index];
  }
</script>

<style>
  .todo-item-wrapper {
    padding: 10px;
    color: rgb(65, 65, 65);
    font-weight: 70;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .todo-item {
    cursor: pointer;
  }
  .done-btn {
    background-color: #fff;
    border-radius: 15px;
    color: rgb(65, 65, 65);
    cursor: pointer;
  }
</style>

<div class="todo-item-wrapper">
  <div class="todo-item" on:click="{viewTodo.bind(this," todo)}>
    {todo}
  </div>
  <button class="done-btn" on:click="{todoDone.bind(this," key)}>
    {setRandomCompletedMessage()}
  </button>
</div>

우리는 받은 도구로 새로운 대기 사항만 과장할 것이다.이 요소를 그룹에서 꺼내려면finish 단추를 추가합니다.
TodoView.회사 명

<script>
  export let currentTodo;
  var extras = [];
  var currentTodoExtra = extras[currentTodo] ? extras[currentTodo] : "Sample";
</script>

<style>
  .view-todo-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .current-todo-wrapper {
    background-color: #fff;
    height: 95%;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 20px #000;
    border-top-right-radius: 40px;
  }
  .current-todo-item {
    color: rgb(56, 56, 56);
    font-size: 40px;
    font-weight: 100;
  }
</style>

<div class="view-todo-container" style="{`width:${width}px`}">
  {#if currentTodo.length}
  <div class="current-todo-wrapper">
    <div class="current-todo-item">{currentTodo}</div>
  </div>
  {/if}
</div>

이것은 단지 다른 구성 요소에서 도구의 추가 기능을 볼 뿐이다.예를 들어 사이드바에서 응용한 다음에 제공에 응용한다.
응용 프로그램.날씬했어

<script>
  import Sidebar from "./Sidebar.svelte";
  import TodoView from "./TodoView.svelte";

  var currentTodo = "";

  function viewTodo(todo) {
    currentTodo = todo;
  }

  function removeTodo() {
    currentTodo = "";
  }
</script>

<TodoView currentTodo="{currentTodo}" />
<Sidebar viewTodo="{viewTodo}" removeTodo="{removeTodo}" />

마지막으로 응용 프로그램의 실제 운행 상황을 봅시다.

저희가 해냈어요.