JSON5와 HMPL 통합

HMPL의 새 버전에는 JSON5 모듈이 통합되어 있어 작업이 여러 번 질적으로 향상됩니다! 이번 글에서는 왜 이런 일이 이루어졌는지, 왜 필요한지 좀 더 자세히 설명하고 싶습니다.

JSON5 정보

우선 JavaScript와 실제로 이 형식을 사용하는 거의 모든 프로그래밍 언어에 존재하는 JSON의 오랜 문제에 주목할 가치가 있습니다.

오브젝트 작업을 하다 보면 모든 것이 편리하고 실용적인 것 같아요. JSON은 매우 편리하며 거의 모든 작업에 유용할 JSON.parse 및 JSON.stringify가 있는데 왜 추가 패키지가 필요한가요? 하지만 다음 코드를 살펴보겠습니다.

const user = {
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};

const jsonString = JSON.stringify(user);

이제 우리가 얻은 것을 콘솔에 출력해 보겠습니다.

console.log(jsonString);

// output - {"id":0,"name":"Tony","age":43,"hobbies":["Building anthill"]}

우리는 구문 분석을 통해 쉽게 다시 번역할 수 있고 모든 것이 멋져 보이는 평범해 보이는 문자열을 얻었습니다. 이 문자열만 디스크에서 "많은" 공간을 차지하며 이 모든 것을 수동으로 작성하는 것이 아니라 편리한 객체를 통해 JavaScript로? 예, 이것이 이 기능의 주요 문제점입니다.

동일한 JavaScript 개체를 가져와 정상적으로 문자열로 작성하면 JSON.Parse는 이를 구문 분석하지 않고 오류를 발생시킵니다.

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON.parse(userString);

// Uncaught SyntaxError: Expected property name or '}' in JSON at position 6 (line 2 column 5)
//   at JSON.parse (<anonymous>)
</anonymous>

이 문제를 해결하려면 문자열을 형식에 맞게 조정해야 합니다. 이렇게 하려면 개체 속성 근처에 큰따옴표를 수동으로 지속적으로 작성해야 합니다. 우리는 항상 끝에 쉼표를 넣지 않아야 하며 JS 등에서 문자열에 주석을 쓰지 않아야 합니다. 편리한 기능을 얻을 수 있지만 이를 수동으로 작성하는 것으로 간주하면 정말 놀랍습니다. 불편합니다. 모든 사람이 JSON이 아닌 JS 개체를 수동으로 작성하는 데 익숙하기 때문입니다.

따라서 JSON5 모듈을 사용하면 JS와 거의 비슷하게 문자열을 작성할 수 있으며 위에서 설명한 문제가 발생하지 않습니다.

import JSON5 from "json5";

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON5.parse(userString);

/*
{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};
*/

모듈 자체의 슬로건에도 "JSON5 – JSON for Humans"가 나와 있습니다.

물론 언뜻 보면 문제가 대수롭지 않게 보일 수도 있지만 일상적인 문제가 되기 전까지는 그렇습니다. 따옴표를 한 번 수정하고 쉼표를 제거하는 것은 괜찮지만 매일 수동으로 수행하는 것은 엄청나게 지루합니다. 따라서 이 문제를 해결하는 모듈 중 하나로 이 모든 것에 가장 적합합니다.

추상적인 예가 아닌 업무에 사용되는 구체적인 예를 기억할 수도 있습니다. 일부 코드 어셈블러나 다른 것으로 작업할 때 구성 파일을 구성한 적이 있습니까? 동일한 린터, 접두사, 모듈 빌더, 다양한 텍스트 편집기 등 이 모든 것이 JSON을 통해서도 작동합니다.

그리고 일반적으로 이러한 파일은 사용자가 수동으로 채웁니다. 그리고 이제 그러한 순간을 구문 분석할 필요가 있습니다. 예를 들어 구성의 예는 다음과 같습니다.

const user = {
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};

const jsonString = JSON.stringify(user);

그리고 이러한 객체는 애플리케이션 측에서도 구문 분석되어야 합니다. 이러한 매개 변수는 설명 및 기타 농담뿐만 아니라 모든 형식이 될 수 있습니다. 이러한 파서를 수동으로 작성하는 것은 비용 효율적이지 않으며 단순히 불필요합니다.

HMPL의 이점에 대해

HMPL 모듈은 객체를 전달하는 확장된 HTML 마크업을 기반으로 하며, 출력 시 서버에서 준비된 구성 요소를 받습니다. 코드 예를 들어보겠습니다.

console.log(jsonString);

// output - {"id":0,"name":"Tony","age":43,"hobbies":["Building anthill"]}

2.2.0 버전 이전에는 모듈이 JSON.parse 기반이었기 때문에 이 모든 것이 완전 불편했습니다. stringify 함수가 도입되어 어떻게든 이 지점을 우회했지만 여전히 별도의 .hmpl 파일에 있으므로 js 코드를 작성하는 데 문제가 있다는 것이 분명합니다. 다음은 stringify 및 파일의 예입니다.

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON.parse(userString);

// Uncaught SyntaxError: Expected property name or '}' in JSON at position 6 (line 2 column 5)
//   at JSON.parse (<anonymous>)
</anonymous>

mail.hmpl:

import JSON5 from "json5";

const userString = `{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
}`

JSON5.parse(userString);

/*
{
    id: 0,
    name: "Tony",
    age: 43,
    hobbies: ["Building anthill"],
};
*/

따라서 사이트를 더욱 빠르고 작게 만들려면 JSON5와의 통합이 가장 좋은 방법이라고 생각합니다. 이제는 JavaScript에서 개체를 복사하여 HTML 파일에 붙여넣기만 하면 되기 때문에 일반적으로 매우 편리합니다.

---

그런데 모듈 저장소 자체는 여기에서 찾을 수 있습니다. 이 모듈이 유용하다고 생각하시면 별표로 평가해 주시면 좋을 것 같습니다 :)

hmpl 언어 / hmpl

? JavaScript를 위한 서버 지향 맞춤형 템플릿

서버 중심의 JavaScript용 맞춤형 템플릿

웹사이트 • 문서 • 데모 샌드박스 • 예

hmpl은 서버에서 클라이언트로 UI를 표시하기 위한 작은 템플릿 언어입니다. 이는 가져오기를 통해 서버로 전송되고 기성 HTML로 처리되는 사용자 정의 가능한 요청을 기반으로 합니다. 언어는 구문적으로 객체 기반이며 JSON5와 통합되어 있습니다. 자바스크립트 파일의 크기를 줄이고 마치 최신 프레임워크로 작성된 것과 동일한 UI를 표시합니다.

사용방법

"hmpl-js"에서 hmpl을 가져옵니다.

const templateFn = hmpl.compile(
  `<div>
      
<div>
<div>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24"><title>전체 화면 모드로 전환</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24"><title>전체 화면 모드 종료</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>
<div>
<h2 id="왜-HMPL인가">왜 HMPL인가?</h2>

</div>

<p dir="auto">사용 중…</p>

GitHub에서 보기

위 내용은 JSON5와 HMPL 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!