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