总结baiduTemplate和djangoTemplate的学习

引入

     开发工作中需要，除了今天要介绍的两种template，还有很多模板，但他们的终点都是相同的，都是为了开发的便利。  
 
 

模板的作用

      是一套模板语法，开发者可以通过写一个模板区域，每次根据传入数据，然后渲染成不同的html片段。
 
 
 

BaiduTemplate

 
  • 举个🌰栗子
                首先需要下载 BaiduTemplate.js
　　　　　  接着引入一个栗子                 
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>

<!-- 引入baiduTemplate -->
<script type="text/javascript" src="./baiduTemplate.js"></script>

</head>
<body>
<div id='result'></div>

<!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 -->
<script id="t:_1234-abcd-1" type="text/html">
<div>
    <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 -->
    <!-- 输出变量语句，输出title -->
    <h1>title:<%=title%></h1>
    <!-- 判断语句if else-->
    <%if(list.length>1) { %>
        <h2>输出list，共有<%=list.length%>个元素</h2>
        <ul>
            <!-- 循环语句 for-->
            <%for(var i=0;i<5;i++){%>
                <li><%=list[i]%></li>
            <%}%>
        </ul>
    <%}else{%>
        <h2>没有list数据</h2>   
    <%}%>
</div>  
</script>
<!-- 模板1结束 -->

<!-- 使用模板 -->
<script type="text/javascript">
var data={
    "title":'欢迎使用baiduTemplate',
    "list":[
        'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API',
        'test2:',
        'test3:',
        'test4:list[5]未定义，模板系统会输出空'
    ]
};

//使用baidu.template命名空间
var bt=baidu.template;

//可以设置分隔符
//bt.LEFT_DELIMITER='<!';
//bt.RIGHT_DELIMITER='!>';

//可以设置输出变量是否自动HTML转义
//bt.ESCAPE = false;

//最简使用方法
var html=bt('t:_1234-abcd-1',data);

//渲染
document.getElementById('result').innerHTML=html;
</script>

