Jade 模板

模板引擎

jade介绍、安装

jade是前后端都可以使用的模板引擎7

1、安装:

    sudo npm i -g jade


2、介绍

    元素标签不需要写<>

    子元素与父元素需要换行并tab缩进

    标签与文本需要使用空格来隔开


3、jade的缺点

    1）可移植性差

    2）调试困难

    3）性能一般

4、初始阶段开发效率，稳定性成和协作的成本

jade 头尾标签

<!DOCTYPE>
html
    head
        title ${title}

    body
        h1 标题内容

命令行编译jade文件

# jade index.jade         // 会将jade文件编译成同级目录的index.html文件，并且是没有代码格式的只有一行

# jade -P index.jade     // 有缩进，可读的格式

# jade -P -w index.jade // 侦听jade文件有变化执行转换的命令

小技巧: 在sublime中打开 index.jade 和 index.html文件, 选择view菜单 -> layout/ columns2 变成两列，将index.html放到另一列中，这样每次保存就可以看到html代码

属性文本和值

1、class和id

    div.row

    div#row

    div#row.column-samil    // id="row" class="column-samil"

    div.rowA.main        // class="rowA main"


2、属性

    a标签的href属性值，和自定义属性和值
    a(href="http://haha.com",
        title="jade",
            data-uid="siguang")

    input(name="course" type="check" checked)

混合的文本和标签

1、如果字符里有点进行处理

    // 不会把.aa解析成 class="aa" 并且换行,也能写html标签
    div.row
        p.
            1.aa <strong>这里字体加粗</string>
            2.bb
            3.cc 
            4.dd

    或者
    div.row
        p
            | 1.aa 
            | 2.bb
            | 3.cc 
            | 4.dd

注释和条件注释

1、单行注释 //

2、不可见的注释 //-

3、块注释        //- 在当前节点的开头

4、条件注释

    <!--[if IE 8]>
        <html class='ie8'>
    <![endif]>


    </html>        // 需要html



div.row
    // a(href="http://haha.com", title="siguang", data-index="1") 去主站

    //- input(name="course" type="check" checked)

div.row
//-
    p.
        1.aa <strong>这里字体加粗</string>
        2.bb
        3.cc 
        4.dd

变量声明

声明: - var course = 'jade'

获取: #{jade}

1、命令行下传值
    jade index.jade -P -w --obj '{"name":"siguang", age: 30}'

    div.row
        div.column-12
            姓名: #{name}

        div.column-12
            年龄: #{age}

2、通过json传值

    jade index.jade -P -O test.json

    test.json
    {
        'name': 'siguang',
        'age': 30
    }

转义

1、将html转成字符串输出

    - var data = '<script>alert(123)</script>'

    p #{data}


2、非转义

    - var data = '<script>alert(123)</script>'

    p !{data}

流程

1、if...else...

    - var isData = true
    if isData
        div 对象存在
    else
        对象不存在


2、case

    - var name = 'jade'
    case name
        when 'java'
            div java

        when 'jade'
            p hello jad



3、for 或 each 循环

    - var data = {'name': 'siguang', 'nage': 30}
    div.row
        - for(var key in data)
            div= key +'='+data[key]

    each()

mixin

相同结构的内容可以放到mixin中，相同一个函数

1、无参
    mixin 函数名        // 声明 
        p 这里是函数的块内容
        p 这里是函数的块内容
        p 这里是函数的块内容

    +函数名            // 调用

2、有参

    mixin 函数名(参数)
        each key in data
            li= data[key]

    +函数名({username: 'siguang', age: 30});

模板继承

代码复用

定义一个html的基本结构，内容只写到body中

public.jade

    DOCTYPE html
    html
        head

        body
            block desc
                p 内容继承
            block content    // 这里接收内容


main.jade

    // 通过extends继承到哪个 jade文件
    extends public

    block content        // 这里写到哪里
        div.row
            p aaaa
            p aaaa
            p aaaa

        div.row-b
            p bbb
            p bbb
            p bbb

include 引用

引用一个jade文件

DOCTYPE html
html
    head
        include head

    body
        include login

jade api

http的原声写法

1、jade.compile(source, 传值): 返回一个函数来生成html

2、jade.compileFile(path, 传值)

3、jade.compileClient(source, 传值)

4、jade.render(source, 传值):

5、jade.renderFile(jade文件, 传值):


compile()示例
    var http = require('http');
    var jade = require('jade');

    var server = http.createServer(function(req, res){
        res.writeHead(200, {'ContentType': 'text/html'});

        var fn = jade.compile('div #{course}', {});
        var html = fn({course: 'jade'});

        res.end(html);
    })

    server.listen('8081', 'localhost')


render()示例

    var http = require('http');
    var jade = require('jade');

    var server = http.createServer(function(req, res){
        res.writeHead(200, {'ContentType': 'text/html'});
        var html = jade.render('div #{course} #{name}', {course: 'jade', name: 'siguang'});
        res.end(html);
    })

    server.listen('8081', 'localhost')


{pretty:true} 如果不加此属性html会是压缩模式，加上格式化的代码

将html编译成jade文件

安装: sudo npm install html2jade -g

生成命令: html2jade ./public/index.html > index.jade

在node中转换

var html2jade = require('html2jade');

html2jade.convertDocument(document, {}, function(err, jade){
    console.log('反编译后的jade文件')
})


在线转换: http://html2jade.vida.io/

| 参考资料
| http://www.cnblogs.com/fullhouse/archive/2011/07/18/2109945.html
|
|

numjucks模板

模板引擎

numjucks

numjucks可以用任意扩展名来命名模板名文件，推荐使用'.njk'

$ npm install nunjucks

require('nunjucks');

变量

{{ usernmae }}    {{ foo.bar }}

过滤器

{{ foo | title }}    {{ foo | join(',') }}

模板继承

定义一个"block"，子模板可以覆盖它

一、Example

    A.html

        {% block header %}{% endblock %}

			

				aaaa
			


		B.html

			{% extends 'A.html' %}

			{% block header %}
				

					
    
						
  • aaaa
    • 
						
  • bbbb
    • 
						
  • cccc
    • 
					

				

			{% endblock %}

二、super()

if

{% if num > 20 %}
		

			大于20显示些内容
		

	{% endif %}


{% if num > 20 %}
		大于20
	{% elif num < 6 %}
		小于6
	{% else %}
		其它
	{% endif %}

for

一、遍历数组

    var items = [{ title: "foo", id: 1 }, { title: "bar", id: 2}];

    <h1>标题</h1>
    <ul>
        {% for item in items %}
				
  •  {{item.title}} 
    • 
			{% endfor %}
    </ul>

二、遍历对象

    var food = {
        'ketchup': '5 tbsp',
        'mustard': '1 tbsp',
        'pickle': '0 tbsp'
    };

    <div>
        {% for key, value in food %}
				
    {{key}} - {{value}}
    
			{% endfor %}
    </div>

    set 设置和修改变量

    let username = 'siguang';

{{ username }}            // siguang
{% set username = 'lulu' %}
{{ username }}            // lulu

    extends 指定模板继承

    {% extends 'A.html' %}

{% block header %}
		
    
			
      
				
    • aaaa
      • 
				
    • bbbb
      • 
				
    • cccc
      • 
			
    
		
    
	{% endblock %}

    block 区块

    {% block css %}
		
	{% endblock %}

    include 可以引用的模板

    {% include "item.html" %}

    import 加载不同的模板

    filter 区块中内容调用过滤器

    {% filter replace("force", "forth") %}
		may the force be with you
	{% endfilter %}

    注释

    去除前后空格

    var str = ' sssfsdfs ';

{% -%}

    运算符

    表达式 String、Number、Array、Dicts、Boolean

运算符 +、-、/、//、%、*、**

比较 ==、===、!=、!==、>、>=、<、<=

逻辑 and、or、not   {% if users and showUsers %} ... {% endif %}

    函数

    传入一个函数，在这里可以执行 {{ foo(1,2,3) }}

    表达式

    {{ /bar$/g }}

g: 应用到全局
i: 不区分大小写
m: 多行模式
y: 粘性支持（sticky

    参考资料
    http://mozilla.github.io/nunjucks/cn/templating.html

    Hanlebars.js 模板引擎

    模板引擎

    | 涉及知识点
    |
    |

    headlebars介绍

    Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。

    下载与安装

    1、下载handlebars.js文件在页面中直接引用

2、通过npm下载，require('handlebars')直接引用

    使用Handlebars

    <!-- 编译模板后输出的位置 -->    
  <div id="tableList"></div>

<!-- 定义的模板 -->
<script id="table-template" type="text/x-handlebars-template">
    {{date.year}} 年 {{date.month}} 月 {{date.day}} 日 <br>
    <table>
      {{#each person}}
           <tr>
          <td>姓名:{{name}}, 年龄:{{age}}</td>
        </tr> 
      {{/each}}
      </table>
</script>

<!--插件引用-->
<script src="js/lib/zepto.js"></script>
<script src="js/lib/handlebars.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

    // 模拟的json对象
    var data = {
        date: {
            year: '2016',
            month: '12',
            day: '26'
        },
        person: [
            {name: 'siguang', age: 20},
            {name: 'lulu', age: 20},
            {name: 'haha', age: 20},
            {name: 'heihei', age: 20}
        ]
    }

     // 预编译模板
    var myTemplate = Handlebars.compile($("#table-template").html());

    //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
    $('#tableList').html(myTemplate(data));

  });
