どのnodejsテンプレートエンジンが優れていますか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

どのnodejsテンプレートエンジンが優れていますか?

PHPz

May 27, 2023 pm 08:39 PM

Node.js の人気とアプリケーションシナリオの増加に伴い、フロントエンド開発者はさまざまなツールを使用して開発効率を高め、開発品質を向上させる必要があります。その中で最も基本的なのはテンプレートエンジンで、データまたは変数を HTML テンプレートと組み合わせて、最終的な HTML ドキュメントを出力できます。 Node.js エコシステムには、選択できる優れたテンプレートエンジンが多数あります。この記事では、一般的に使用されるいくつかの Node.js テンプレートエンジンと、それらの特性および適用可能なシナリオを比較して、最適なテンプレートエンジンを選択できるようにします。。

ejs は、純粋な JavaScript を使用して実装されたシンプルな JavaScript テンプレートエンジンであり、テンプレートの構文は JavaScript 自体と非常によく似ています。 ejs のレンダリング速度は非常に速く、テンプレート内での JavaScript コードの記述をサポートしているため、非常に便利です。 EJS には、ロジックの問題を処理するための単純な制御フローステートメントもいくつか用意されています。 ejs の欠点は、完全なテンプレート継承メカニズムがなく、再利用されたコードを処理するために include メソッドを使用する必要があることです。

ejs の使用例:

// index.ejs文件内容
<html>
  <body>
    <h1>Hello <%= name %></h1>
    <ul>  
      <% for(var i=0; i<fruits.length; i++) { %>
        <li><%= fruits[i] %></li>
      <% } %>
    </ul>
  </body>
</html>

// 代码渲染
const ejs = require('ejs');
const template = ejs.compile(fs.readFileSync('index.ejs', 'utf-8'));
const html = template({ 
  fruits: ['apple', 'banana', 'orange'],
  name: 'world'
});
console.log(html);

ログイン後にコピー

jade/pug

jade/pug は非常に簡潔な構文を備えた効率的な HTML テンプレートエンジンであり、テンプレートファイルは非常に複雑です。読める。 jade/pug はインデントとネストに焦点を当てており、これにより HTML タグの使用が大幅に削減され、コードの可読性と保守性が向上します。 jade/pug はテンプレートの継承もサポートしているため、テンプレートを簡単に再利用できます。ただし、その学習曲線は比較的急勾配であり、開発者のコーディングと解釈のスキルが必要です。

jade/pug の使用例:

// index.pug文件内容
html
  head
    title My title
  body
    h1 My title
    ul
      each fruit in fruits
        li= fruit

// 代码渲染
const pug = require('pug');
const template = pug.compile(fs.readFileSync('index.pug', 'utf-8'));
const html = template({ 
  fruits: ['apple', 'banana', 'orange']
});
console.log(html);

ログイン後にコピー

handlebars

handlebars は、Mustache と同様の概念に基づいたテンプレートエンジンです。データの処理とテンプレートの継承。 Handlebars は、データのレンダリングと制御フローを実装するための豊富な構文を提供しますが、ejs と比較すると、レンダリング速度がわずかに遅くなります。さらに、ハンドルバーによって提供される構文はより簡潔かつ明確であり、習得が簡単です。

ハンドルバーの使用例:

// index.hbs
<html>
  <body>
    <h1>{{name}}</h1>
    <ul>
      {{#each fruits}}
        <li>{{this}}</li>
      {{/each}}
    </ul>
  </body>
</html>

// 代码渲染
const handlebars = require('handlebars');
const template = handlebars.compile(fs.readFileSync('index.hbs', 'utf-8'));
const html = template({ 
  fruits: ['apple', 'banana', 'orange'],
  name: 'world'
});
console.log(html);

ログイン後にコピー

nunjucks

nunjucks は、タグ構文と Django テンプレートエンジンを組み合わせた、柔軟で強力なテンプレートエンジンです。、複数の言語拡張機能が利用可能です。 nunjucks は、オブジェクト指向のテンプレートの継承とブロックレベルのオーバーライドをサポートしており、効率的なビューのレンダリングを簡単に実現でき、XSS 攻撃を回避するために HTML タグを自動的にエスケープすることもできます。

nunjuck の使用例:

// index.html
<html>
  <body>
    <h1>{{name}}</h1>
    <ul>
      {% for fruit in fruits %}
        <li>{{ fruit }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

// 代码渲染
const nunjucks = require('nunjucks');
const template = nunjucks.compile(fs.readFileSync('index.html', 'utf-8'));
const html = template.render({ 
  fruits: ['apple', 'banana', 'orange'],
  name: 'world'
});
console.log(html);

ログイン後にコピー

まとめ:

上記の利点と欠点の比較と分析を通じて、各テンプレートエンジンには適用可能なシナリオと特性があることがわかります。。初心者の場合は、ejs とハンドルバーを使用することをお勧めします。その構文は簡潔かつ明確で、学習曲線は短くなります。一定の経験を持つ開発者は、より強力でより多くの機能をサポートする jade/pug および nunjuck の使用を検討できます。

注意深い読者は、この記事では、フロントエンドで非常に人気のある Vue や React などのフレームワークのテンプレートエンジンについては説明していないことに気づくかもしれません。その理由は、Vue と React には独自のテンプレートエンジンがなく、レンダリング関数と jsx 構文を使用してビューレイヤーを構築するためです。ただし、フロントエンド開発でも Node.js 開発でも、テンプレートエンジンの使用法を学ぶことで、開発効率とコードの品質を向上させることができます。

以上がどのnodejsテンプレートエンジンが優れていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。