【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中配置具體頁面下坑中支持的模塊。

通用模塊的配置不需要指定坑的名稱，頭，尾，頁面中的模塊配置需要指定到頁面中的具體的坑名。

具體坑中支持哪些模塊的計算方式是，通用配置集合與當前坑模塊集合的並集。

模塊配置支持系統模塊和設計師自定義的模塊兩種模塊類類型。