</body>
</html>

 


 
  • 整个使用模板的结构分为以下几个步骤
     1.需要一个接收结果的容器
             
     2.书写模板
          - 用<script type=“text/html">标签包起来
          - 用id标示
          - 默认语法为<% %>
 
     3.使用模板 
          - 用<script type=“text/javascript”></script>包起来 
          - 数据存放在一个json里             
          - 赋给一个短名变量使用，来接收baidu.template
          - 使用模板，并把模板渲染出的html放入结果容器内
          
  • 基本语法
              -  默认分隔符      <%  js语法  %>
              -  输出一个变量   <%=data%>
              -  判断语句        
                       <%if(list.length>1){%>
                              <h2> <%=list.length%> </h2>
                       <%}else{%>        
                              <h2>no infor</h2>
                       <%}%> 
 
              -  循环语句
                        <%for(i=0;i<list.length;i++){%>
                              <li><%=list[i]%><li> 
                         <%> 
 
              -  注释
                    

DjangoTemplate

     
  • 举个🌰栗子
  
<html>
<head><title>Ordering notice</title></head>

<body>

<p>Dear {{ person_name }},</p>

<p>Thanks for placing an order from {{ company }}. It's scheduled to
ship on {{ ship_date|date:"F j, Y" }}.</p>

<p>Here are the items you've ordered:</p>

<ul>
{% for item in item_list %}
<li>{{ item }}</li>
{% endfor %}
</ul>

{% if ordered_warranty %}
<p>Your warranty information will be included in the packaging.</p>
{% endif %}

<p>Sincerely,<br />{{ company }}</p>

</body>
</html>

 

        
     
     解析上述🌰：
  1. {{person_name}}                  : 双大括号表示变量          
  2. {% if ordered_warranty %}  : 大括号＋% 表示模板标签
  3. {% for item in item_list %}   : for + % 表示循环每一项
  4. {{ ship_date | date:”F j,Y” }}  :双大括号＋’|’ 表示为过滤器，过滤的数据以制定参数格式（F j, Y）输出
 
  • 基本语法
 
           - if 
               if          <%if today_is_weekend%> hello  <%endif%>
               if else  <%if today_is_weekend%>  hello <%else%> go work <%endif%>
               if not    <%if not today_is_weekend%> go work <%endif%>
               if or      <% if apple or pig %> apple or pig <%endif%>  
               if and    <%if apple and pig%> apple and pig<%endif%>
                    
           - for 
               for in                <%for athlete in athlete-list%><h2>{{athlete.name}}</h2><%endfor%>
               for in reversed <%for athlete in athlete-list reversed%><h2>{{athlete.num}}</h2><%endfor%>  
               forloop  模板变量
           
          - ifequal/ifnotequal   比较两个变量值并显示结果  
                基本用法  <%ifequal user currentuser%><h1>welcome</h1><%endifequal%>
                适用类型  模板变量、字符串、整数和小数
               
　　　　{%ifequal variable 1 %}
　　　　{% ifequal variable 1.23 %}
　　　　{% ifequal variable 'foo' %}
　　　　{% ifequal variable "foo" %}
                 
          - { xxx｜yyy }过滤器
                    常用过滤器
                    date : 按指定的格式字符串参数格式化 date 或者 datetime 对象
 
　　　　　　{{ 123|add:"5" }} 给value加上一个数值
 
　　　　　　{{ "AB'CD"|addslashes }} 单引号加上转义号，一般用于输出到javascript中
 
　　　　　　{{ "abcd"|capfirst }} 第一个字母大写
 
{{ "abcd"|center:"50" }} 输出指定长度的字符串，并把值对中
 
{{ "123spam456spam789"|cut:"spam" }} 查找删除指定字符串
{{ value|date:"F j, Y" }} 格式化日期
 
{{ value|default:"(N/A)" }} 值不存在，使用指定值
 
{{ value|default_if_none:"(N/A)" }} 值是None，使用指定值
 
{{ 列表变量|dictsort:"数字" }} 排序从小到大
 
{{ 列表变量|dictsortreversed:"数字" }} 排序从大到小
 
{% if 92|divisibleby:"2" %} 判断是否整除指定数字
 
{{ string|escape }} 转换为html实体
 
{{ 21984124|filesizeformat }} 以1024为基数，计算最大值，保留1位小数，增加可读性
 
{{ list|first }} 返回列表第一个元素
 
{{ "ik23hr&jqwh"|fix_ampersands }} &转为&amp;
 
{{ 13.414121241|floatformat }} 保留1位小数，可为负数，几种形式
 
{{ 13.414121241|floatformat:"2" }} 保留2位小数
 
{{ 23456 |get_digit:"1" }} 从个位数开始截取指定位置的1个数字
 
{{ list|join:", " }} 用指定分隔符连接列表
 
{{ list|length }} 返回列表个数
 
{% if 列表|length_is:"3" %} 列表个数是否指定数值
 
{{ "ABCD"|linebreaks }} 用新行用<p> 、 <br /> 标记包裹
 
{{ "ABCD"|linebreaksbr }} 用新行用<br /> 标记包裹
 
{{ 变量|linenumbers }} 为变量中每一行加上行号
 
{{ "abcd"|ljust:"50" }} 把字符串在指定宽度中对左，其它用空格填充
 
{{ "ABCD"|lower }} 小写
 
{% for i in "1abc1"|make_list %}ABCDE,{% endfor %} 把字符串或数字的字符个数作为一个列表
 
{{ "abcdefghijklmnopqrstuvwxyz"|phone2numeric }} 把字符转为可以对应的数字？？
 
{{ 列表或数字|pluralize }} 单词的复数形式，如列表字符串个数大于1，返回s，否则返回空串
 
{{ 列表或数字|pluralize:"es" }} 指定es
 
{{ 列表或数字|pluralize:"y,ies" }} 指定ies替换为y
 
{{ object|pprint }} 显示一个对象的值
 
{{ 列表|random }} 返回列表的随机一项
 
{{ string|removetags:"br p div" }} 删除字符串中指定html标记
 
{{ string|rjust:"50" }} 把字符串在指定宽度中对右，其它用空格填充
 
{{ 列表|slice:":2" }} 切片
 
{{ string|slugify }} 字符串中留下减号和下划线，其它符号删除，空格用减号替换
 
{{ 3|stringformat:"02i" }} 字符串格式，使用Python的字符串格式语法
 
{{ "E<A>A</A>B<C>C</C>D"|striptags }} 剥去[X]HTML语法标记
 
{{ 时间变量|time:"P" }} 日期的时间部分格式
 
{{ datetime|timesince }} 给定日期到现在过去了多少时间
{{ datetime|timesince:"other_datetime" }} 两日期间过去了多少时间
 
{{ datetime|timeuntil }} 给定日期到现在过去了多少时间，与上面的区别在于2日期的前后位置。
 
{{ datetime|timeuntil:"other_datetime" }} 两日期间过去了多少时间
{{ "abdsadf"|title }} 首字母大写
 
{{ "A B C D E F"|truncatewords:"3" }} 截取指定个数的单词
 
{{ "<a>1<a>1<a>1</a></a></a>22<a>1</a>"|truncatewords_html:"2" }} 截取指定个数的html标记，并补完整
 
<ul>{{ list|unordered_list }}</ul> 多重嵌套列表展现为html的无序列表
{{ string|upper }} 全部大写
 
<a href="{{ link|urlencode }}">linkage</a> url编码
 
{{ string|urlize }} 将URLs由纯文本变为可点击的链接。（没有实验成功）
{{ string|urlizetrunc:"30" }} 同上，多个截取字符数。（同样没有实验成功）
 
{{ "B C D E F"|wordcount }} 单词数
 
{{ "a b c d e f g h i j k"|wordwrap:"5" }} 每指定数量的字符就插入回车符
{{ boolean|yesno:"Yes,No,Perhaps" }} 对三种值的返回字符串，对应是 非空,空,None
 
          - include  允许在模板中包含其他模板内容
                     {%include ’nav.html'%}                   
 
 
          - 注释
                    {#  俺是注释  #}        
 

 总结 

 　　　　Template有很多，还有常用的dot.js之类的常用前端模板，但是只要是模板目的都相同，就是方便开发。
 
 
参考资料：

 

 
posted @ 2016-01-11 14:17  孙可瘦  阅读(1082)  评论(0)  编辑  收藏  举报