mizu.js로 HTML을 강화하세요!-JS 튜토리얼-php.cn

최고의 유연성과 적응성을 갖춘 대화형 웹 앱을 구축하고 싶으십니까?

확인해 보세요. mizu.js ?‍?!

HTML을 동적으로 렌더링하고, 이벤트를 수신하고, 사용자 정의 요소를 생성하고, 속성 바인딩 및 모델링하고, HTTP 요청을 처리하고, 마크다운 및 코드를 렌더링하는 등 약 30개의 강력한 지시어를 제공합니다!

그리고 모든 최신 브라우저에서 클라이언트 측에서 작동합니다...

Supercharge your HTML with mizu.js!

...또한 Node, Deno, Bun 등 즐겨 사용하는 런타임의 서버측도 있습니다! 정적 사이트 생성에도 사용할 수 있습니다!

Supercharge your HTML with mizu.js!

왜 또 다른 JavaScript 템플릿 라이브러리가 있나요?

귀하의 우려를 이해하지만 내 말을 들어주세요!

지난 몇 년 동안 저는 단지 간단한 대화형 웹 페이지를 만들기 위해 전체 생태계를 설정해야 한다는 필요성에 점점 더 좌절감을 느꼈습니다. 전용 도구 상자, 수많은 종속성, 트랜스파일 단계가 필요하고 언어의 새로운 상위 집합을 배우는 경우가 많습니다. 실제로 프로젝트를 진행하는 것보다 환경을 설정하는 데 더 많은 시간을 소비하게 될 수도 있습니다!

그래서 저는 설정이 필요 없고 사용하기 쉬운 Alpine.js, htmx와 같은 라이브러리를 좋아하게 되었습니다. 그러나 나는 이것들이 몇 가지 한계를 가지고 있다고 느꼈다. 대부분 클라이언트측 사용을 위해 설계되었기 때문에 서버측 렌더링 컨텍스트(정적 생성 포함)에서 사용하는 것은 실제로 불가능했습니다.

그동안 저는 점점 더 많은 동형 JavaScript(즉, 클라이언트와 서버 모두에서 작동)를 작성하기 시작했고 Deno가 이에 대한 완벽한 런타임이라는 것을 알게 되었습니다. Deno는 Node.js와 같은 자체 구현이 아닌 웹 표준에 의존합니다. 이 때문에 개발자는 Node, Deno, Bun 또는 브라우저 등 자신에게 가장 적합한 것을 자유롭게 사용할 수 있어야 하기 때문에 존재해서는 안되는 몇 가지 호환성 문제에 직면했습니다.

이 모든 점을 염두에 두고 위에서 언급한 모든 문제를 해결하려는 새로운 라이브러리인 « 水 »(mizu, 일본어로 물을 뜻하는 한자) 작업을 시작했습니다.

그리고 오늘, 여러분께 소개하게 되어 신난다!

mizu.js는 HTML과 직접 통합되며 표현식에 바닐라 JavaScript 표현식을 사용합니다. 이는 사용을 시작하기 위해 새로운 언어나 패러다임을 배울 필요가 없다는 것을 의미합니다.

<!-- Conditionally render elements -->
<a *if="Math.round(Math.random())">Heads!<a>
<b *else>Tails!</b>

<!-- Render list elements dynamically -->
<ul>
  <li *for="const value of ['foo', 'bar', 'baz']" *text="value"></li>
  <li *for="['qux', 'quux', 'corge']" *text="$value"></li>
</ul>

<!-- Bind attributes and handle events -->
<form @submit.prevent :class="{ 'user-form': true }" *set="{ input: '' }">
  <input type="text" ::value="input">
</form>

<!-- Template text content -->
<span *text="`Today is ${new Date()}`"></span>
<span *mustache>Today is {{ new Date() }}</span>

로그인 후 복사

mizu.js에서 지시문의 첫 번째 문자는 해당 목적을 나타냅니다.

* 일반 지침용
@ 이벤트 기반 지시문의 경우
: 속성 바인딩 지시어용
- :: 양방향 바인딩 지시문용(모델링이라고도 함)

의도적인 다른 프레임워크 및 라이브러리의 구문과 일부 유사점을 발견할 수 있습니다.

mizu.js는 반응형이므로 데이터가 변경될 때마다(클라이언트 측에서) 자동으로 DOM을 업데이트합니다.

풍부한 콘텐츠 렌더링

