HTML 및 템플릿 & JavaScript 템플릿 텍스트

23466 단어 javascript

HTML 및 템플릿 & JavaScript 템플릿 텍스트


HTML 및 템플릿 & JavaScript 템플릿 텍스트
웹의 HTML은 일반적으로 재사용 가능한 구성 요소로 구성되어 있으며, 이러한 구성 요소는 템플릿으로 구성되어 있어 웹 사이트의 다른 부분을 편집하기 편리하다.웹에서는 Handlebar, Pug, Vue, JSX 등 많은 템플릿 언어를 사용합니다.그것들은 주로 HTML을 작성하는 데 쓰인다.현대 JavaScript에는 HTML 작성을 포함한 다양한 목적으로 사용할 수 있는 템플릿 구문이 내장되어 있습니다.
본고에서 저는 템플릿화에 사용되는 자바스크립트 문법을 소개하고 현실 세계에서 이를 사용하여 HTML을 정리하는 방법을 보여주며 템플릿 문자로 템플릿화된 프레임워크를 소개할 것입니다.
Template Literals는 매우 좋은 JavaScript 기능입니다. 아직 많이 사용되지 않았을 수도 있습니다. 문자열처럼 보입니다.
const message = `Hello World`;

message === "Hello World"
새 행을 포함할 수 있습니다.
const message = `Hello
World`;

message === "Hello\nWorld"
${} 구문을 사용하여 변수를 주입할 수 있습니다.
const name = 'Ada';

const message = `Hello ${name}`;
템플릿 함수를 생성하기 위해 Arrow Function Expressions 와 결합하여 사용할 때 유효합니다. 템플릿 함수는 매개 변수를 문자열로 변환합니다.
const messageFn = name => `Hello ${name}`;

const message = messageFn("Ada");

태그된 템플릿 텍스트


템플릿을 문자열로 변환하기 전에 템플릿에 태그를 배치할 수 있습니다.
태그는 호출 함수입니다. 첫 번째 매개 변수는 수조이고 나머지 매개 변수는 자리 표시자의 값입니다.다음 예시에서 우리는 rest parameter 을 사용하여 모든 자리 표시자 파라미터를 하나의 그룹에 넣습니다.
항상 자리 표시자 수보다 문자열이 더 많습니다.이러한 배열을 교차하여 출력을 재조합하여 N개의 자리 표시자가 있는 템플릿의 출력은 다음과 같습니다.
문자열 [0] + 자리 표시자 [0] + 문자열 [1] + 자리 표시자 [1] +...+ 문자열 [N] + 자리 표시자 [N] + 문자열 [N+1];
이것은 JavaScript의 모양입니다.
function myTag(strings, ...placeholders) {
  const N = placeholders.length;
  let out = '';
  for (let i=0; i<N;i++) {
   out += strings[i] + placeholders[i];
  }
  out += strings[N];
  return out;
}

const message = myTag`Hello ${1} world ${2}.`
이 함수는 문자열과 같습니다.템플릿 문자의 기본 동작인 원본 함수입니다.

const message = String.raw`Hello ${1} world ${2}.`
문자열도 사용할 수 있습니다.사용자 정의 템플릿 태그 내raw에서 문자열을 다시 생성합니다.다음 예시에서 입력을 검사해서 문자열인지 확인한 다음에 문자열을 사용합니다.raw는 데이터를 문자열로 출력합니다.
function myTag(strings, ...placeholders) {

  for (const placeholder of placeholders) {
    if (typeof placeholder !== 'string') {
      throw Error('Invalid input');
    }
  }

  return String.raw(strings, ...placeholders);
}
태그 템플릿 문자열은 문자열을 반환할 필요가 없으며 입력 길이를 측정하는 데 매우 간단한 태그입니다.
function myTag(a, ...b) {
  return String.raw(a, ...b).length;
}

HTML 태그의 템플릿 문자(&T)


템플릿 문자는 HTML에 적합합니다. 줄 바꿈 문자를 추가할 수 있고 동적 클래스와 다른 속성을 명확하게 가지고 있기 때문입니다.
const myHTMLTemplate = (title, class) => `
  <!DOCTYPE html>
  <html>
    <head><title>${title}</title></head>
    <body class="${class}">
      ...
`;
Visual Studio 코드를 사용하면 Lit-HTML extension 구문 강조 표시와 HTML intellisence 기능, 그리고 emmet HTML이라는 태그가 있는 템플릿을 사용하는 바로 가기가 추가됩니다.문자열을 사용해도 html 표시는lithtml 라이브러리의 표시가 아니다.raw는 JavaScript 또는 TypeScript 파일에서 진정한 HTML 기능을 제공합니다.
JS 파일에서 HTML 구문 강조 표시

표시된 템플릿 문자를 사용하여 HTML 정리


사용자가 생성한 내용을 포함할 수 있는 HTML을 출력할 때 악성 JavaScript 사용자가 여러 요소에 주입하려고 할 수 있으므로 조심해야 합니다. 이러한 유형의 공격을 크로스 사이트 스크립트나 XSS라고 합니다.
가장 좋은 것은 위험 요소와 속성을 제거하는 것이다.템플릿 문자 표시에서 html-parser2 같은 라이브러리를 사용할 수 있습니다.
우리는 자리 표시자에 두 가지 유형의 입력을 원한다. 정리할 원본 텍스트 문자열과 우리가 작성하거나 정리기를 통해 처리한 안전한 HTML이다.이 클래스는 하나의 문자열만 저장합니다. 우리는 그것으로 안전한 문자열을 표시할 수 있습니다.
class SafeHTML {
    constructor (inStr) {
        this.string = inStr;
        this[Symbol.toPrimitive] = function (hint) {
            return this.string;
        }
    }
}
그리고 우리는 SafeHTML 대상에 아무런 작용이 없는 템플릿 문자 표시 함수를 가지고 템플릿 문자에서 새로운 SafeHTML로 되돌아오는 원시 문자열을 정리합니다.
const html = (stringArray,...placeholders)=>{
    const sanitisedHTMLArray = placeholders.map(
        p => p instanceof SafeHTML ? p : stripHTML(p)
    );
    const out = String.raw(stringArray, ...sanitisedHTMLArray);
    return new SafeHTML(out);
}
먼저 HTML을 제거하기 위해서 나는 내가 허용하고 싶은 모든 요소와 안전한 속성을 열거했다. 이것은 대부분 포맷이나 의미에 사용된다.
const allowedTagAttributes = {
 a: ["href"],
 b: [],
 i: [],
 img: ["src", "alt", "title"],
 abbr: ["title"],
 ul: [],
 li: [],
 h1: [],
 h2: [],
 h3: [],
 h4: [],
 h5: [],
 h6: [],
 hr: [],
 figure: [],
 figcaption: [],
 p: [],
 u: [],
 s: [],
 ruby: [],
 small: [],
 span: [],
 del: [],
 strong: [],
 table: [],
 thead: [],
 tbody: [],
 tr: [],
 td: [],
 time: [],
 ol: [],
};

const allowedTags = *Object*.keys(allowedTagAttributes);
그리고 htmlparser2를 사용하여 텍스트 문자열을 입력하고 허용된 요소만 사용하여 HTML 문자열을 재구성합니다.
function stripHTML(inStr) {
 const textOut = [];
 const parser = new htmlparser2.Parser(
  {

   onopentag(tagname, attribs) {
    if (allowedTags.includes(tagname)) {
     const allowedAttribs = allowedTagAttributes[tagname];
     if (tagname === "a") {
      attribs.href = sanitiseURL(attribs.href);
     }

     textOut.push(
      `<${tagname} ${
       allowedAttribs
       .map((key) => attribs[key] ? `${key}=${attribs[key]}` : "")
       .join(" ")}>`
     );
    }
   },

   ontext(text) {
    textOut.push(text);
   },

   onclosetag(tagname) {
    if (allowedTags.includes(tagname)) {
     textOut.push(`</${tagname}>`);
    }
   },

  },
  { decodeEntities: false }
 );

 parser.write(inStr);
 parser.end();
 return textOut.join("");
}
우리가 방금 만든 html 표기 함수를 사용할 때, 우리는 현재 작성한 html과 사용자가 안전하지 않은 html를 분리할 수 있다.
const unsafe = `<img onmouseenter="location.href='[https://example.com'](https://example.com')" src="[http://placekitten.com/200/300](http://placekitten.com/200/300)" />`;

const safeHTML = html`

<style>
div {
  color: red;
}
</style>

<div>User Content: ${unsafe}.</div>

`;

JS 프레임워크에서 템플릿 문자 사용하기


기본 템플릿보다 더 많은 기능이 필요하다면, 템플릿 텍스트를 사용하는 매우 가벼운 프레임워크가 있습니다.
lit-html은 모두가 알고 있는 것으로 중합물 웹 구성 요소 프레임워크에 사용된다.
Polymer/lit-html
Efficient, Expressive, Extensible HTML templates in JavaScript Full documentation is available at… github.com
비교적 가벼운 html는 매우 빠르고 작게 설계되었다.이것은 매우 좋은 기능과 위대한 방식으로 매우 빠른 사이트를 구축한다.
WebReflection/lighterhtml
Social Media Photo by Kristine Weilert on Unsplash The hyperHTML strength & experience without its complexity 🎉 I am… github.com
Ada Rose Cannon은 2020년 10월 6일에 글을 썼습니다.
Canonical link
Vue 슬라이더를 사용하여 백분율 조정을 위한 UI 만들기
hdu2181 하미턴 세계문제 우회 - 검색

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage