Maison >interface Web >js tutoriel >Une explication détaillée de la prise en main de Jade dans Node.js

Une explication détaillée de la prise en main de Jade dans Node.js

亚连original: 2018-06-11 14:30:581306parcourir

Cet article présente principalement l'introduction détaillée du moteur de modèles Node.js Jade est un moteur de modèles de Node.js. Maintenant, je le partage avec vous et le donne comme référence.

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.

(locales) :

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

Code Jade :

h1= title
p= body

Sortie HTML rendue :

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

3. variables

La valeur de la lecture des variables dans Jade est obtenue via #{name}. 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>

Attribut dynamique :

L'attribut dynamique signifie que la valeur de l'attribut est dynamique, c'est-à-dire 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
}

La sortie HTML après le rendu final :

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

Remarque : La valeur de l'attribut est false L'attribut sera ignoré lors de la sortie du code HTML ; lorsqu'aucune valeur d'attribut n'est transmise, il sera par défaut vrai.

5. Littéral

Pour éviter les problèmes, vous pouvez écrire directement le nom de la classe et le nom de l'ID 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. Texte

Utilisez le symbole "|" texte.

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

7. Blocs de script et de style

Utilisez le symbole "." pour créer du

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

  console.log("Good bye!");

Code généré en HTML :

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

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

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

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 balise :

- 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]

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

<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>

Une différence majeure entre le moteur de modèle Jade et Guidon est la suivante : Jade permet d'écrire le code Presque entièrement JavaScript ; cependant, Handles limite les développeurs à un petit nombre d'assistants intégrés et personnalisés.

9. Commentaires

Jade a deux types de commentaires :

f35d6e602fd7d0f0edfa6f7d103c1b57. >2cc198a1d5eb0d3eb508d858c9f5cbdb. Pas de sortie sur la page - "//-"

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

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

Sortie :

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

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

instruction if

Ajoutez un préfixe - à l'instruction if, afin que vous puissiez écrire du code JavaScript standard ; vous pouvez également l'utiliser sans préfixes ni crochets, bien sûr, ce dernier est plus concis.

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

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

En plus, il y a moins, ce qui équivaut à ni l'un ni l'autre ! .

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

L'itération dans Jade est très. simple. Utilisez simplement l'instruction each.

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

Sortie :

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

Exemple 2 :

- 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

Sortie :

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

12. Filtre

La fonction du filtre est de : écrire un bloc de texte dans une autre langue ;

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

Remarque : Pour utiliser le filtre Markdown, vous devez installer le module Markdown, et Packages NPM marqués et Markdown.

13. cas

- 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!

14. Fonction mixin

Si vous avez utilisé sass ou compas mixin Vous le ferez je les connais certainement, et la méthode d'utilisation du mixin dans Jade est fondamentalement la même qu'eux. Syntaxe de la déclaration

: mixin name(param, param2, …….)

Appel : +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)

Sortie :

<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 est très similaire à l'introduction de fichiers externes JS et CSS. C'est une approche descendante : dans le fichier principal qui inclut d'autres fichiers, nous décidons quoi utiliser. Le fichier principal sera traité en premier (les données locales peuvent être définies dans le fichier principal), puis les sous-fichiers inclus dans le fichier principal seront traités (les sous-fichiers peuvent utiliser les données locales définies dans le fichier principal

Pour inclure un modèle Jade, utilisez include /path/filename.

Par exemple, dans le fichier A :

Remarque : il n'est pas nécessaire d'ajouter des guillemets doubles ou des guillemets doubles vers le nom et le chemin du modèle ici.

include ./includes/header

Pour un autre exemple, lancez la recherche à partir du répertoire parent :

Remarque : vous ne pouvez pas utiliser de variables dans les noms de fichiers et les chemins de fichiers, car les inclusions/partiels sont traités au moment de la compilation, pas au moment de la compilation lors de son exécution.

include ../includes/footer

对于使用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

上面是我整理给大家的，希望今后会对大家有帮助。

在微信小程序中如何才能获取图片信息

在微信小程序中如何实现animation动画

使用百度地图如何去掉marker覆盖物具体该如何解决

在微信小程序中如何获取用户信息（详细教程）

在微信小程序中如何才可以获取用户手机号信息

在Vue中通过header组件如何开发（详细教程）

利用jquery如何写出PC端轮播图（详细教程）

详细讲解有关实现react服务器渲染问题

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des méthodes d'insertion de nœuds d'objet DOM à l'aide de JSArticle suivant：Résumé des méthodes d'insertion de nœuds d'objet DOM à l'aide de JS

Articles Liés

Voir plus