5.3　小程序的模板化

使用列表渲染展现文章列表是最好的方法吗？恐怕不是。如果其他页面同样需要显示文章列表怎么办？把代码清单5-4中的代码到处拷贝吗？这当然是最差的选择。

借助一下函数这个思想。我们通常会将一些公共的、经常使用的业务逻辑提取成一个公共的函数，当在多个地方需要使用函数时，只需要调用这个函数即可完成相应的业务。使用函数的好处是不言而喻的。

事实上，有一句话是这么描述软件开发的：编程世界里遇到的绝大多数问题都可以用封装的思想来解决。夸张一点儿来说，你所能看到的代码，其实全是封装过的代码。

小程序也提供了一个称作模板的技术来支持对wxml组件的封装，但是这种封装仅仅只是wxml的代码片段，并没有实现像AngularJS里的完整模块儿。在AngularJS里HTML、js可以作为一个整体被封装起来。但是在小程序中，我们只能将wxml封装，无法将模板的业务逻辑（js）也封装起来。

首先来看看如何使用模板，随后再讨论封装模板业务逻辑的问题。

要使用模板，自然需要先新建模板文件。在/pages/post下新建目录post-item，作为模板文件目录。接着在该目录下新建2个文件：post-item-tpl.wxml和post-item-tpl.wxss。这里使用tpl来结尾，只是一种建议和习惯，并不是强制要求，开发者可以自行定义模板名称。

使用模板是为了简化post.wxml中文章的写法，让文章可以成为一个单独的“组件”（但不是真的组件，只是模板），供其他多个地方使用。想想我们在使用image、text等组件时是不是很简单，只需要一个简单的<image></image>就可以实现图片的显示功能。同样，我们也可以尝试将文章编写成一个“组件”。

现在，尝试将post.wxml中<block>标签中关于文章的代码剪切到post-item-tpl.wxml中，让这段代码成为一个可复用的“组件”。

</template>模板相关内容必须被包裹在<template></template>标签内，使用name属性指定template模板的模板名。这个模板名将在引用模板时被使用。

当定义好一个template后，可以在其他页面引用这个template。现在我们在post.wxml中引用并使用这个template。

注意，以上代码没有列出swiper组件的代码。限于篇幅，只列出和当前内容相关的代码，请开发者保留post页面中的swiper代码。包括在以后的内容中，我们也只会列出页面的部分代码，这点请开发者注意。

保存运行，可以看到文章列表可以正常地加载和显示。我们来分析一下上面这段代码是如何引用和使用template模板的。

在post.wxml的顶部使用<import src="templatePath" />来引用模板。对于templatePath路径，这里需要注意，在当前版本中，可以在后面加wxml文件扩展名，也可以不加扩展名。但官方示例中是带有.wxml扩展名的，所以建议开发者带上模板文件的扩展名。

引用后模板就可以在页面中使用这个模板了。在需要模板的位置使用template标签引入模板。template的is属性指定要使用哪个模板，这里我们当然要使用postItemTpl这个模板。

再次类比一下函数，函数通常可以定义若干个参数，并从函数调用方传入一些数据。同样，模板也可以传入数据。通过template的data属性，可以向template传递数据。这里将wx：for得到的item传入到template里，这样就可以在template内部使用这个item了。要注意的是，向模板里传入数据，同样要使用{{}}的数据绑定语法，比如data={{item}}。