Svelte 노트: 불어야 하는 몇 가지 이유

Svelte.js의 소개 글은 이미 매우 많은데 대부분이 하나하나 기능과 사용 방법을 대체적으로 소개하는 것이다. 배우고 싶으면 홈페이지에서 공부하는 것을 권장한다. 홈페이지에서 REPL을 제공하여 설명을 보면서 직접 학습할 수 있다. 언어가 간결하고 정확하며 가장 좋은 자료이다.
공식 홈페이지에는 다음과 같은 세 가지 장점이 나열되어 있습니다.

No virtual DOM – 가상 DOM 사용하지 않음

Write less code - 코드가 적음

Truly reactive-진정한 응답

가상 DOM 없음
그것의 특성은 이 3대 프레임워크가 매우 유행하는 시대에 가상 DOM을 사용하지 않는다는 점만으로도 매우 특수하다.가상 DOM은 React와 Vue가 선택한 일부 성능 문제를 해결하는 방안으로서 확실히 많은 장점을 가져왔지만 Svelte는 가상 DOM 방안을 채택하지 않고 일부 응용 장면에서 속도가 가상 DOM과 빨라야 하는 방안은 놀랍지만 그는 다른 구조 앞에서 특히 출중한 이유가 될 수 없을 것 같다.
부호량이 매우 적다
또 다른 장점은 코드량이 적다는 것이다. 사상적이고 재미있는 디자인 덕분이다. 내가 작가와 Svelte와 관련된 일부 항목을 읽고 정리한 결과 작가는 Svelte에서 파일을 통해 도입하고 역할 영역을 조합하여 다른 언어에서'클래스'라는 구조 효과를 형성하는 것을 추천했다. 이'클래스'에서 설명한 변수는 바로'클래스'의 속성이다.함수는 클래스의 방법입니다.예를 들어 다음 코드는 다음과 같습니다.

const nodeMap = new Map()
let _id = 0
let currentBlock

export function getNode(id) {
  return nodeMap.get(id)
}

export function getAllNodes() {
  nodeMap.values()
}

const rootNodes = []
export function getRootNodes() {
  return rootNodes
}

function addNode(node, target, anchor) {
  nodeMap.set(node.id, node)
  nodeMap.set(node.detail, node)

  let targetNode = nodeMap.get(target)
  if (!targetNode || targetNode.parentBlock != node.parentBlock) {
    targetNode = node.parentBlock
  }

  node.parent = targetNode

  const anchorNode = nodeMap.get(anchor)

  if (targetNode) {
    let index = -1
    if (anchorNode) index = targetNode.children.indexOf(anchorNode)

    if (index != -1) {
      targetNode.children.splice(index, 0, node)
    } else {
      targetNode.children.push(node)
    }
  } else {
    rootNodes.push(node)
  }

  add(node, anchorNode)
}

이 코드는 svelte-listener이라는 가방에서 나온 것으로, 내가 Svelte-devtool의 원본 코드를 읽을 때 본 것이다.코드의 구조를 보면 사람에게 주는 느낌은 일종의'클래스'의 느낌이 아니다. 속성이 있고 get이 있고add가 있다. 홈페이지에서 제시한tutorial의 실례 코드를 포함한다. 예를 들어 다음과 같다.

	let count = 0;
	$: console.log(`the count is ${count}`);

	function handleClick() {
		count += 1;
	}



	Clicked {count} {count === 1 ? 'time' : 'times'}

count은 하나의 매개 변수로 handleClick()에 전달할 수 있는 방법으로 형식을 바꾸기만 하면 된다.

	function handleClick(count) {
		return count += 1;
	}

같은 효과를 낼 수 있지만 이런 디자인은 일부 작업을 줄이고 코드량이 적은 목적을 달성할 수 있다.
다른 내장 방법을 도입하지 않는 전제에서 Vue에 대응하는 dataprops10computed10method의 몇 가지 속성을 비슷하게 나타낼 수 있다.
js, HTML, CSS는 분리되고 원본 코드를 쓰는 데 가깝기 때문에 내가 보기에 학습 비용은 상대적으로 적다.이 디자인 모델은 내가 비교적 좋아하는 Svelte의 장점 중 하나이고 호응성에 기반을 제공했다.
응답 프로그래밍
Svelte의 응답식 디자인은 내가 비교적 좋아하는 특성 중 하나로 $: 기호의 응답 디자인에 의존한다. 비록 이것이 전부는 아니지만 대표적이다. 이것은 Vue와 유사하다.js에서 computed의 특성은 의존하는 속성을 자동으로 분석하고 구독을 한다. 일단 변화하면 하나의 영역의 호출을 출발하고 사용 방식이 매우 간단하다. 기본적으로 이것은 프레임워크가 반드시 실현해야 하는 기능이고React와 Vue의 디자인도 나쁘지 않다. 그러나 최근의 실천 경험은 나로 하여금 그에 따른 부담이 상대적으로 적다고 느끼게 한다.
기능 내장
Svelte의 의도적인 점은 재미있는 내장 기능을 제공하는 데 있다.
예를 들어 등 특수 라벨.
예를 들어 motion이 제공하는 것은 매끄럽게 변화하는 방법이다. Transitions는 간단하고 사용하기 쉬운 입장 애니메이션을 제공하고 animation은 CSS 속성 변환 애니메이션 제작 방법을 제공한다. Context는 다른 구성 요소와 약간 다르지만 더 말할 필요가 없다.가장 존경하는 것은 사실 내장된 Store 특성입니다!
Store
Store는 구성 요소 간 통신 수요의 해결 방안으로서 모든 프레임워크가 이를 위해 노력한다. React는 Redux의 수요가 있고 Vue는 Vuex를 조립했다. 그리고 mobx 등 일련의 디자인 철학이 있는 상태 관리 방안도 있다.하지만 Svelte는 자체적으로 Store 기능을 내장하여 매우 유용합니다!!
구체적으로 사용 방법을 소개하지 않지만 그의 자동 구독, 사용자 정의 및 응답식과 잘 어울리는 것은 원래 복잡한 기능 수요를 간단한 조합으로 바꾸고 구성 요소 간의 통신 구성 요소를 추가로 도입하는 부담이 없다. 이 특성을 이 시간 안에 사용하면 나는 정말 그를 폭로할 것이다!!
Svelte가 반드시 유행할 거라고 믿고 주류 로고 중의 하나가 될 거야!!!