在进行组件开发时,经常要根据需求分析出来一些相同点和异同点,然后把相同点进行封装,把异同点对外开放,也就是“求同存异”。那么如何对相同点进行封装呢?这里介绍一种常用的理念:模版在JS组件中的应用。

这里首先了解下模版的工作原理,可以简单地分成两个步骤:模板解析和数据渲染。根据对应的语法解析出对应的占位符,然后把占位符替换成对应的的数据。 如我们在JSP中写<a><%= name %></a>的时候,其实就是在应用模板,在后台这句话会被转换成out.print(“<a>”+name+”</a>”)。模板的数据渲染就是把模板中的占位符(这里是name,替换成传入的值(:lily)。在前端开发中,这种思路对于组件的封装以及开发,有重要的意义。

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

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

这样封装得怎么样?可以先思考下。大家都知道,需求是随时变化的,或许过了一段时间,需求变成显示的格式是“20120623日 16: 38”,此时,上述的封装无法满足当前的需求了。或许有人想,那也不难,直接增加一个显示类型参数来区分,然后使用switch来判断返回对应的日期;按照这个思路,修改后的代码是:

 

当前的封装确实比之前有进步,但还不是很满意,如果要显示如下的格式:“2012/12/06”,那不是又要增加一个case项呢?这样的维护成本太大,每增加一个显示格式类型,都要修改代码。 下面利用模版的理念来对这个日期格式进行封装。

在显示的日期格式中,相同点的元素哪些呢?有年、月、日、时、分、秒、季度、周;这些就是相同点;哪些是异同点呢?日期显示格式是由上述的共同点元素的各种组合。包括但不局限于下面的这些:
“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来表示,可用YYYYYY来表示;
  3.  利用正则表达式按照上述的方式来进行解析,并替换成对应的数据;

代码如下:

利用这个模版理念之后,有以下以下好处:

  • 使用范围更加广泛,可满足各种各种的日期格式,只要在使用时指定template的格式即可;
  •  思路清晰,代码比较简洁,避免通过switch来判断;

利用模版理念对组件的封装,一般适用以下范围:

  1.  共同点元素是固定,而这些共同点元素又可以随意组合展示;如上述的例子;还有倒计时组件,小时、分、秒这几个元素是固定,但组合后的表现形式可以是3小时5030秒、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>”

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