本文屬于波瀾不驚，平鋪直敘版本。如果想看有激情有思想的版本，可以去ISUX官博：“順勢(shì)而為，HTML發(fā)展與UI組件設(shè)計(jì)進(jìn)化”，多多留言哈。
一、基于HTML開發(fā)組件的設(shè)計(jì)思想
要想知道基于原生的HTML進(jìn)行UI組件開發(fā)是什么鬼，您可以狠狠地點(diǎn)擊這里：基于原生的HTML UI組件體驗(yàn)demo
點(diǎn)擊上面的demo, 進(jìn)入一個(gè)平凡的靜態(tài)頁(yè)面，引入眼簾的是一個(gè)普通的表單，里面的UI都是系統(tǒng)默認(rèn)的，HTML功能也是原生的。
例如：
- title提示
- 選擇日期
- 點(diǎn)擊提交的表單驗(yàn)證
UI雖然原始，但是功能卻很健全。
例如：
- 男女款式、城市以及運(yùn)費(fèi)險(xiǎn)對(duì)價(jià)格的影響
- 表單提交事件
下面，就是奇跡出現(xiàn)了，點(diǎn)擊demo頁(yè)面(下圖所示)的按鈕進(jìn)行某項(xiàng)目UI組件資源的加載和初始化：
結(jié)果，一瞬間，上面原始粗糙的界面一下子變成了這樣子：
妥妥的丑小鴨變成了白天鵝，包括之前原生的HTML功能。
例如：
- title提示
- 選擇日期
- 點(diǎn)擊提交的表單驗(yàn)證
而，最最重要，和最最神奇的事情是：我們僅僅是引入了UI組件的一些CSS和JS，對(duì)，僅僅是引入和一點(diǎn)初始化，沒有動(dòng)之前一點(diǎn)點(diǎn)一絲絲的業(yè)務(wù)JS. 但是，之前的各種交互功能，卻完全不受影響，反而體驗(yàn)更上兩層樓!
請(qǐng)看下面的gif截圖演示：
之所以這里的UI組件可以和業(yè)務(wù)相關(guān)JavaScript完全分離，同時(shí)可以無縫對(duì)接。就是因?yàn)樵O(shè)計(jì)理念上是基于原生的HTML實(shí)現(xiàn)的，讓UI組件回歸其本質(zhì)或者說本職作用——UI.
二、基于原生HTML的UI組件開發(fā)
解決2個(gè)疑問：
-
為何可以基于原生HTML進(jìn)行UI組件開發(fā)?
-
如何基于原生HTML進(jìn)行UI組件開發(fā)?
1. 為何可以基于原生HTML進(jìn)行UI組件開發(fā)?
HTML中自帶的很多原生的UI表現(xiàn)，UI組件的UI表現(xiàn)本質(zhì)上是類似的，差別僅僅在于長(zhǎng)相的粗糙和精致。
舉個(gè)例子，title提示。瀏覽器默認(rèn)使用title屬性，長(zhǎng)這樣：
而設(shè)計(jì)師設(shè)計(jì)的tips組件是小黑風(fēng)格，如下：
這兩者其實(shí)是一個(gè)東西，作用是一樣的，差別僅僅在于——UI. 因此，我們完全可以基于原生的title屬性實(shí)現(xiàn)我們的tips提示效果。利用相同的本質(zhì)，改變的僅僅是呈現(xiàn)的樣子。
再舉個(gè)更有意思的例子，表單驗(yàn)證。在HTML5中，表單默認(rèn)內(nèi)置驗(yàn)證，基于type, required, pattern, max, min等HTML原生屬性，且自帶UI(下圖是win下Chrome效果，其他系統(tǒng)其他瀏覽器長(zhǎng)相不一樣):
下圖則是team決定采用的UI形式：
同樣的，驗(yàn)證的本質(zhì)都是類似的，交互的形式也是類似的，不一樣的僅僅是UI. 因此，我們完全可以基于原生的HTML驗(yàn)證規(guī)則實(shí)現(xiàn)我們的表單驗(yàn)證效果。利用相同的本質(zhì)，改變的僅僅是呈現(xiàn)的樣子。
其他很多UI組件都是類似的。
當(dāng)我們希望改變的僅僅是相貌的時(shí)候，重復(fù)利用之前的靈魂難道不是最合理的策略嗎?
2. 如何基于原生HTML進(jìn)行UI組件開發(fā)?
有2個(gè)要點(diǎn)：① API參數(shù)直接取自HTML; ② 回調(diào)直接trigger原生事件;
我們拿上面提過的日期時(shí)間選擇器舉例說明下。
日期選擇器，主流實(shí)現(xiàn)基本上是這樣的：
new DatePicker($("#date"), {
type: "date",
initDate: ..,
beginDate: ..,
endDate: ..,
onSelected: $.noop
});
API參數(shù)，事件的回調(diào)全部源自JS參數(shù)。
而面向HTML的設(shè)計(jì)思想下的實(shí)現(xiàn)則是：
new DateTime($("[type=date]");
API參數(shù)全部取自HTML，JS代碼僅僅就是全局初始化(一次覆蓋所有時(shí)間類控件)。其中HTML中的type屬性對(duì)應(yīng)JS中的type API, value屬性值對(duì)應(yīng)initDate值, min/max分別對(duì)應(yīng)beginDate/endDate. 至于onSelected回調(diào)，則是通過trigger input框原生的change時(shí)間實(shí)現(xiàn)。
于是，其他前端小伙伴在開發(fā)的時(shí)候，就可以按照原生的HTML屬性和事件來開發(fā)就可以了，從而實(shí)現(xiàn)業(yè)務(wù)JS和UI組件基于0成本的無縫對(duì)接。
三、面向HTML的UI組件開發(fā)的好處
- 語(yǔ)義化，可訪問性，SEO等;
- 學(xué)習(xí)成本低;
- 專注HTML控件本身，而不是組件;
- 可以一次性全局處理;
1. 語(yǔ)義化，可訪問性
畢竟是基于原生HTML來開發(fā)的，這一塊必定杠杠的。
2. 更低的學(xué)習(xí)成本
不需要記住千差萬(wàn)別的JS API名稱，記住標(biāo)準(zhǔn)的HTML5屬性即可，反過來對(duì)一些前端開發(fā)同學(xué)的HTML學(xué)習(xí)還起到了幫助作用。
而學(xué)習(xí)成本低對(duì)于跨團(tuán)隊(duì)合作非常有幫助。其他團(tuán)隊(duì)同學(xué)樂于使用你的東西，介入快，實(shí)現(xiàn)效果好，大家都開心。反之，API千差萬(wàn)別，每次使用都要去翻文檔，肯定影響合作。
不過，實(shí)踐下來，有一點(diǎn)學(xué)習(xí)成本我沒考慮到，就是轉(zhuǎn)換思維方式的學(xué)習(xí)成本。實(shí)際上只要面向元素的HTML元素開發(fā)就可以了，但是有遇到小伙伴，還是按照老的思維方式，在生成的UI組件元素上做文章。
3. 專注HTML控件本身，而不是組件
舉個(gè)例子，日期選擇器，當(dāng)日期修改了，我們要干嘛干嘛，直接：
$("input").change(function() {});想要修改日期范圍，直接：
$("input").attr({
"min": "2015-12-27",
"max": "2016-12-27"
});UI組件會(huì)自動(dòng)同步。沒有任何組件相關(guān)的JS代碼，也沒有什么故弄玄虛，沒有所謂的高屋建瓴，全是很簡(jiǎn)單基礎(chǔ)的HTML操作。是不是這樣的開發(fā)反而很省心，連小白用戶也能上手?
于是乎，在多團(tuán)隊(duì)聯(lián)合協(xié)作開發(fā)的時(shí)候，前端開發(fā)的進(jìn)度并不會(huì)受UI組件開發(fā)影響，面向HTML，專心自身業(yè)務(wù)開發(fā)就可以了。
于是乎，實(shí)現(xiàn)了一個(gè)聽上去很了不得的東西：前端分離。
不僅如此，廠子里有很多開發(fā)，負(fù)責(zé)內(nèi)部項(xiàng)目，會(huì)寫JS擅長(zhǎng)業(yè)務(wù)功能實(shí)現(xiàn)，但是，UI這塊是個(gè)軟肋。OK，此時(shí)，我們這里面向HTML開發(fā)的UI組件體系就是其救星，對(duì)吧，直接引入CSS和JS，簡(jiǎn)單全局初始化一下(可能還有一些簡(jiǎn)單的微調(diào))，結(jié)果，頁(yè)面立馬高大上了，是不是很有用!
4. 可以一次性全局處理
傳統(tǒng)實(shí)現(xiàn)，每個(gè)具體業(yè)務(wù)的腳本里面要參與UI組件的具體API參數(shù)設(shè)置。而面向HTML的實(shí)現(xiàn)，API落地與具體的業(yè)務(wù)頁(yè)面，于是乎，只要在項(xiàng)目的common.js中全局初始化一下，如下拉Select.init(), 具體的業(yè)務(wù)JS文件(絕大多數(shù)情況下)中就無需再出現(xiàn)UI組件相關(guān)的JS代碼。
UI層的JS代碼和業(yè)務(wù)層JS代碼分離，實(shí)現(xiàn)進(jìn)一步的「前端分離」，去耦合。對(duì)于日后的維護(hù)、升級(jí)等必定大有裨益。
四、總結(jié)
本文主講設(shè)計(jì)思想，至于具體的技術(shù)細(xì)節(jié)，以后有機(jī)會(huì)會(huì)慢慢分享。越是簡(jiǎn)單的成品越是需要足夠的積累。
然而，現(xiàn)在的我再重新評(píng)估UI組件的實(shí)現(xiàn)，還是有一些遺憾的，主要遺憾在于，HTML層→數(shù)據(jù)層→展現(xiàn)層這三層概念實(shí)現(xiàn)的時(shí)候并沒有理得很清楚。目前，HTML層和展現(xiàn)層沒有任何問題，但是，數(shù)據(jù)層，并沒有完整貫穿整個(gè)UI組件體系，導(dǎo)致，本UI組件體系不能很好地吸引對(duì)JSON數(shù)據(jù)有著偏執(zhí)愛好的開發(fā)，以及應(yīng)付潛在的極端需求。
不過，不要擔(dān)心，明年，也就是16年，我會(huì)對(duì)組件設(shè)計(jì)進(jìn)一步增強(qiáng)，首先，不考慮IE7瀏覽器，于是可以做的事情就更多了;其次，清晰的數(shù)據(jù)層作為中間層的代碼重構(gòu)等。
以上，希望本文的內(nèi)容能夠?qū)Υ蠹矣幸稽c(diǎn)啟示。
來源：http://www.zhangxinxu.com/wordpress/?p=5180
作者：張?chǎng)涡?/FONT>