【9】了解淘宝sdk引入布局模块

上一节我们说了下淘宝提供给我们可布局的地方；

这一节我们说下淘宝sdk布局模块。

在我们开发网店的时候一般一个网店组成是：页面>框架>模块（>的意思的包含）；这样我们就知道我们一般开发都集中在模块的开发和美化，特别是你买过淘宝上的板子，你就会发现，有的设计师会时不时的更新升级下模块，要不就是开发新模块出来。

所以我们开发网店也要学习下怎么开发模块，但是前提的你要先学会引用模块，一般引用有2种：

【1】引用系统模块-----方法如下：

<?php

    echo  include_system_module("shop.picRound","1.0-common",100); //这个是系统轮播模块

?>

参数说明：include_system_module需要三个参数，第一个为“系统模块简称”，第二个为“系统模块版本”，第三个为domId,这里需要注意的是domId需要在页面内唯一（和div中的id是一样的，一个页面中只能出现一次）。

【2】引用自定义模块-----方法如下：

<?php
           
        echo  include_local_module("textbox",101);

?>

参数说明：include_local_module有两个参数，第一个”textbox”为模块的名称，第二个为domId,这里需要注意的是domId需要在页面内唯一。

学会了引用模块，那我们在学一个东西-----引入片区

那有人会问什么的片区？？？

片区是设计师在页面预留的一块区域，卖家可以在坑里添加模块，具体引入坑的语法如下：

<div id=" navigator"  class=" J_TRegion">

    <?php

     	$topList=array('shortname'=>'shop.topList','version'=>'1.0-common',domId=>001);

        $selfModule=array('id'=>'selfModule','domId'=>'001');

        $modules=array($topList, $selfModule);

               echo include_modules("testModules", $modules)

               echo include_system_module("shop.searchInShop","1.0-common",002)

   ?>

</div>

 参数说明：include_modules包含两个参数，第一个参数是片区对应的名称,第二个参数是片区里面引入的默认模块列表。

引入片区需要注意以下几点：

 1. 片区需要通过“J_TRegion”这个class来标识.

2. 片区里面也可以引入系统模块和引入自定义模块

好了，引用片区我们也学了，但是这里我也有些没有看懂

【1】“J_TRegion”外模块引用规范

【2】“J_Region内模块的引用支持单个模块和多个模块

这里的说明看的我糊涂了，要是有懂的，可以说说，有兴趣的也可以自己看看，网址：http://wiki.zx.taobao.com/index.php/模板编写规范

我们说也说了这么多，那我们就开始小小实战一下，在index.php页引用一下系统的轮播器（shop.picRound）用用，代码如下

<div class="layout grid-m">
     <div class="J_TRegion">
	     <?php
		     echo include_system_module("shop.picRound","1.0-common",001) 
	     ?>
     </div>
</div>

 这里有个重点就是申明片区要通过“J_TRegion”这个class来标识.，这个在上面我也讲到了，其他的也说到了，大家注意自己分析下。

写好了后，在控制台上找到自己新建的模板中的首页（index）预览下看看，是不是已经有一个轮播了。

模板中加入模块配置

设计师经常会遇到这样的问题：在模板挖了坑，但是没有办法控制坑中能够添加哪些模块。现在在SDK模板中加入了新的配置规则，允许设计师精确配置自己坑中所支持的模块。

示例配置如下：

<?xml version="1.0" encoding="GBK"?>
<site version="1">
    <id>9bb679384bb64c59be4f23ca37b6bcf7</id>
    <name>xiaohu</name>
    <author wangwang="" url="http://www.taobao.com"></author>
    <thumbnail>assets/images/frontpage.png</thumbnail>
    <language>php</language>
    <version>1.0.0</version>
    <apply-sites>3,7</apply-sites>
    <change-notes>
        change log
    </change-notes>
    <description>
        description
    </description>
    <parameters>
        <param name="demo" description="只读属性-1" readonly="true" ptype="text" formType="text" label="label">demo</param>
        <param name="theme" description="主题风格" ptype="text" formType="text" label="label">green</param>
    </parameters>
    <global>
        <header>header.php</header>
        <footer>footer.php</footer>
        <css>assets/stylesheets/global.css</css>
    </global>
    <styles default="gray">
        <style>
            <name>gray</name>
            <thumbnail>/assets/images/frontpage.png</thumbnail>
            <css>assets/stylesheets/gray.css</css>
        </style>
    </styles>
    <rules>
            <common>
                <support>
                   <module shortname="shop.searchInShop" version="1.0-common"/>
                   <module shortname="shop.topList" version="1.0-common"/>
                   <module shortname="shop.friendLink" version="1.0-common"/>
                </support>
            </common>


            <header>
                <placeholder name="head-modules">
                    <support>
                        <module shortname="shop.itemCategory" version="1.0-common"/>
                    </support>
                </placeholder>
            </header>


            <footer>
                 <placeholder name="foot-modules">
                    <support>
                        <module shortname="shop.fileList" version="1.0-common"/>
                        <module id="side_sales"/>
                    </support>
                </placeholder>
            </footer>
    </rules>
    <pages>
        <page type="index">
            <name>首页</name>
            <file>index.php</file>
            <thumbnail>assets/images/index.png</thumbnail>
            <description>sjgjweogj</description>
            <rules>
                <placeholder name="sub-modules">
                    <support>
                        <module shortname="shop.itemCategory" version="1.0-common"/>
                        <module shortname="shop.fileList" version="1.0-common"/>
                        <module id="side_help"/>
                        <module id="side_sales"/>
                    </support>
                </placeholder>
            </rules>
        </page>
    </pages>
</site>

在site节点下的rules中配置通用的模块和头部尾部模块，

在page节点下的rules中配置具体页面下坑中支持的模块。

通用模块的配置不需要指定坑的名称，头，尾，页面中的模块配置需要指定到页面中的具体的坑名。

具体坑中支持哪些模块的计算方式是，通用配置集合与当前坑模块集合的并集。

模块配置支持系统模块和设计师自定义的模块两种模块类类型。