mizu.js는 마크다운이나 코드 구문 강조 표시와 같은 풍부한 콘텐츠를 쉽게 렌더링할 수 있는 몇 가지 깔끔한 지시문도 제공합니다.

<!-- Conditionally render elements -->
<a *if="Math.round(Math.random())">Heads!<a>
<b *else>Tails!</b>

<!-- Render list elements dynamically -->
<ul>
  <li *for="const value of ['foo', 'bar', 'baz']" *text="value"></li>
  <li *for="['qux', 'quux', 'corge']" *text="$value"></li>
</ul>

<!-- Bind attributes and handle events -->
<form @submit.prevent :class="{ 'user-form': true }" *set="{ input: '' }">
  <input type="text" ::value="input">
</form>

<!-- Template text content -->
<span *text="`Today is ${new Date()}`"></span>
<span *mustache>Today is {{ new Date() }}</span>

로그인 후 복사

HTTP 기반 지시어

mizu.js는 htmx에서 영감을 받은 일련의 지시문을 제공합니다.

이러한 지시문은 콘텐츠를 가져오기 위한 서버 렌더링 컨텍스트에서 특히 유용하지만 클라이언트 측에서 HTTP 요청을 수행하는 데에도 사용할 수 있습니다.

<!-- Automatically generate a table of contents from h1-h6 tags within the selected element -->
<nav *toc="'main section'"></nav>

<!-- Render markdown content -->
<div *markdown>**hello world!**</div>

<!-- Highlight syntax using TypeScript flavor -->
<code *code[ts]>const foo = "bar"</code>

로그인 후 복사

HTML 사용자 정의 요소 작업

HTML은 기본적으로 맞춤 요소를 지원하지만 사용하기가 다소 지루할 수 있습니다.

mizu.js는 문서에서 사용자 정의 요소를 정의하고 사용하기 위한 보다 간결한 구문으로 이 프로세스를 단순화합니다.

<!-- Fetch and display remote content -->
<div %http="https://example.com" %response.html></div>
<div %http="https://example.com" %response.html="$content.querySelector('h1')"></div>

<!-- Make an HTTP POST request on click and show the response -->
<button 
  %http.post="https://example/api"
  %header[x-foo]="'my custom header'"
  %body.json="{ foo: 'bar' }"
  %@click="alert(await $response.text())"
></button>

로그인 후 복사

보너스: HTTP 기반 지시어로 사용자 정의 요소를 가져와서 다른 프로젝트에서 쉽게 재사용할 수 있습니다!

<!-- Create a custom element -->
<template *custom-element="my-element">
  <div *mustache>
    There is {{ items.length }} items:
    <ul><slot name="items"></slot></ul>
  </div>
</template>

<!-- Use the custom element -->
<my-element>
  <li #items>foo</li>
  <li #items>bar</li>
</my-element>

로그인 후 복사

기타

여기서 사용 가능한 모든 지시문을 다루지는 않지만 살펴볼 내용이 더 많이 있습니다!
다음은 몇 가지 흥미로운 내용입니다.

<template 
  *custom-element="my-element" 
  %http="https://example.com/partial/my-element.html" 
  %response.html
></template>

로그인 후 복사

프로그래밍 방식으로 mizu.js 사용

지금까지 HTML 문서에서 mizu.js를 직접 사용하는 방법을 설명했지만 고급 사용 사례에서는 프로그래밍 방식으로 사용할 수도 있습니다.

mizu.js 지시문은 일반 HTML 속성이므로 구문은 클라이언트측 렌더링과 서버측 렌더링 모두에서 동일하게 유지됩니다. 즉, 템플릿을 변경하지 않고도 렌더링 환경을 쉽게 전환할 수 있습니다!

<!-- Automatically update the time every second -->
<!-- Perfect for elements where reactivity can't be tracked -->
<time *refresh="1" *mustache>{{ new Date() }}</time>

<!-- Execute raw code for special cases -->
<div *eval="this.remove()"></div>

로그인 후 복사

정적 사이트 생성

정적 사이트를 쉽게 생성할 수 있습니다

import Mizu from "@mizu/render/server"

export default {
  async fetch() {
    const headers = new Headers({ "Content-Type": "text/html; charset=utf-8" })
    const body = await Mizu.render(`<div *text="foo"></div>`, { context: { foo: "? Yaa, mizu!" } })
    return new Response(body, { headers })
  },
}

로그인 후 복사