快捷導航

python下如何讓web元素的生成更簡單的分析

更新時間：2008年07月17日 08:49:52 作者：

做web不簡單，特別是當你需要使用一些web效果的時候，比如顯示個圓角矩形，提示框之類的，也許你認為很簡單，好讓我們分析一下：

1. 引用css。這可能是最常見的做法了，對一些特定的元素定義特定的樣式。那么使用它，你需要在HTML
頁面中加入<link>標簽。
2. 引入js。許多特效也可以通過javascript來進行處理，比如動態(tài)顯示效果，或?qū)υ剡M行封裝。使用
它你需要在HTML頁面加入<script>標簽，必要時還要加一些javascript代碼。
3. HTML元素。需要設(shè)定一些特殊的屬性，比如class=某個屬性。這塊還相對簡單。

因此從上面的分析可以看出，在通常情況下，加入一個好看的web元素可能到許多地方的修改。因此我一
直在思考如何讓這個過程可以更簡化，麻煩的地方就是如何處理這些資源，如何讓這些資源可以與原始的
HTML很好的結(jié)合呢？最終我想出的辦法就是：代碼組裝。

對于css, javascript鏈接和代碼，它們可以按調(diào)用的順序依次拼成一段文本，然后插入到</head>元素前
面。然后對于html代碼，在模板中直接輸出。對于css, javascript的鏈接可以檢查是否重復。

那么如何定義web元素類和如何在模板中對其進行處理？

一個web元素類定義如下：

class Snippet(object):
    css = ''
    csslink = ''
    jslink = ''
    html = ''
    js = ''

    def render(self):
        return ''

    def __str__(self):
        return self.render()

定義為類屬性的將輸出到HTML的頭部，而render()的結(jié)果將顯示在模板中調(diào)用類的地方。先看一下在模板
中調(diào)用的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Helper</title>
<script type="text/javascript" src="/static/js/jquery.js"></script>
</head>
<body>
{{
htmlbuf << htmlwidgets.Message('This is a test')
}}
</body>
</html>

這里你可以看到htmlbuf，它是什么，它就是用來采集每個Snippet類的類屬性的。這里使用<<來將一個
Snippet對象加到htmlbuf中去。同時它還會將Snippet的HTML代碼在調(diào)用位置輸出。

如何輸出？首先uliweb的模板將轉(zhuǎn)為python代碼，它有一個內(nèi)置的out對象，可以調(diào)用它的方法來輸出
HTML代碼。那么htmlbuf對象將在調(diào)用模板前被創(chuàng)建，在調(diào)用模板后被處理，在創(chuàng)建時將傳入out的write
屬性。這一切都是在SImpleFrame.py中通過plugin方法來實現(xiàn)的，但是這只是定義了一個調(diào)用點，如：

fname, code = template.render_file(filename, vars, env, dirs)
out = template.Out()
template._prepare_run(vars, env, out)
callplugin(self, 'before_render_template', env, out)

if isinstance(code, (str, unicode)):
    code = compile(code, fname, 'exec')
exec code in env, vars
text = out.getvalue()
output = execplugin(self, 'after_render_template', text, vars, env)

before_render_template 會在調(diào)用模板前被調(diào)用。after_render_template 會在調(diào)用模板后被調(diào)用。因
此你可以通過plugin機制來加入額外的處理。這是在settings.py中定義的，如：

@plugin('before_render_template')
def before_render_template(sender, env, out):
    from uliweb.core import js
    from uliweb.core.SimpleFrame import url_for
    from uliweb.helpers import htmlwidgets

    htmlbuf = js.HtmlBuf(write=out.noescape, static_suffix=url_for('Portal.views.static',
filename=''))
    env['htmlbuf'] = htmlbuf
    env['htmlwidgets'] = htmlwidgets

這里注入htmlbuf和htmlwidgets到模板的env環(huán)境中，所以可以在模板中直接使用。在htmlwidgets中已經(jīng)
定義了一些Snippet。htmlbuf在創(chuàng)建時，會使用out.noescape方法，它將不會對Snippet中的代碼進行轉(zhuǎn)
義。static_suffix表示靜態(tài)文件的前綴，缺省為/static/，這里由于使用了靜態(tài)服務(wù)，所以通過url_for
來得到靜態(tài)URL前綴。

@plugin('after_render_template')
def after_render_template(sender, text, vars, env):
    import re
    r_links = re.compile('<link\s.*?\shref\s*=\s*"?(.*?)["\s>]|<script\s.*?\ssrc\s*=\s*"?
(.*?)["\s>]', re.I)
    if 'htmlbuf' in env:
        htmlbuf = env['htmlbuf']
        if htmlbuf.modified:
            b = re.search('(?i)</head>', text)
            if b:
                pos = b.start()
                #find links
                links = [x or y for x, y in r_links.findall(text[:pos])]
                htmlbuf.remove_links(links)
                t = htmlbuf.render()
                if t:
                    return ''.join([text[:pos], t, text[pos:]])
            else:
                return t+text
    return text

這里將在模板處理完畢后查找生成的HTML文本中的</head>標簽，然后將相應(yīng)的信息插入到它的前面。同
時這里增加了對原HTML中已經(jīng)存在的鏈接進行了判斷，如果存在則刪除之，這是通過remove_links來處理
的。

經(jīng)過這些的處理，你只要定義一個Snippet，Uliweb將自動為你處理css, js的鏈接包括代碼，和HTML代碼
的生成。因此你就可以簡單的：

{{
htmlbuf << htmlwidgets.Message('This is a test')
}}

來生成一個消息的提示信息。

我會慢慢擴展這個htmlwidgets庫。

再簡單描述一下如何配置：

1. 在settings.py中

INSTALLED_APPS = ['Documents', 'Examples', 'Portal', 'Post',
    'uliweb.builtins.auth', 'uliweb.helpers.htmlwidgets']

這里要加入'uliweb.helpers.htmlwidgets'，讓static目錄生效

2. 加入：

@plugin('before_render_template')
def before_render_template(sender, env, out):

和

@plugin('after_render_template')
def after_render_template(sender, text, vars, env):

3. 可以使用了。