你现在的位置:首页 > PHP网站建设知识库 > ecmall > 正文

ecmall模板挂件机制详解

ecmall里很有趣的一个东西就是挂件,在模板里可以加入一个挂件,只需要很少的代码。在ecmall的后台可视化编辑中,可以看到挂件只支持丙个页面,1,商城首页,2,商城分类页。我们来分析一下它的机制。

在商城首页的模板中,我们可以看到很多:
<div class="left" area="top_left" widget_type="area">
<!--{widgets page=index area=top_left}-->
</div>
这样的块, 那这块表是什么意思呢?

显然了,这块的内容被抽像化了。那系统是怎么对它解析的。

\

在admin/app/template.app.php 的文件中(该文件是后台可视化模板编辑的应用文件)包含了对模板文件可视化编辑的处理逻辑。在加载模板文件的时候,先引入了admin\includes\javascript\template_panel.js;该过程在TemplateApp::_make_editable($page, $html)中;----->
return str_replace('<!--<editmode></editmode>-->', $editmode, $html);
在加载js文件之前,先替换掉模板文件中的<!--<editmode></editmode>-->标签。该标签藏在themes\mall\default\header.html中。

在template_panel.js中。
在加载模板文件后,对这页面中所有挂件区域的初始化这个过程在都template_panel.js文件中。就不详细写了。关键在于它是如何对单个挂件进行解析的。
function add_widget()中有:
$.getJSON('admin/index.php?app=template&act=add_widget&name='+$(this).attr('widget_name')+'&page=' + __PAGE__, function(rzt){。。。});
它是向admin/template.app.php的中add_widget()方法,发送了一个ajax请求:
在admin/template.app.php的add_widget()中有:

$page_config = get_widget_config(Conf::get('template_name'), $page);//该函数定位在:includes/widget.base.php
$id = $this->_get_unique_id($page_config);
$widget =& widget($id, $name, array());
$contents = $widget->get_contents();
$this->json_result(array('contents' => $contents, 'widget_id' => $id));

它说明了,在添加一挂件的时候,1,为每一挂件产生一ID号,2,获取指定风格,指定页面的挂件的配置信息,3,获取挂件的内容;再返回相应信息。添加完挂件信息后,就需要保存了

在js文件的function save_page()中:
$.post('admin/index.php?app=template&act=save&page=' + __PAGE__, $('#_edit_page_form_').serialize(), function(...){});
这个ajax对应的请求是:
admin/template.app.php的 function save()

在这方法中:
实现了对所有添加的挂件的信息的整理收集。然后再统一写入:
ecmall\data\page_config\文件夹中的一个文件。
该文件的格式如下:
<?php
return array (
'widgets' =>
array (
'_widget_525' =>
array (
'name' => 'sales_list',
'options' => NULL,
),
'_widget_897' =>
array (
'name' => 'sale_price',
'options' => NULL,
),
'_widget_680' =>
array (
'name' => 'brand',
'options' => NULL,
),
),
'config' =>
array (
'top_left' =>
array (
0 => '_widget_525',
1 => '_widget_897',
),
'cycle_image' =>
array (
0 => '_widget_680',
),
),
);
?>

以上是稍微描述一下,挂件是如何形成的。那它是如何解析的呢?

ecore/view/template.php中
把模板文件全文搜索执行:
return preg_replace("/{([^\}\{\n]*)}/e", "\$this->select('\\1');", $source);
在select($tag)中: 由于它实现了所有标签的解析。量有些大。在这儿就稍微描述一下:
select方法的处理标签的过程是,

第一步:先判断是否为空,
通过第一个字符是否是"*"号,判断是否为注释
通过第一个字符是否是"$"号,判断是否为变量。如果是,则做替换成相应变量;
通过第一个字符是否是"/"号,判断是否为结束标签;如果是,就替换成相应的结束语句;
否则:它是就一标签语句了:

第二步:
$tag_all = explode(' ', $tag);
$tag_sel = array_shift($tag_all);
这个二句的意思,以<!--{widgets page=index area=top_left}-->标签为例:
$tag表示:"widgets page=index area=top_left"字符串
$tag_sel 则为widgets ,也就取出了标签变量的标签名称:

第三步:
switch ($tag_sel)
{
................
case 'widgets':
$t = $this->get_para(substr($tag, 8), 0);
return '<?php $this->display_widgets(' . $this->make_array($t) . '); ?>';
break;
..................
}

第四步:
function display_widgets($arr)
{

$controller =& cc();
$controller->display_widgets($arr);
}
很明显,这儿调用了控制器中显解析挂件的方法了:

第五步:
在frontend.app.php中
function display_widgets($options)
{
$area = isset($options['area']) ? $options['area'] : '';
$page = isset($options['page']) ? $options['page'] : '';
if (!$area || !$page)
{
return;
}
include_once(ROOT_PATH . '/includes/widget.base.php');

$widgets = get_widget_config($this->_get_template_name(), $page);

if (!isset($widgets['config'][$area]))
{
return;
}

foreach ($widgets['config'][$area] as $widget_id)
{
$widget_info = $widgets['widgets'][$widget_id];
$wn = $widget_info['name'];
$options= $widget_info['options'];
$widget =& widget($widget_id, $wn, $options);
$widget->display();
}
}