Vanilla JavaScript 및 Vue에서 HTML 템플릿 태그 사용

지난 몇 달 동안 나는 VueJ와 Vanilla Java Script를 둘러싸고 대량의 문서, 교과서, 연습을 해 왔다.저는 Tech Elevator의 과정 개발자입니다. 이것은 코딩 훈련 캠프로 학생들에게 14주 안에 코드를 작성하는 방법을 가르칩니다.이를 감안하면 모든 내용은 초보자를 대상으로 하지만 모두를 대상으로 한다.
최근에 Fetch API에 대한 강좌와 연습을 하고 있습니다. 로컬 파일에서 JSON 데이터를 읽고 페이지에 추가하는 좋은 예를 제공하고 싶습니다.간단한 예에서, 나는 createElement와 createTextNode만 사용하고, 이 항목들을 DOM에 추가할 것이다.
더 복잡한 예에서 더 많은 태그가 관련되면 원소, 노드, 처리 속성과 클래스를 만드는 것이 매우 번거로워질 수 있다.이 예에서 915는 좋은 해결 방안이다.나는 또 많은 개발자(초보자와 수의사)가 이것이 무엇인지 모르고 우리가 왜 그것을 사용해야 하는지도 모른다는 것을 깨달았다.
본문에서 HTML과 Vanilla JavaScript의 <template> 표시를 보겠습니다.이 태그가 왜 존재하는지 알면 왜 Vue 단일 파일 구성 요소에서 이 태그를 사용하는지 더 잘 알 수 있습니다.

컨텐트 요소 템플릿 컨텐트 요소 템플릿

HTML에서 다른 템플릿처럼 <template></template> 표시를 볼 수 있습니다.템플릿은 다른 컨텐트를 작성할 수 있는 시작점을 제공하는 몰드 또는 패턴입니다.MDN 문서에서는 HTML 컨텐트 템플릿을 다음과 같이 정의합니다.

The HTML Content Template (<template>) element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

이것은 매우 단도직입적으로 들리지만, 만약 그것이 아직 완전한 의미가 없다면 걱정하지 마십시오.우리는 실제적인 예를 볼 것이며, 우리를 위해 모든 것을 분명하게 할 수 있기를 바란다.

HTML 컨텐트 템플릿 데모

나는 그것들을 함께 놓아서 Vanilla JavaScript에서 <template></template> 표시를 어떻게 사용하는지 보여 주었다.이 프레젠테이션의 원본 코드를 보고 싶으면 에서 찾을 수 있습니다.Google은 일부 JSON 데이터에 따라 사용자 카드 목록을 불러오는 페이지를 구축할 것입니다. 결과는 다음과 같습니다.
Github

값을 올리다

앞서 말한 바와 같이 이 프로젝트의 목표는 JSON 파일에서 사용자 데이터를 읽고 사용자 정보를 페이지에 쓰는 것입니다.원소를 하나하나 만들어서 페이지에 추가해야 할 때, 이것은 매우 번거로워진다.
더 좋은 방법은 태그와 CSS의 외관을 구축하고 태그를 템플릿 태그에 포장하는 것이다.다음 HTML은 내가 최종적으로 얻은 것이다.완성되면, 나는 표지 주위에 <template></template> 표지를 추가하고 id를 주기만 하면 된다.

<template id="user-card-template">
<div class="user">
    <div class="profile">
        <img src="" class="avatar"/>
        <h2></h2>
        <span class="title"></span>
        <div class="social">
            <a href="https://www.github.com" target="_blank"><i class="fab fa-github fa-2x" target="_blank"></i></a>
            <a href="https://www.reddit.com" target="_blank"><i class="fab fa-reddit-alien fa-2x"></i></a>
            <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
            <a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
            <a href="http://www.facebook.com" target="_blank"><i class="fab fa-facebook-f fa-2x"></i></a>
        </div>
    </div>
    <div class="stats">
        <div class="posts">
            <h3></h3>
            <span>Posts</span>
        </div>
        <div class="likes">
            <h3></h3>
            <span>Likes</span>
        </div>
        <div class="followers">
            <h3></h3>
            <span>Followers</span>
        </div>
    </div>
</div>
</template>

JavaScript

이제 나는 나의 표시가 생겼다. 이제 자바스크립트를 보자.나는 users.json라는 JSON 파일을 가지고 있는데, 이것은 9개의 사용자로 구성된 그룹이 있는데, 아래와 같다.

{ 
    "id": 1,
    "fullname": "Jonathan Stark",
    "title": "Software Developer",
    "avatar": "img/user_1.png",
    "social": {
        "github": "github_username",
        "reddit": "reddit_username",
        "twitter": "twitter_username",
        "instagram": "instagram_username",
        "facebook": "facebook_username"
    },
    "stats": {
        "posts": "150",
        "likes": "680",
        "followers": "199"
    }
}

첫 번째 단계는 에서 JSON을 읽는 것입니다. 이를 위해 Fetch API를 사용합니다.만약 네가 이전에fetch를 사용한 적이 있다면, 이것은 결코 무슨 새로운 일이 아니다.

fetch('users.json') 
.then((response) => {
  return response.json();
})
.then((users) => {
  // we have an array of users
})
.catch((err) => console.error(err));

이제 우리는 일련의 사용자가 생겨서 우리의 템플릿을 사용하기 시작할 수 있다.먼저 사용자의 브라우저가 HTML 컨텐트 템플릿 태그를 지원하는지 확인해야 합니다.현대 브라우저 만 사용하신다면 검사를 하는 것이 좋습니다.

if('content' in document.createElement('template')) {

});
} else {
    console.error('Your browser does not support templates');
}

현재 우리는 브라우저가 이 기능을 지원한다는 것을 알고 있습니다. 부모 용기에 대한 인용을 얻어야 합니다. 모든 사용자 카드를 이 용기에 추가할 것입니다. 이 예에서 사용자 id가 있는 요소입니다.그리고 우리는 수조의 모든 원소를 교체할 것이다.

if('content' in document.createElement('template')) {
    const container = document.getElementById('users');
    users.forEach((user) => {

    });
} else {
    console.error('Your browser does not support templates');
}

사용자 배열의 매번 교체에서 우리는 템플릿의 복사본(복제)을 만들 것이다.우리가 이렇게 하는 방식은 요소에 대한 인용을 얻고 내용 (템플릿 표시의 내용) 을 얻은 다음에 그것을 복제하는 것이다.우리는 깊이 있는 복제를 사용하여 모든 아이를 잡을 수 있도록 진정한 복제 노드 방법을 전달하고 있다.

const tmpl = document.getElementById('user-card-template').content.cloneNode(true);

거기서 우리는 특정 요소의 템플릿을 간단하게 조회하고 그 내용을 사용자 그룹에서 읽는 값으로 설정할 수 있다.대부분의 경우, 나는 단지 요소의 내부 텍스트를 설정할 뿐이다.마지막으로, 우리는 용기 요소에 대한 인용을 사용하고, 템플릿 표시의 모든 내용을 페이지에 추가합니다.

fetch('users.json') 
.then((response) => {
  return response.json();
})
.then((users) => {
  if('content' in document.createElement('template')) {
    const container = document.getElementById('users');
    users.forEach((user) => {
      const tmpl = document.getElementById('user-card-template').content.cloneNode(true);
      tmpl.querySelector('h2').innerText = user.fullname;
      tmpl.querySelector('.title').innerText = user.title;
      tmpl.querySelector('img').setAttribute("src",user.avatar);
      tmpl.querySelector('.posts h3').innerText = user.stats.posts;
      tmpl.querySelector('.likes h3').innerText = user.stats.likes;
      tmpl.querySelector('.followers h3').innerText = user.stats.followers;
      container.appendChild(tmpl);
    });
  } else {
    console.error('Your browser does not support templates');
  }
})
.catch((err) => console.error(err));

그것은 마땅히 그것을 지지해야 한다 조건문

이 글을 다 쓴 후, 나의 친구 토드는 나에게 아주 좋은 문제를 물었다.

토드 샤프
@ 반복 부호

좋은 문장, 단.템플릿은 조건문을 지원합니까?만약 사용자가 이러한 링크가 없다면?
2019년 1월 26일 오후 15:35
0
1
우리가 여기서 하는 것은 복제 템플릿 표시 내부의 표시이다.이것은 정상적인 표시이기 때문에, 우리는 그것으로 우리가 하고 싶은 모든 일을 할 수 있다.어떤 사용자는 모든 소셜네트워크서비스에 계정이 있고, 어떤 사용자는 없다고 가정한다.

"social": {
  "github": "github_username",
  "reddit": "reddit_username",
  "twitter": "twitter_username",
  "instagram": "instagram_username",
  "facebook": "facebook_username"
}

"social": {
  "github": "github_username",
  "reddit": "reddit_username",
  "twitter": "twitter_username"
}

우리가 여기서 할 수 있는 일은 사용자가 지원할 수 있는 모든 알려진 소셜네트워크서비스를 교체하는 것이다.소셜 대상에 이 키가 없으면 DOM에서 이 요소를 삭제합니다.마찬가지로 우리는 이곳에서 일반 요소를 사용하기 때문에 가시성을 숨기거나 완전히 삭제할 수 있습니다.이 경우, 우리는 그것을 삭제하려고 한다. 만약 그것을 숨기기만 한다면, 어떤 경우, 우리는 이 빈 공간을 가지게 될 것이다. 이것은 보기에 좋지 않기 때문이다.

// this is a list of social networks we display under a users profile
const socialLinks = ['github','reddit','twitter','instagram','facebook']
// iterate over that list and check to see if they have an account on that network
socialLinks.forEach((social) => {
  // if they don't have a link in the JSON data hide that link & icon
  if(!user.social.hasOwnProperty(social)) {
    tmpl.querySelector(`.${social}`).remove();
  }
});

허브 자바스크립트 Wrapup의 HTML 템플릿

이것은 태그에 템플릿을 만들고 클론 템플릿을 만들고 데이터를 추가하는 데 필요한 모든 내용입니다.나는 이 점을 언급할 것이다. 왜냐하면 이 점을 이해하는 것이 매우 중요하기 때문이다. 그러나 이러한 방법을 사용하고 원본 코드를 보면 템플릿 코드만 볼 수 있기 때문이다.이것은 페이지에 쓸 데이터가 있다면 검색엔진에 대한 우호가 필요하다는 것을 의미한다. 이것은 좋은 해결 방안이 아닐 수도 있다.

Vue의 템플릿 태그

<template></template> 라벨이 무엇인지 알았으니 Vue의 사용 목적은 좀 더 합리적이어야 한다.Vue에 새 단일 파일 구성 요소를 생성하면 다음 코드가 제공됩니다.

<template>
    <div id="users">
        <!-- markup here -->
    </div>
</template>

<script>
    // js here
</script>

<style>
    /* css here */
</style>

템플릿 표시에 최고급 요소를 포함해야 하는 이유를 잘 알 수 있을 것이다.Vue는 템플릿 태그의 모든 내용을 가상 DOM으로 컴파일합니다.Vue 문서에서는 템플릿 구문을 다음과 같이 설명합니다.

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

결론

만약 네가 <template></template> 라벨을 사용한 적이 없다면, 나는 네가 오늘 새로운 것을 배웠으면 한다.본문이나 제가 만든 프레젠테이션에 대해 언제든지 물어보세요.