파그 템플릿 엔진 제2부분 사용 - 논리

my previous post에서 클래스, ID, 속성 및 중첩을 사용하여 Pug에서 요소를 만드는 방법을 보여줍니다.오늘은 각 템플릿에 별도의 HTML 파일이 아닌 다양한 형식의 다양한 정보를 저장할 수 있도록 템플릿에 변수와 논리를 사용하는 방법을 보여 드리겠습니다.다시는 안녕이라고 생각하지 말고 우리 시작합시다!

Pug에서 변수 작성 및 사용

.pug 파일에서 자바스크립트를 사용하는 것은 자바스크립트 템플릿 언어이기 때문에 매우 쉽다.php와 달리 php는 실행할 코드를 <?php ?> 표시에 포장하고 Pug에서 변수를 설정하려면 연결 문자만 필요합니다.이 변수를 DOM에 있는 그대로만 넣으려면 등호가 이를 실현할 수 있습니다.아래의 예는 실용적이지 않지만, 변수를 가장 간단한 형식으로 설정하고 사용하는 방법을 보여주는 데 도움이 된다.

- const greeting = 'Hello, Tim'

p= greeting

// renders <p>Hello, Tim</p>

이러한 방식으로 생성된 변수는 JavaScript에서 사용되는 모든 데이터 유형일 수 있습니다.다음은 또 다른 예입니다. 변수는 원소에 적용할 클래스 그룹을 만들고 있습니다.이것은 변수를 어떻게 속성으로 사용하는지 설명할 것이다.

- const classes = ['class-1', 'class-2']

div(class=classes) Hello

// renders <div class="class-1 class-2">Hello</div>

이것은 매우 멋있지만, 만약 내가 그것을 메시지에 넣고 싶다면, 예를 들면, 더욱 활기찬 인사를 하고 싶다면, 어떻게 해야 합니까?이것은 요소의 내용에서 문자열 문자를 사용하여 실현할 수 있다.다음 코드는 어떻게 이 점을 해냈는지 보여 준다.

- const name = 'Tim'

p Hello, #{name}

// renders <p>Hello, Tim</p>

변수의 데이터를 인쇄할 수 있을 뿐만 아니라 일반 JavaScript와 같은 방식으로 조작할 수 있습니다.모든 이름의 형식이 같거나, 모든 숫자의 형식이 같음을 확보하려고 한다면, 이것은 매우 유용할 것입니다.다음은 어떻게 대문자로 위와 같은 변수를 나타낼 수 있는지 설명하는 예이다.

- const name = 'Tim'

p Hello, #{name.toUpperCase()}

// renders <p>Hello, TIM</p>

템플릿에서 JavaScript를 올바르게 사용하는 기능은 렌더링할 때 내용을 포맷할 수 있기 때문에, 변수를 표시하기 전에 몇 가지 절차를 전달하지 않아도 된다.

조건 논리는 어떻게 사용합니까?

비록 이것은 매우 좋지만, 사용자는 항상 우리가 원하는 대로 양식에 기입하지 않는다.이런 상황에서 우리는 인터페이스에'안녕하세요'만 하는 소식이 나타나는 것을 원하지 않는다.이것은 사용자들에게 상당히 혼란스러운 것이다.이 문제를 해결하기 위해서, 나는 명칭에 따라 다른 메시지를 표시할 논리를 만들 것이다.다음은 코드입니다.

If-Then 문

- const name = ''

if name
    p Hello, #{name}
else
    p Howdy, partner!

// renders <p>Howdy, partner!</p>

위에서 보신 조건은 간단하지만 흔히 볼 수 있는 예입니다. 템플릿에서 논리를 어떻게 사용하는지 설명합니다.요소의 끼워넣기 방식과 유사합니다. 조건 논리도if-then 문장의 내용을 확인하기 위해 들여쓰기를 사용합니다.이 예는 변수의 값이 있는지 확인하기 위한 if 문장을 보여 줍니다.만약 그렇다면, 그것은 그 아래에 축소된 코드를 실행할 것이다.만약 계산 결과가 false라면, 그것은 else 블록으로 이동하여, 거기에서 아래에 축소된 코드를 실행할 것이다.

