Maison >interface Web >js tutoriel >Explication détaillée du moteur de modèles Node.js Jade

Explication détaillée du moteur de modèles Node.js Jade

小云云original: 2018-01-20 09:13:051963parcourir

Cet article présente principalement une introduction détaillée au moteur de modèles Node.js. Jade est un moteur de modèles pour Node.js. L'éditeur le trouve plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. . Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Jade est un moteur de modèles pour Node.js. Il s'appuie sur de nombreux aspects de Haml, sa syntaxe est donc relativement similaire à Haml. De plus, Jade prend également en charge les espaces.

1. Balises

Dans Jade, tout texte en début de ligne est interprété par défaut comme une balise HTML. Et il vous suffit d'écrire la balise-note d'ouverture : pas besoin d'ajouter "a8093152e673feb7aba1828c43532094". Parce que Jade rendra les balises de fermeture et d'ouverture pour nous. Par exemple :

body 
  p 
    h1 Jade是Node.js的一个模板引擎
    p  它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
  p 
    footer © Pandora

Le code HTML final rendu par le modèle Jade ci-dessus est :

<body>
  <p>
    <h1> Jade是Node.js的一个模板引擎</h1>
    <p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p>
  </p>
  <p>
    <footer>© Pandora</footer>
  </p>
</body>

Remarque : Si aucun nom de balise n'est écrit, la valeur par défaut est la balise p.

2. Variables/données

Les données transmises au modèle Jade sont appelées locales. Utilisez le signe égal "=" pour afficher la valeur d'une variable.

(locaux) :

{
  title: "Express.js Guide",
  body: "The Comprehensive Book on Express.js"
}

Code Jade :

h1= title
p= body

rendu Sortie HTML :

<h1>Express.js Guide</h1>
<p>The Comprehensive Book on Express.js</p>

3. Lecture des variables

La valeur de la variable dans Jade est lue via #{ name } à réaliser. Par exemple :

- var title = "Node"

p I love #{title}

La valeur de la variable est traitée lors de la compilation du modèle, ne l'utilisez donc pas dans l'exécutable JavaScript (-).

4. Attributs

Les attributs suivent l'étiquette et sont entourés par "()", et plusieurs attributs sont séparés par ",". Par exemple : corps (nom1 = « valeur1 », nom2 = « valeur2 »).

