如何將模板理念應(yīng)用到JS組件中

時(shí)間：2022-05-29 15:33:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 15:33:01 來源：網(wǎng)絡(luò)營銷

當(dāng)我們?cè)谶M(jìn)行組件開發(fā)時(shí)，經(jīng)常要根據(jù)需求分析出來一些相同點(diǎn)和異同點(diǎn)，然后把相同點(diǎn)進(jìn)行封裝，把異同點(diǎn)對(duì)外開放，也就是“求同存異”。那么我們?cè)撊绾螌?duì)相同點(diǎn)進(jìn)行封裝呢？這里我就借助億企邦的平臺(tái)跟大家詳細(xì)的介紹一種常用的方法。

1、模板的工作原理

我們首先了解下模板的工作原理，可以簡單地分成兩個(gè)步驟：模板解析和數(shù)據(jù)渲染。根據(jù)對(duì)應(yīng)的語法解析出對(duì)應(yīng)的占位符，然后把占位符替換成對(duì)應(yīng)的的數(shù)據(jù)。

如我們?cè)贘SP中寫<a><%= name %></a>的時(shí)候，其實(shí)就是在應(yīng)用模板，在后臺(tái)這句話會(huì)被轉(zhuǎn)換成out.print(“<a>”+name+”</a>”)。模板的數(shù)據(jù)渲染就是把模板中的占位符（這里是name），替換成傳入的值(如:lily)。在前端開發(fā)中，這種思路對(duì)于組件的封裝以及開發(fā)，有重要的意義。

下面億企邦就來通過一個(gè)簡單的例子來讓大家理解如何利用模板在組件中的應(yīng)用。需求是在一個(gè)列表中，有一列要求按照年月日的格式顯示，如：2012-6-21。 一看這個(gè)需求，估計(jì)很多人覺得非常簡單，幾行代碼就可以實(shí)現(xiàn)，如下圖所示：

從功能角度上來看已實(shí)現(xiàn)功能，但從組件角度看使用范圍太小。如果產(chǎn)品突然提出這樣的需求：要顯示完整的日期，包括分秒，如：2012-6-21 15:33；此時(shí)，這樣的封裝就無法滿足需求。或許有人想，那也比較簡單，可以通過增加一個(gè)參數(shù)，來判斷是否顯示完整格式，還是短日期格式，修改后的代碼如下圖所示：

大家都知道，需求是隨時(shí)變化的，或許過了一段時(shí)間，需求變成顯示的格式是“2012年06月23日 16: 38”，此時(shí)，上述的封裝無法滿足當(dāng)前的需求了。或許有人想，那也不難，直接增加一個(gè)顯示類型參數(shù)來區(qū)分，然后使用switch來判斷返回對(duì)應(yīng)的日期；按照這個(gè)思路，修改后的代碼如下圖所示：

當(dāng)前的封裝確實(shí)比之前有進(jìn)步，但還不是很滿意，如果要顯示如下的格式：“2012/12/06”，那不是又要增加一個(gè)case項(xiàng)呢？這樣的維護(hù)成本太大，每增加一個(gè)顯示格式類型，都要修改代碼。

2、利用模板的理念來對(duì)這個(gè)日期格式進(jìn)行封裝

在顯示的日期格式中，相同點(diǎn)的元素哪些呢？有年、月、日、時(shí)、分、秒、季度、周；這些就是相同點(diǎn)；哪些是異同點(diǎn)呢？日期顯示格式是由上述的共同點(diǎn)元素的各種組合。億企邦覺得包括但不局限于下面的這些：

“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”
　　……

按照前面提出的模板理念，先要制定解析的語法或規(guī)則：

（1）、用元素符號(hào)y、M、d、h、m、s、q、w（區(qū)分大小寫）來分別代表日期中固定的元素：年、月、日、時(shí)、分、秒、季度、星期幾。

（2）、如果要顯示N位，則可重復(fù)N次對(duì)應(yīng)的元素符號(hào)，但N不能夠大于其對(duì)應(yīng)的最大長度，如年最長是4位，不能夠用YYYYY來表示，可用YYYY或YY來表示。

（3）、利用正則表達(dá)式按照上述的方式來進(jìn)行解析，并替換成對(duì)應(yīng)的數(shù)據(jù)。

代碼如下圖所示：

3、模板理念的好處

利用這個(gè)模板理念之后，有以下以下好處：

（1）、使用范圍更加廣泛，可滿足各種各種的日期格式，只要在使用時(shí)指定template的格式即可。

（2）、思路清晰，代碼比較簡潔，避免通過switch來判斷。

4、模板理念的適用范圍

利用模板理念對(duì)組件的封裝，一般適用以下范圍：

（1）、共同點(diǎn)元素是固定，而這些共同點(diǎn)元素又可以隨意組合展示；如上述的例子；還有倒計(jì)時(shí)組件，小時(shí)、分、秒這幾個(gè)元素是固定，但組合后的表現(xiàn)形式可以是3小時(shí)50分30秒、3:50:30等；

（2）、在UI組件中，界面一樣，但JSON結(jié)構(gòu)字段名不固定；

如上圖所示，假設(shè)顯示的數(shù)據(jù)的都是動(dòng)態(tài)填充的，而且每個(gè)場景JSON數(shù)據(jù)結(jié)構(gòu)字段名不一樣，假設(shè)有2種JSON格式，分別是：[{name: '選項(xiàng)1',id: 1},{name: '選項(xiàng)2',id: 2},{name: '選項(xiàng)3',id: 3}]和[{value: '選項(xiàng)1',id: 1},{value: '選項(xiàng)2',id: 2},{value: '選項(xiàng)3',id: 3}]

此時(shí)可以對(duì)template做如下的設(shè)置：

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

（3）、在UI組件中，HTML結(jié)構(gòu)不一樣，JSON數(shù)據(jù)結(jié)構(gòu)是一樣；

如上圖所示的分享組件中，JSON的數(shù)據(jù)結(jié)構(gòu)是一樣，可HTML結(jié)構(gòu)不一樣：可利用模版來解析對(duì)應(yīng)的HTML模版。

（4）、HTML結(jié)構(gòu)和JSON數(shù)據(jù)結(jié)構(gòu)都不一樣。

有的UI組件，HTML結(jié)構(gòu)是不一樣，同時(shí)對(duì)應(yīng)的JSON數(shù)據(jù)結(jié)構(gòu)也不一樣，此時(shí)往往可通過模版來建立HTML和JSON數(shù)據(jù)結(jié)構(gòu)之間的關(guān)聯(lián)； 如假設(shè)JSON結(jié)構(gòu)是：

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

template可設(shè)置：

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

或者

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

億企邦點(diǎn)評(píng)：

在封裝組件時(shí)，對(duì)于上述的類型，都可以考慮用模版的理念來進(jìn)行封裝。把模板的理念應(yīng)用在組件的開發(fā)中，可有效降低邏輯的復(fù)雜性，同時(shí)增強(qiáng)組件的應(yīng)用性，而且能夠把數(shù)據(jù)和表現(xiàn)分離，分層更加清晰，有利于組件的維護(hù)。