Nodejs jade 在 script下写判断遇到的问题(已解决)

Nodejs jade 在 script下写判断遇到的问题(已解决)

编写 jade 的时候碰到这种：

block content
  p some text...
  div.test
  - console.log('服务端输出')
    script.
      console.log('这里是客户端JS')
      - console.log('依旧跑到客户端去了')

花了一点时间想到了：

block content
  p some text...
  div.test
  - console.log('服务端输出')
    script
      | console.log('这里是客户端JS')
      - if (!!user) {
      | console.log('已登录的 JS');
      - } else {
      | console.log('未登录的 JS');
      - }

4 回复

Nodejs jade 在 script 下写判断遇到的问题（已解决）

问题描述

在使用 Jade 模板引擎时，我遇到了一个问题：如何在 <script> 标签内正确地进行条件判断。最初尝试直接在 <script> 标签内部使用 Jade 的控制结构时，发现这些控制结构被错误地解析到了客户端。

初始尝试

假设我们有以下的 Jade 模板代码：

block content
  p some text...
  div.test
  - console.log('服务端输出')
    script.
      console.log('这里是客户端JS')
      - console.log('依旧跑到客户端去了')

在这个例子中，- 开头的行会被当作服务端的 JavaScript 执行，而 | 开头的行则会作为纯文本插入到 <script> 标签中。然而，直接在 <script> 标签内嵌入控制结构会导致语法错误。

解决方案

为了解决这个问题，我们需要确保所有的控制结构在编译成 HTML 和 JavaScript 后能够正确执行。具体来说，我们应该将控制结构放在 <script> 标签外部，并且使用 Jade 的过滤器来确保正确的输出格式。

下面是修改后的代码：

block content
  p some text...
  div.test
  - console.log('服务端输出')
    script
      console.log('这里是客户端JS')
      - if (!!user) {
      |   console.log('已登录的 JS');
      - } else {
      |   console.log('未登录的 JS');
      - }

在这段代码中，我们通过使用 | 来表示纯文本内容，从而确保了条件语句被正确解析。注意，在 Jade 中，- 用于执行服务端的 JavaScript 代码，而 | 用于插入纯文本内容到当前标签内。

示例解释

  1. - 符号：用于执行服务端的 JavaScript 代码。
  2. | 符号：用于插入纯文本内容到当前标签内。
  3. script 标签：在 Jade 中，可以使用 script. 或 script 来创建一个 <script> 标签。script. 用于内联脚本，而 script 用于多行脚本。

通过这种方式，我们可以确保条件语句正确地在客户端执行，而不会出现语法错误。


script. - console.log(‘这个怎么跑到客户端去了？’)

相当于：

<script> console.log(‘这个怎么跑到客户端去了？’) </script>

thx, 已经想到解决方案了 =)

在这个问题中，您遇到了在 Jade 模板中如何正确地在 <script> 标签内使用条件判断的问题。Jade（现在称为Pug）是一种模板引擎，它在处理服务器端和客户端的代码时有一些特殊的规则。

示例代码

block content
  p some text...
  div.test
  - console.log('服务端输出')
  script.
    console.log('这里是客户端JS')
    
    - if (!!user) {
    |   console.log('已登录的 JS');
    - } else {
    |   console.log('未登录的 JS');
    - }

解释

  1. 块注释和代码行：在 Jade 中，您需要明确地区分服务器端和客户端代码。- 符号用于表示服务器端代码，而 | 符号用于插入纯文本到客户端代码中。

  2. 条件判断：在 Jade 模板中，您可以在 <script> 标签内部使用条件判断语句。但是要注意语法的正确性。上面的代码展示了如何在 <script> 标签内正确地使用条件判断。

  3. 模板引擎解析：Jade 模板引擎会根据语法解析不同的代码部分。确保您正确地使用了 - 和 | 来区分服务器端和客户端代码。

注意事项

  • 确保您的变量（如 user）在服务器端已经定义并且可以访问。
  • 使用 | 符号来插入纯文本到 <script> 标签内，这样可以避免语法错误。
  • 保持代码整洁，合理地使用缩进和换行，以提高可读性。

通过这种方式，您可以在 Jade 模板中正确地使用条件判断语句，并且能够将逻辑正确地传递给客户端。

回到顶部