zoukankan      html  css  js  c++  java
  • pug模板引擎——jade

    随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js、css一样,html也出现了各种各样的工具,即模板引擎,本文不研究各种模板引擎的实现技术原理,主要介绍jade的使用;

    1.常见的模板引擎的

    常见的模板引擎有mustache、Handelerbars、Underscore Templates、ejs(Embeded JS Templates)、jade
    各种模板的比较可以参考我的另外一篇文章传送门
    本文主要介绍pug模板引擎的使用,pug原名不叫pug,而是众所周知的jade,jade中文含义为美玉翡翠,其原来的logo为一只精灵的白兔,而pug中文含义为哈巴狗,现在logo也改成了憨态可掬的哈巴狗,至于为何将美玉改为哈巴狗,该开源项目在github给出的解释为jade的商标被人抢先注册了(这个理由也是让人服);

    2.pug结构语法

    pug模板引擎兼容html,即可以在代码中直接书写html;

    1. 标签:
      - 默认在每行文本开头(或紧跟白字符部分)书写html标签的名称;
      - 使用缩进来表示标签之间的嵌套关系
      - 自动识别闭合和非闭合标签,也可以在标签后加上/显示声明闭合标签

       如:
               ```
                   div
                       a: p 这里是输出字符
               ```
       渲染结果:`<div><a><p>这里是输出字符</p></a></div>`
      
    2. 内容
      - 管道文本:最简单的向模板添加纯文本的方法,在空白或标签后加上一个|字符,如:p | 这里是管道文本
      - 标签内文本:标签内添加文本,在索要添加的文本和标签元素之间输入一个空格即可,如:p 这里是标签内文本
      - 嵌入大段文本:在标签后输入一个.即可,注意标签和.之间无空格,如插入脚本:

           ```
           script. 
               if (true)
                   console.log('这里是脚本片段1');
               else
                   console.log(‘这里是脚本片段2’)
           ```
      
    3. 属性
      - 单行属性:标签属性与html语法相似,及普通js表达式,多个属性间用逗号或空格分隔,如:a(href=''baidu.com'',class='link') 百度
      - 多行属性:多行属性与单行属性类似,分多行些即可;
      - 长属性:长属性按照JS表达式书写即可;
      - 特殊字符:特殊字符可用''或""括起来即可,如:div(class='box' "(click)"="play()"
      - 转移属性:默认情况下,所有属性都经过转义(即将特殊字符串换成转义序列)来防止跨站脚本攻击之类方式
      - 布尔值:布尔值可直接使用,不指定值时默认为true;
      - class和id: 类可以使用.className、id使用#idname语法来使用,如:a.btn p#content
      - 行内样式:样式属性与其他属性一样,可以为字符串或对象,如:a(style={color:'red',background:'#333'})

    4. 注释
      - 单行注释:与javascript注释类似,采用//此时注释会输出,//- 此时注释不会输出;
      - 块注释:与javascript类似,采用//换行即可;
      - 条件注释:

    5. JS代码
      - 不输出的代码:用-符号开始一段不直接输出的代码;
      - 输出的代码: 用=符号开始一段代码;
      - 不转义的输出代码:用!=开始的代码不会被转义;

    6. 变量
      pug文件中变量来源有三种,其内部变量优先级最高,其余两种按命令先后顺序,以后面的为准:
      ①pug文件内部,直接使用,如:-var name='内部变量'
      ②命令行参数:使用--obj参数在命令行中传递,如pug test.pug -P -w --obj "{name:'命令行参数'}"
      ③外部json文件:使用-O 跟随一个文件路径名,如pug test.pug -P -w -O test.json
      - 内容变量:使用=#{}来进行真实变量的替换,如:

           ```
           - var url='baidu.com';
           p | 链接地址为 #{url}
           a(href=url)
           ```
       - 
      
    7. 条件
      pug的条件语句类似于JavaScipt,不同之处在于不用书写(){}符号;

    8. 循环
      pug目前支持两种主要迭代方式:each和while
      - each:如'each value,index in [1,2,3,4,5]';
      - while:

    9. 混入
      混入允许pug中重复使用一整个代码块、传入参数的方法,同时也支持属性方式传入参数;如:

       ```
           mixin list(name)
               p #{name}
      
           +list(复用1)
           +list(复用2)(class='btn')
       ```
      
    10. 文件包含
      包含(include)功能允许把另外的文件内容插入进当前文件,如果包含文件为js或css则会当做文本引入如:

      ```
          //- index.html
          doctype html
              html
                  include includes/header.pug
                  body
                  // index.html文件内容
                  include includes/footer.pug
      `` `
      
    11. 文件继承
      - 覆盖:使用blockextends关键字进行模板的继承,一个称之为块的代码块,可以被字模板覆盖替换。该过程是递归的。
      - 扩展:语序去替换(默认的行为),prenpend(向头部添加内容)、或appned(向尾部追加内容)

    --end

  • 相关阅读:
    HDU 4611 Balls Rearrangement 数学
    Educational Codeforces Round 11 D. Number of Parallelograms 暴力
    Knockout.Js官网学习(简介)
    Entity Framework 关系约束配置
    Entity Framework Fluent API
    Entity Framework DataAnnotations
    Entity Framework 系统约定配置
    Entity Framework 自动生成CodeFirst代码
    Entity Framework CodeFirst数据迁移
    Entity Framework CodeFirst尝试
  • 原文地址:https://www.cnblogs.com/hbzyin/p/7752542.html
Copyright © 2011-2022 走看看