Tempy-純Python語法的HTML模板庫

Tempy-高效的面向對象HTML模板

tempy是什麼?

沒有寫一個標籤就能建立HTML。tempy動態生成HTML,而且能用python或jQuery風格訪問。對DOM定位或操做可使用python或jQuery風格操做css

爲何使用tempy?

HTML代碼中的使用Python語法,這樣的模板系統是不錯,但還不夠酷(你還得用某種方法編寫HTML)。Tempy就是爲此而生的。html

特性

沒不用解析、簡單的結構使得Tempy運行飛快。Tempy只是將HTML標籤加在您的數據旁,實際上HTML字符串只存在在渲染時。python

Tempy的性能

根據呈現內容的複雜性、頁面上動態內容的數量、生成的輸出的大小以及許多其餘因素,性能有很大的不一樣。web

Tempy沒有解析字符串,不使用正則表達式和不加載html文件,相比傳統的如jinja2和Mako框架,運行速度更快。正則表達式

Used HW: 2010 IMac, CPU:2,8 GHz Intel Core i7 RAM:16 GB 1067 MHz DDR3 Osx: 10.12.6. Benchmark made using WRK微信

Running 20s test @ http://127.0.0.1:8888/tempy + http://127.0.0.1:8888/j2 10 threads and 200 connectionsapp


用例

1、基本模板


from
tempy.tags import Html, Head, Body, Meta, Link, Div, P, A my_text_list = ['This is foo', 'This is Bar', 'Have you met my friend Baz?']
another_list = ['Lorem ipsum ', 'dolor sit amet, ', 'consectetur adipiscing elit']#生成標籤對象

page = Html()(  

   # 在父標籤html內插入head
   Head()(  
       # 在父標籤head內插入meta和link        Meta(charset='utf-8'),          Link(href="my.css", typ="text/css", rel="stylesheet")    ),

   body=Body()(  
       # 給標籤名字和屬性,以便於DOM操做        Div(klass='linkBox')(            A(href='www.foo.com')        ),

       (P()(text) for text in my_text_list)  # 標籤內插入可迭代對象    
   )
)

print(page.render())
<html>
    <head>
        <meta charset="utf-8"></meta>
        <link href="my.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div class="linkBox">
            <a href="www.foo.com"></a>
        </div>
        <p>This is foo</p>
        <p>This is Bar</p>
        <p>Have you met my friend Baz?</p>
    </body>
</html>

2、元素的建立和移除

經過實例標籤來建立DOM元素框架

page = Html()
<html></html>

調用函數來增長元素或內容dom

page(Head())
<html><head></head></html>

使用 jQuery風格操做DOM函數

body = Body()
page.append(body)
<html><head></head><body></body></html>
div = Div().append_to(body)
<html><head></head><body><div></div></body></html>
div.append('This is some content', Br(), 'And some Other')
<html><head></head><body><div>This is some content<br>And some Other</div></body></html>

同理,移除元素以下

head.remove()
<html><body><div></div></body></html>
body.empty()
<html><body></body></html>
page.pop()
<html></html>

3、標籤屬性

定義標籤時或建立標籤後,對每一個標籤添加屬性

div = Div(id='my_html_id', klass='someHtmlClass')
<div id="my_dom_id" class="someHtmlClass"></div>
a = A(klass='someHtmlClass')('text of this link')
a.attr(id='another_dom_id')
a.attr({'href': 'www.thisisalink.com'})
<a id="another_dom_id" class="someHtmlClass" href="www.thisisalink.com">text of this link</a>

也可以使用jQuery風格編輯標籤屬性

div2.css(width='100px', float='left')
div2.css({'height': '100em'})
div2.css('background-color', 'blue')
<div id="another_dom_id" class="someHtmlClass comeOtherClass" style="width: 100px; float: left; height: 100em; background-color: blue"></div>

4、DOM定位

每一個tempy標籤內容都是可迭代對象,性質就像python的列表

divs = [Div(id=div, klass='inner') for div in range(10)]
ps = (P() for _ in range(10))
container_div = Div()(divs)

for i, div in enumerate(container_div):    div.attr(id='divId'+str(i))

container_div[0].append(ps)
container_div[0][4].attr(id='pId')
<div>
     <div id="divId0">
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p id="pId"></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
     </div>
     <div id="divId1"></div>
     <div id="divId2"></div>
     <div id="divId3"></div>
     <div id="divId4"></div>
     <div id="divId5"></div>
     <div id="divId6"></div>
     <div id="divId7"></div>
     <div id="divId8"></div>
     <div id="divId9"></div>
 </div>

在容器中訪問元素,就像它們是屬性同樣。

container_div = Div()
container_div(content_div=Div())
container_div.content_div('Some content')
<div><div>Some content</div></div>

若是你以爲你會用jQuery風格:

container_div.children()
container_div.first()
container_div.last()
container_div.next()
container_div.prev()
container_div.prev_all()
container_div.parent()
container_div.slice()


本文分享自微信公衆號 - 大鄧和他的Python(DaDengAndHisPython)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。

相關文章
相關標籤/搜索