python下如何让web元素的生成更简单的分析


Posted in Python onJuly 17, 2008

1. 引用css。这可能是最常见的做法了,对一些特定的元素定义特定的样式。那么使用它,你需要在HTML
页面中加入<link>标签。
2. 引入js。许多特效也可以通过javascript来进行处理,比如动态显示效果,或对元素进行封装。使用
它你需要在HTML页面加入<script>标签,必要时还要加一些javascript代码。
3. HTML元素。需要设定一些特殊的属性,比如class=某个属性。这块还相对简单。

因此从上面的分析可以看出,在通常情况下,加入一个好看的web元素可能到许多地方的修改。因此我一
直在思考如何让这个过程可以更简化,麻烦的地方就是如何处理这些资源,如何让这些资源可以与原始的
HTML很好的结合呢?最终我想出的办法就是:代码组装。

对于css, javascript链接和代码,它们可以按调用的顺序依次拼成一段文本,然后插入到</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()的结果将显示在模板中调用类的地方。先看一下在模板
中调用的示例:

<!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代码在调用位置输出。

如何输出?首先uliweb的模板将转为python代码,它有一个内置的out对象,可以调用它的方法来输出
HTML代码。那么htmlbuf对象将在调用模板前被创建,在调用模板后被处理,在创建时将传入out的write
属性。这一切都是在SImpleFrame.py中通过plugin方法来实现的,但是这只是定义了一个调用点,如:

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 会在调用模板前被调用。after_render_template 会在调用模板后被调用。因
此你可以通过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环境中,所以可以在模板中直接使用。在htmlwidgets中已经
定义了一些Snippet。htmlbuf在创建时,会使用out.noescape方法,它将不会对Snippet中的代码进行转
义。static_suffix表示静态文件的前缀,缺省为/static/,这里由于使用了静态服务,所以通过url_for
来得到静态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>标签,然后将相应的信息插入到它的前面。同
时这里增加了对原HTML中已经存在的链接进行了判断,如果存在则删除之,这是通过remove_links来处理
的。

经过这些的处理,你只要定义一个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. 可以使用了。 

Python 相关文章推荐
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
Oct 08 Python
Python 模拟购物车的实例讲解
Sep 11 Python
Python实现购物车程序
Apr 16 Python
使用python编写udp协议的ping程序方法
Apr 22 Python
Python中交换两个元素的实现方法
Jun 29 Python
Python简单获取二维数组行列数的方法示例
Dec 21 Python
python被修饰的函数消失问题解决(基于wraps函数)
Nov 04 Python
在pytorch中实现只让指定变量向后传播梯度
Feb 29 Python
Django CSRF认证的几种解决方案
Mar 03 Python
python map比for循环快在哪
Sep 21 Python
Python解析微信dat文件的方法
Nov 30 Python
基于PyTorch中view的用法说明
Mar 03 Python
py中的目录与文件判别代码
Jul 16 #Python
Python Mysql自动备份脚本
Jul 14 #Python
python远程登录代码
Apr 29 #Python
复制粘贴功能的Python程序
Apr 04 #Python
推荐下python/ironpython:从入门到精通
Oct 02 #Python
在漏洞利用Python代码真的很爽
Aug 26 #Python
python编程-将Python程序转化为可执行程序[整理]
Apr 09 #Python
You might like
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
浅谈Python中的数据类型
2015/05/05 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL