ecmall 模板之挂件设计

原文地址：ecmall 模板之挂件设计 作者：三少

ecmall商城的挂件设计原理在商城的后台可视化编辑中，可以看到只支持二个页面，1，商城首页，2，商城分类页。在商城首页的模板中，我们可以看到很多：<divclass=leftarea=top_leftwidget_typ

ecmall 商城的挂件设计原理

在商城的后台可视化编辑中，可以看到只支持二个页面，1，商城首页，2，商城分类页。

在商城首页的模板中，我们可以看到很多：   

<div class="left" area="top_left" widget_type="area">
        <!--{widgets page=index area=top_left}-->
</div>

这样的块， 那这块表是什么意思呢？

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

在admin/app/template.app.php 的文件中（该文件是后台可视化模板编辑的应用文件）包含了对模板文件可视化编辑的处理逻辑。在加载模板文件的时候，先引入了adminincludesjavascripttemplate_panel.js;该过程在TemplateApp::_make_editable($page, $html)中；----->

return str_replace('<!--<editmode></editmode>-->', $editmode, $html);

在加载js文件之前，先替换掉模板文件中的<!--<editmode></editmode>-->标签。该标签藏在themesmalldefaultheader.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()

-----------------------------------------------------------

在这方法中：

实现了对所有添加的挂件的信息的整理收集。然后再统一写入：

ecmalldatapage_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();
        }
    }

---------------------------------------------------------

over