Switch 문

여러 경로를 계산해야 하는 경우 Pug에서 switch 문을 사용할 수도 있습니다.만약 switch 문장을 사용한 적이 없다면, 데이터를 제공하여 평가할 수 있습니다.switch 문장에서'cases' 를 만들어서 평가 중인 데이터에 가능한 한 많은 일치 항목 (기본값) 을 제공할 수 있습니다.일치하는 항목을 찾으면, switch 문장은case 문장의 모든 코드를 실행합니다.일치하는 항목을 찾지 못하면 기본 대소문자를 사용합니다.
다음은 Pug 템플릿에서 switch 문을 사용하는 방법의 예입니다.이 템플릿에서 어떤 사용자에게 인사할지 확인하기 위해 사례를 만들었습니다. userId변수는 1로 설정되어 있기 때문에 switch 문장이 실행될 때 when 1 경로를 따른다.userId 변수를 4로 설정하면 대소문자를 지정하지 않았기 때문에 기본 경로를 따릅니다.

- const userId = 1

case userId
    when 0
        p Hello, John
    when 1
        p Hello, Tim
    when 2
        p Hello, Rita
    default
        p Howdy, partner

// renders <p>Hello, Tim</p>

순환하다

동적 웹 페이지를 설정할 때 또 다른 흔히 볼 수 있는 방법은 순환 데이터다.이것은 보통 메뉴, 데이터 목록, 라이브러리를 만드는 데 사용됩니다.컴파일 순환의 느낌은if문장을 컴파일하는 것과 유사합니다. 논리를 한 줄에 놓고 실행해야 할 코드를 다음 줄로 축소하기 때문입니다.다음 예는 프로젝트 그룹에서 잡화 목록을 보여주는 방법을 보여 줍니다.

- const groceries = ['apple', 'banana', 'popcorn', 'pizza']

ul
    each item in groceries
        li= item

// renders:
// <ul>
// <li>apple</li>
// <li>banana</li>
// <li>popcorn</li>
// <li>pizza</li>
// </ul>

객체에서 순환

Pug은 일반적인 JavaScript에서 그렇게 간단하지 않은 매우 편리한 특성을 포함하고 있다. 대상을 교체하는 것이다.다행히도, Pug은 그룹에서 순환하는 것과 거의 같은 방식으로 이 작업을 수행할 수 있도록 해 줍니다. 이것은 필요할 때 키/값을 렌더링하는 데 매우 쉽습니다.키가 원소 id이고 값이 원소의 내용이나 다른 유사한 경우 유용할 수 있습니다.만약 교체 대상이 필요하다면 아래의 예시에 따라 진행할 수 있다.

- const foods = {fruit: "Kiwi", vegetable: "Carrot", dairy: "Milk", candy: "Snickers"}

ul
    each food, category in foods
        li My favorite #{category}: #{food}

// renders:
// <ul>
// <li>My favorite fruit: Kiwi</li>
// <li>My favorite vegetable: Carrot</li>
// <li>My favorite dairy: Milk</li>
// <li>pizza</li>
// </ul>

마무리

템플릿에서 JavaScript 코드를 작성하는 능력은 더 깨끗한 코드와 동적 내용에 있어 게임 규칙을 바꾸는 요소이다.이 글에서, 나는 파그를 템플릿 엔진으로 사용할 때, 템플릿에서 논리를 사용하는 가장 흔히 볼 수 있는 방법을 보여 주었다.다음 글은 건조하거나 중복되지 않는 방법으로 템플릿을 간소화하는 방법을 보여 드리겠습니다. 이것은 시간과 정력을 절약할 수 있습니다.
질문이 있습니까?너는 트위터에서 나를 찾을 수 있다.