p(id="content", class=&#39;main&#39;)
  a(href=&#39;http://csdn.net&#39;, title=&#39;csdn主页&#39;， target=&#39;_blank&#39;) CSDN:中国软件联盟
  form(action="/login")
    button(type="submit", value="提交")

Sortie :

<p id="content" class=&#39;main&#39;>
  <a href=&#39;http://csdn.net&#39; title=&#39;csdn主页&#39; target=&#39;_blank&#39;> CSDN:中国软件联盟</a>
  <form action="/login">
    <button type="submit" value="提交">
  </form>
</p>

Propriétés dynamiques :

Les attributs dynamiques signifient que la valeur de l'attribut est dynamique, c'est-à-dire qu'une variable est utilisée pour représenter la valeur de l'attribut. Le symbole "|" peut écrire le contenu du nœud HTML sur une nouvelle ligne. Par exemple :

a(href=url, data-active=isActive)
label
  input(type="checkbox", checked=isChecked)
  | yes / no

Données fournies au modèle ci-dessus :

{
  url: "/logout",
  isActive: true,
  isChecked: false
}

Sortie après rendu final HTML :

<a href="" data-active=" rel="external nofollow" data-active"></a>
<label>
  <input type="checkbox" />yes / no
</label>

Remarque : les attributs avec une valeur false seront ignorés lors de la sortie du code HTML ; lorsqu'aucune valeur d'attribut n'est transmise, la valeur par défaut est true.

5. Littéral

Pour éviter les ennuis, vous pouvez écrire le nom de la classe et le nom de l'ID directement après le nom de la balise. Par exemple :

p#content
  p.lead.center
    | Pandora_galen
    #side-bar.pull-right // 没有标签名，默认为“p”
    span.contact.span4
      a(href="/contact" rel="external nofollow" rel="external nofollow" ) contact me

HTML de sortie rendu :

<p id="content">
  <p class="lead center">
  Pandora_galen
  <p id="side-bar" class="pull-right"></p>
  <span class="contact span4">
    <a href="/contact" rel="external nofollow" rel="external nofollow" > contact me </a>
  </span>
</p>

6. 🎜>

Utilisez le symbole "|" pour afficher le texte original.

p 
  | 我两年前开始学习前端
  | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。

7. Blocs de script et de style

Utilisez le symbole "." HTML >

Code généré :

script.
  console.log("Hello world!");
  setTiemout(function() {
    window.location.href = "http://csdn.net"
  }, 1000);

  console.log("Good bye!");

De même, le style génère c9ccee2e6ea535a969eb3f532ad9fe89e90442d4aba9b6409c93259f982d1eec.

<script>
  console.log("Hello world!");
  setTiemout(function() {
    window.location.href = "http://csdn.net"
  }, 1000);

  console.log("Good bye!");
</script>

8. Code JavaScript

Utilisez -, = ou ! =Ces trois symboles sont utilisés pour écrire du code JS exécutable dans Jade qui peut manipuler la sortie. Ceci est utile lors de la sortie d’éléments HTML et de l’injection de JavaScript. Cependant, vous devez faire attention à éviter les attaques de scripts intersites (XSS) lors de cette opération.

Par exemple, vous pouvez l'utiliser ! =Définir un tableau, afficher les données de l'étiquette :

Le code généré est le suivant :

- var arr = [&#39;<a>&#39;, &#39;<b>&#39;, &#39;<c>&#39;]
ul
  -for (var i = 0; i < arr.length; i++)
    li
      span= i
      span!= "unescaped:" + arr[i] + "vs."
      span= "escaped:" + arr[i]

L'une des principales différences entre les moteurs de modèles Jade et Guidon est que Jade permet d'écrire presque tout le JavaScript dans le code ; cependant, Guidon limite les développeurs à un petit nombre d'assistants intégrés et personnalisés.

<ul>
  <li><span>0</span><span>unescaped: <a>vs. </span><span>escaped: <a></span></li>
  <li><span>1</span><span>unescaped: <b>vs. </span><span>escaped: <b></span></li>
  <li><span>2</span><span>unescaped: <c>vs. </span><span>escaped: <c></span></li>
</ul>

9. Commentaires

Jade a deux types de commentaires :

f35d6e602fd7d0f0edfa6f7d103c1b57. —“//”
2cc198a1d5eb0d3eb508d858c9f5cbdb. Pas de sortie vers la page—— “//-”

Sortie :

// 普通注释，会输出到渲染后生成的HTML页面
p Hello Jade content

//- 特殊注释，不会输出到HTML页面
p (id="footer") copyright 2016

10. Instruction If

<!-- 普通注释，会输出到渲染后生成的HTML页面 -->
<p> Hello Jade content </p>

<p id="footer">copyright 2016</p>

Ajoutez un préfixe - à l'instruction if, afin que vous puissiez écrire du code JavaScript standard ou vous ne le faites pas ; Ce n'est pas nécessaire. Préfixe, pas de parenthèses, bien sûr, cette dernière est plus concise.

En plus, il y a moins, ce qui équivaut à pas ou ! .

- var user = {}
- user.admin = Math.random() > 0.5

if user.admin
  button(class = "launch") Launch Spacecraft
else 
  button(class = "login") Log in

Remarque : Il n'y a pas de point-virgule ";" à la fin de chaque ligne de code

11 Chaque instruction

Itération dans. Jade C'est très simple, il suffit d'utiliser chaque instruction.

Sortie :

- var language = [&#39;JavaScript&#39;, &#39;Node&#39;, &#39;Python&#39;, &#39;Java&#39;]
p
  each value, index in language
    p= index + "," + value

Exemple 2 :

<p>
  <p>0. JavaScript</p>
  <p>1. Node</p>
  <p>2. Python</p>
  <p>3. Java</p>
</p>

Sortie :

- var language = [&#39;JavaScript&#39;: -1, &#39;Node&#39;: 2, &#39;Python&#39;: 3, &#39;Java&#39;: 1]

p 
  each value, key in languages
    p= key + ":" + value

12. Filtre

<p>
  <p>JavaScript: -1</p>
  <p>Node: 2</p>
  <p>Python: 3</p>
  <p>Java: 1</p>
</p>

La fonction du filtre est : Écrivez un bloc de texte dans une autre langue ;

Remarque : Pour utiliser le filtre Markdown, vous devez installer le module Markdown, ainsi que le NPM Marked et Markdown. forfaits.

p
  :markdown
    # practical Node.js
    [This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.

13. Cas

14. 🎜>Si vous avez utilisé des mixins sass ou compass, vous les connaîtrez certainement, et la méthode d'utilisation des mixins dans Jade est fondamentalement la même qu'eux.

- var coins = Math.round(Math.random() * 10)

case coins
  when 0
    p You have no money
  when 1
    p You have a coin
  default
    p You have #{coins} coins!

声明的语法： mixin name(param, param2, …….)

调用： +name(data)

mixin row(items)
  tr
    each item, index in items
      td= item

mixin table(tableData)
  table
    each row, index in tableData
      +row(row)

- var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}]
+table(node)

- var js = [{name: &#39;backbone&#39;}, {name: &#39;angular&#39;}, {name: "emberJS"}]
+table(js)

输出：

<table>
  <tr>
    <td>express</td>
  </tr>
  <tr>
    <td>Jade</td>
  </tr>
  <tr>
    <td>Handlebars</td>
  </tr>
</table>

<table>
  <tr>
    <td>backbone</td>
  </tr>
  <tr>
    <td>angular</td>
  </tr>
  <tr>
    <td>emberJS</td>
  </tr>
</table>

15、include

include与引入JS和CSS外部文件很相似。它是自顶向下的方法：在include其它文件的主文件里，我们决定要用什么。主文件会被首先处理（可以在主文件了定义数据locals），然后才会再接着处理主文件里所包含进来的子文件（子文件里可以使用主文件中定义的数据locals）；

包含一个Jade模板，用include /path/filename.

例如，在文件A里：

include ./includes/header

注意：这里不用给模板名以及路径添加双引号或者单引号。

再例如，从父目录开始查找：

include ../includes/footer

注意：不能再文件名和文件路径中使用变量，因为includes/partials是在编译时处理的，而不是在执行时。

对于使用Sass、Compass又或者Less的人这些事再熟悉不过的了。

16、extend

extend与include“唱对台戏”，正好相反，extend是一种自底向上的方法。它所包含的文件决定它要替换主文件中哪那一部分。

使用格式： extend filename 和 block blockname;

示例-1：在文件file_a里：

block header
  p some default text
block content
  p loading...
block footer
  p copyright

示例-2：在文件file_b里：

extend file_a
block header
  p very specific text
block content
  .main-content

Articles Liés

Voir plus