模板编写规范
模板编写规范
目录 [隐藏]
? ? ? ? o o o o ? o o
1 总体说明 2 模板目录结构 3 模板描述符文件详解 4 模板编写 4.1 1. 引入模块 4.2 2. 引入片区 4.3 3. 模板中加入模块配置 4.4 4. 宝贝详情页设计 5 PHP Lite 引擎详解 5.1 Php lite 限制 5.2 Php lite 函数白名单
总体说明 对于一个设计师的页面来说，在淘宝上呈现的页面结构如下：
基于这样的页面结构： 1. 淘宝要提供一个页面的框架， 也就是页面的 Layout， 设计师设计的页面是 Layout 中的一 部分，如在下面的位置：
2. 模板必需提供全局的 CSS，Header 和 Footer，在任何一个设计的页面都会包含这三者。 3. CSS，Header 和 Footer 还会被淘宝其他页面所使用，如评级、店铺留言等。 4. 页面包含模块，一部分模块是支持交互的，也就是卖家可以录入一些参数来改变模块的 呈现 基于这个考虑，模板需要一个全局的配置文件，也就是 site.xml，该文件包含了模块的详细 信息，由于页面还可能涉及到模块，所以我们还要对各个模块进行定义，模块同时也是代码 复用的基本单元，模块的配置文件为 module.xml。 模板目录结构 模板目录结构是指模板各个资源目录划分，如下图：
目前主要分为已下记录类： ? 静态资源：都存放在 assets 目录，同时包括 images 和 stylesheets 两个子目录，静态资 源引用需要以相对路径为准。另外本次升级新增加了 extra.css 文件，此文件可以设置页头 和页面背景等。 ? 模板文件：也就是模板文件，后缀名为.php 或者.vm，依据所选择的模板语言，模板文件 包括全局头，全局尾和各个文件的主体。页面文件不能形成子目录。 ? 模块文件：不能包含其他资源文件，如果包含其他资源文件，需要来自淘宝相册的服务， 模块主要就是模块的配置文件和其模块主体文件。所有模块都存放于 modules 目录下，系
统模块名为 taobao.module.xxx，设计师模块名由设计师随意定义，每个模块下存放对应模 块的 images/scripts/stylesheets。 ? 元信息文件：如 xml 文件，screenshot 文件等，模板为 site.xml，模块为 module.xml ? 在 SDK 中，htdocs 可以同时包括多个模板，以不同的目录加以区分，SDK 会自动识别这 些模板并进行管理，如样例中的 template1 是模板的名称。 ? 在 htdocs 的根目录下有一个 dcsdk_functions.php 的文件，所有 SDK 提供的函数都会在 这里列出； 还有一个 site.xsd， 这个是 site.xml 的 xml schema 文件， 主要是辅助进行 site.xml 编辑。 参阅：查看目录结构模块化 模板描述符文件详解 模板是超级旺铺的基础，主要是模板、模板版本、配置和资源这四项，每一个模板都有一个 名称为 site.xml 的描述文件，包含一下信息： ? 基本信息：如模板语言、名称、描述、作品截图、作者、支持的网站、服务方式等 ? 模板全局信息：如全局 css，全局的页面 header 和 footer 等 ? 风格信息：模板所包含的风格，都要在
change log
description here
demo
green
untitled
出于 XML 编写的方便， SDK 为 site.xml 提供了 XSD， 只需要一个 XML Editor 就可以完成 XML 校验和相关的代码提示。 文件说明：此次升级主要是主要是把文件配置由原先的 php 变成 了 json，配置文件的相关内容请注意，此文件在创建模板的时候会自动生成。 模板编写 在模板中的模块都是集中在模板标准目录的 modules 目录中，可先参看模块编写规范 此次升级的重大改变：页面文件由 php 变更为 json。 如果对 json 数据结果不太了解，请 参考 https://www.360docs.net/doc/eb4701267.html,/wiki/JSON 此处请注意 kv 对的引号， 建议用 sdk 工具生成此文 件。 首先先看页面 json 结构如下： {"title":"index", "layouts":[ { "type": "grid-m", "modules": {"col-main":[ {"moduleID":"cuxiao","moduleVersion":"1.0.0"} ]} }, { "type": "grid-s5m0", "modules": {"col-sub":[
{"moduleID":"taobao.module.category","moduleVersion":"1.0-common"} ],"col-main":[
{"moduleID":"taobao.module.navigator","moduleVersion":"1.0-common"},
{"moduleID":"taobao.module.searchInShop","moduleVersion":"1.0-common"}, {"moduleID":"cuxiao","moduleVersion":"1.0.0"} ]}
}] } （1）index 页面对象中包含两个键值对，title 标示页面，layouts 标示布局 （2）layouts 数组中的每一个对象{}都为一种布局，type 标示布局分类，具体布局分类如下 （3）type 存在 8 种类型： a) 通栏布局 950：grid-m b)两栏布局 190-750：grid-s5m0 c) 两栏布局 750-190：grid-m0s5 d)三栏布局 190-190-550：grid-e5s5m0 e) 三栏布局 190-550-190：grid-e5m0s5 f) 三栏布局 550-190-190：grid-m0e5s5 g）头部：head h）尾部：foot （4）modules 标示所有模块，每个模块存放在对应的坑中，例子有 190-550-190 布局 a) col-main 为中间 550 区域 b) col-sub 为左边 190 边栏区域 c) col-extra 为右边 190 边栏区域 根据需求，将模块放入不同区域内
1. 引入模块
模块有两种类型， 分别是系统模块和设计师自定义模块， 下面分别说明如何引入系统模块和 设计师自定义模块： ? 引入系统模块
echo include_system_module("shop.picRound","1.0-common",100);
?> 其中 include_system_module 需要三个参数，第一个为“系统模块简称”，第二个为“系统模 块版本”，第三个为 domId,这里需要注意的是 domId 需要在页面内唯一。 ? 引入自定义模块 echo include_local_module("textbox",101);
?> 其中 include_local_module 有两个参数，第一个”textbox”为模块的名称，第二个为 domId, 这里需要注意的是 domId 需要在页面内唯一。
2. 引入片区
片区是设计师在页面预留的一块区域，卖家可以在坑里添加模块，具体引入坑的语法如下：
其中 include_modules 包含两个参数，第一个参数是片区对应的名称,第二个参数是片区里 面引入的默认模块列表。 引入片区需要注意以下几点： 1. 片区需要通过“J_TRegion”这个 class 来标识. 2. 片区里面也可以引入系统模块和引入自定义模块 ? “J_TRegion”外模块引用规范 高级模板支持“J_TRegion（坑，片区）”外的模块，但线上目前会存在“片区”外模块丢失的 问题；此问题预计在 4 月中旬修复。 片区外的模块的支持，只限于支持单个引用,即只能使用 include_system_module, include_local_module 进行单个模块引入。 使用 include_modules 引入的模块在编辑的时候 将被丢失。 如具体例子如下图所示：
? “J_Region 内模块的引用支持单个模块和多个模块 但目前线上使用 include_local_module, include_system_module 的进行单个引入的模块在 编辑都会丢失。此故障预计 4 月中解决。 同时设计师不被鼓励将 include_local_module, include_system_module 与 include_modules 连续使用。设计师更应该遵守不连续使用 include_modules 的约定。所有
连续使用这样的代码引入的模块都可能存在丢失或者莫名奇妙增加的问题。如下图所示
3. 模板中加入模块配置
设计师经常会遇到这样的问题：在模板挖了坑，但是没有办法控制坑中能够添加哪些模块。 现在在 SDK 模板中加入了新的配置规则，允许设计师精确配置自己坑中所支持的模块。 示例配置如下：
demo green
在 site 节点下的 rules 中配置通用的模块和头部尾部模块， 在 page 节点下的 rules 中配置具 体页面下坑中支持的模块。 通用模块的配置不需要指定坑的名称，头，尾，页面中的模块配置需要指定到页面中的具体 的坑名。 具体坑中支持哪些模块的计算方式是，通用配置集合与当前坑模块集合的并集。 模块配置支持系统模块和设计师自定义的模块两种模块类类型。
4. 宝贝详情页设计
宝贝详情页和其他页面不同，主要是设计师不再是设计整个页面，而是设计局部页面，这个 主要是出于买家的统一感受。对于宝贝详情页来说，配置信息如下：
这里需要设置一个宝贝详情文件名称，目前这个文件不需要设置任何内容，留空即可，但是 一定需要一个文件，主要是 URL 定位和以后的扩展，还有你需要设置两个 section，名称分 别为 left 和 right，不能更改这两个名称，然后是这两个 section 对应的 php 文件。如果你需 要设计多个 detail 文件，需要在 site.xml 中声明，配置不同的信息即可。 PHP Lite 引擎详解 SDK 提供的 PHP 环境并不是原生的 PHP，而是使用 Java 模拟 PHP 环境，最终是由 Java 来 负责 PHP 的渲染。PHP Lite 是 PHP 的精简版，主要用于 SDK 上，其目的是为设计师提供 PHP 的设计环境，同时确保服务器端的安全。
Php lite 限制
PHP-lite 对 PHP 的执行的一些限制： ? 循环次数限制:100 次(如 foreach,for,do,while 等循环语句的循环限制,当超过 100 次,则 立马就结束循环) ? 自定义方法嵌套调用层数限制:100 次(主要是防范无限递归调用,当超过调用层数限制,直 接抛出异常) ? 循环嵌套调用层数限制:4 层 (无论何种循环,都不能连套超过限制数,否则直接抛出异常) 以上限制皆为默认值,可以通过 taobao_quercus_config.properties 来配置合适的限制值
Php lite 函数白名单
PHP-lite 提供了 PHP 内置函数的白名单如下: https://www.360docs.net/doc/eb4701267.html,.caucho.quercus.lib.ArrayModule getLoadedExtensions array_change_key_case array_chunk array_combine array_count_values array_pop each array_key_exists key_exists array_keys array_fill array_flip array_pad array_filter array_product array_push array_rand array_reduce array_reverse array_search array_shift array_slice array_splice spliceImpl array_sum array_unique array_unshift array_values array_walk array_walk_recursive
arsort asort ksort krsort natsort natcasesort in_array rsort usort uasort uksort extract extract array_diff array_fill_keys array_diff_assoc array_diff_key array_diff_uassoc array_diff_ukey array_intersect array_intersect_assoc array_intersect_key array_intersect_uassoc array_intersect_ukey array_map array_merge array_merge_recursive array_multisort array_udiff array_udiff_assoc array_udiff_uassoc array_uintersect array_uintersect_assoc
array_uintersect_uassoc sizeof count next key prev reset shuffle sort pos compact current end range
https://www.360docs.net/doc/eb4701267.html,.caucho.quercus.lib.ClassesModule call_user_method call_user_method_array class_exists get_class get_called_class get_class_methods get_class_vars get_declared_classes get_object_vars get_parent_class interface_exists is_a is_object is_subclass_of method_exists property_exists
https://www.360docs.net/doc/eb4701267.html,.caucho.quercus.lib.CtypeModule getLoadedExtensions ctype_alnum isalnum ctype_alpha isalpha ctype_cntrl iscntrl ctype_digit isdigit ctype_graph isgraph ctype_lower islower ctype_print isprint ctype_punct ispunct ctype_space isspace ctype_upper isupper ctype_xdigit isxdigit
https://www.360docs.net/doc/eb4701267.html,.caucho.quercus.lib.date.DateModule cal_days_in_month checkdate idate easter_date easter_days getdate