</script>

    handlebars语句

    1、{{#each 对象 }}  循环数据

<script id="table-template" type="text/x-handlebars-template">
  {{#each student}}
    <tr>
      <td>{{name}}</td>
      <td>{{sex}}</td>
      <td>{{age}}</td>
    </tr> 
  {{/each}}
</script>


2、{{#each }} 嵌套

    {{#each this}} each中的this

    <!-- 定义的模板 -->
    <script id="table-template" type="text/x-handlebars-template">
        {{#each this}}
            {{#each info}}
                <!-- 这里取name 使用../到上一层来取， info数组内容使用this来输出 -->
                {{../name}}的{{this}}<br>
            {{/each}}
        {{/each}}
    </script>


    <script src="js/lib/zepto.js"></script>
    <script src="js/lib/handlebars.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //模拟的json对象
        var data = [
             {
                "name":"张三",
                "info":[
                    "眼睛",
                    "耳朵",
                    "鼻子"
                ]
            },
            {
                "name":"李四",
                "info":[
                    "爸爸",
                    "妈妈",
                    "妻子"
                ]
            }
        ];

        var myTemplate = Handlebars.compile($("#table-template").html());
        $('#dataList').html(myTemplate(data));
      });
    </script>


3、@index 访问父级索引

    <script id="table-template" type="text/x-handlebars-template">
        <table>
        {{#each this}}
            <tr>
                <td>{{addOne @index}}.</td>
                <td>{{name}}</td>
                <td>{{sex}}</td>
                <td>{{age}}</td>
            </tr>
        {{/each}}
        </table>
    </script>

    <!--进行数据处理、html构造-->
    <script type="text/javascript">
        var data = [
            {
                name: "张三",
                sex: "男",
                age: 35
            },{
                name: "李四",
                sex: "男",
                age: 23
            },{
                name: "甜妞",
                sex: "女",
                age: 18
            }
        ];

        // 注册索引+1的helper
        var handleHelper = Handlebars.registerHelper("addOne",function(index){
            //返回+1之后的结果
            return index+1;
        });

        //解析模版
        var handle = Handlebars.compile($("#table-template").html());
        //生成html
        var html = handle(data);
        //插入到页面
        $("#dataList").append(html);
    </script>


4、#with 循环时进行到某一个上下文

    <script id="table-template" type="text/x-handlebars-template">
    <table>
        {{#each this}}
        <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
            <td>
                <!-- 这里通过 #with 直接找到favorite数组 -->
                {{#with favorite}}
                {{#each this}}
                <p>{{name}}</p>
                {{/each}}
                {{/with}}
            </td>
        </tr> 
        {{/each}}
    </table>

    </script>

    <!--进行数据处理、html构造-->
    <script type="text/javascript">
    $(document).ready(function() {
        //模拟的json对象
        var data = [
                {
                    "name": "张三",
                    "sex": "0",
                    "age": 18,
                    "favorite":
                    [
                      {
                        "name":"唱歌"
                      },{
                        "name":"篮球"
                      }
                    ]
                },
                {
                    "name": "李四",
                    "sex": "0",
                    "age": 22,
                    "favorite":
                    [
                      {
                        "name":"上网"
                      },{
                        "name":"足球"
                      }
                    ]
                },
                {
                    "name": "妞妞",
                    "sex": "1",
                    "age": 18,
                    "favorite":
                    [
                      {
                        "name":"电影"
                      },{
                        "name":"旅游"
                      }
                    ]
                }
            ];

        // 注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
        var myTemplate = Handlebars.compile($("#table-template").html());

        // 将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
        $('#dataList').html(myTemplate(data));
    });
    </script>

5、{{#if }} 判断

     <script id="table-template" type="text/x-handlebars-template">
        {{#each student}}
            {{#if name}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{sex}}</td>
                    <td>{{age}}</td>
                </tr>
            {{/if}}
        {{/each}}
    </script>


6、registerHelper() 注册handlebars

    需要用到js处理并返回数据需要用到注册，类似过滤器

    <script id="table-template" type="text/x-handlebars-template">
    {{#each student}}
        {{#if name}}

            <!-- compare 注册名， age 20 为参数 -->
            {{#compare age 20}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{sex}}</td>
                    <td>{{age}}</td>
                </tr>
            {{else}}
                <tr>
                    <td>?</td>
                    <td>?</td>
                    <td>?</td>
                </tr>
            {{/compare}}
        {{/if}}
    {{/each}}
    </script>

    //注册一个比较大小的Helper,判断v1是否大于v2
    Handlebars.registerHelper("compare",function(v1,v2,options){
        if(v1>v2){
            //满足添加继续执行
            return options.fn(this);
        }
        else{
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    | 参考资料
    | http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html