總結baiduTemplate和djangoTemplate的學習

時間  2019-11-16
標籤 總結 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之類的經常使用前端模板，可是隻要是模板目的都相同，就是方便開發。
 
 
參考資料：
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程