如何将模板理念应用到JS组件中

当我们在进行组件开发时，经常要根据需求分析出来一些相同点和异同点，然后把相同点进行封装，把异同点对外开放，也就是“求同存异”。那么我们该如何对相同点进行封装呢？这里我就借助马海祥博客的平台跟大家详细的介绍一种常用的方法。

1、模板的工作原理

我们首先了解下模板的工作原理，可以简单地分成两个步骤：模板解析和数据渲染。根据对应的语法解析出对应的占位符，然后把占位符替换成对应的的数据。

如我们在JSP中写<a><%= name %></a>的时候，其实就是在应用模板，在后台这句话会被转换成out.print(“<a>”+name+”</a>”)。模板的数据渲染就是把模板中的占位符（这里是name），替换成传入的值(如:lily)。在前端开发中，这种思路对于组件的封装以及开发，有重要的意义。

下面马海祥就来通过一个简单的例子来让大家理解如何利用模板在组件中的应用。需求是在一个列表中，有一列要求按照年月日的格式显示，如：2012-6-21。 一看这个需求，估计很多人觉得非常简单，几行代码就可以实现，如下图所示：

从功能角度上来看已实现功能，但从组件角度看使用范围太小。如果产品突然提出这样的需求：要显示完整的日期，包括分秒，如：2012-6-21 15:33；此时，这样的封装就无法满足需求。或许有人想，那也比较简单，可以通过增加一个参数，来判断是否显示完整格式，还是短日期格式，修改后的代码如下图所示：

大家都知道，需求是随时变化的，或许过了一段时间，需求变成显示的格式是“2012年06月23日 16: 38”，此时，上述的封装无法满足当前的需求了。或许有人想，那也不难，直接增加一个显示类型参数来区分，然后使用switch来判断返回对应的日期；按照这个思路，修改后的代码如下图所示：

当前的封装确实比之前有进步，但还不是很满意，如果要显示如下的格式：“2012/12/06”，那不是又要增加一个case项呢？这样的维护成本太大，每增加一个显示格式类型，都要修改代码。

2、利用模板的理念来对这个日期格式进行封装

在显示的日期格式中，相同点的元素哪些呢？有年、月、日、时、分、秒、季度、周；这些就是相同点；哪些是异同点呢？日期显示格式是由上述的共同点元素的各种组合。马海祥觉得包括但不局限于下面的这些：

“yyyy/MM/dd”
　　“yyyy-MM-dd”
　　“yy/MM/dd”
　　“yy-MM-dd”
　　“yyyy/MM/dd hh:mm:ss”
　　“yyyy-MM-dd hh:mm:ss”
　　“yy/MM/dd hh:mm:ss”
　　“yy-MM-dd hh:mm:ss”
　　“hh:mm:ss”
　　“hh:mm”
　　……

按照前面提出的模板理念，先要制定解析的语法或规则：

（1）、用元素符号y、M、d、h、m、s、q、w（区分大小写）来分别代表日期中固定的元素：年、月、日、时、分、秒、季度、星期几。

（2）、如果要显示N位，则可重复N次对应的元素符号，但N不能够大于其对应的最大长度，如年最长是4位，不能够用YYYYY来表示，可用YYYY或YY来表示。

（3）、利用正则表达式按照上述的方式来进行解析，并替换成对应的数据。

代码如下图所示：

3、模板理念的好处

利用这个模板理念之后，有以下以下好处：

（1）、使用范围更加广泛，可满足各种各种的日期格式，只要在使用时指定template的格式即可。

（2）、思路清晰，代码比较简洁，避免通过switch来判断。

4、模板理念的适用范围

利用模板理念对组件的封装，一般适用以下范围：

（1）、共同点元素是固定，而这些共同点元素又可以随意组合展示；如上述的例子；还有倒计时组件，小时、分、秒这几个元素是固定，但组合后的表现形式可以是3小时50分30秒、3:50:30等；

（2）、在UI组件中，界面一样，但JSON结构字段名不固定；

如上图所示，假设显示的数据的都是动态填充的，而且每个场景JSON数据结构字段名不一样，假设有2种JSON格式，分别是：[{name: '选项1',id: 1},{name: '选项2',id: 2},{name: '选项3',id: 3}]和[{value: '选项1',id: 1},{value: '选项2',id: 2},{value: '选项3',id: 3}]

此时可以对template做如下的设置：

Template = ”<li><a href=”#none”>{name}</a></li>”
　　Template = ”<li><a href=”#none”>{value}</a></li>”

（3）、在UI组件中，HTML结构不一样，JSON数据结构是一样；

如上图所示的分享组件中，JSON的数据结构是一样，可HTML结构不一样：可利用模版来解析对应的HTML模版。

（4）、HTML结构和JSON数据结构都不一样。

有的UI组件，HTML结构是不一样，同时对应的JSON数据结构也不一样，此时往往可通过模版来建立HTML和JSON数据结构之间的关联； 如假设JSON结构是：

[{id:1,name="lily"},{id:2,name:'lucy'}]

template可设置：

template = “<li><a href=”#none” id=”a{id}”>{name}</a></li>”

或者

template = “<div id=”a{id}”>{name}</div>”

马海祥博客点评：

在封装组件时，对于上述的类型，都可以考虑用模版的理念来进行封装。把模板的理念应用在组件的开发中，可有效降低逻辑的复杂性，同时增强组件的应用性，而且能够把数据和表现分离，分层更加清晰，有利于组件的维护。