Module 開發 – hashtag

mei

相信大家對於 facebook hashtag 都已經很熟悉了, 只要鍵入 # 開頭的符號, 就可以輕輕鬆鬆幫自己的 post 上 tag, 透過 hashtag 的導入, 可以迅速的將自己的 post 做一個 grouping, 讓對該主題有興趣的朋友可以一覽下了這個 tag 的 post 有哪些

由於這是個有趣的 feature, 所以我們家 PM 也希望可以把這功能納入自家服務當中, 於是筆者便著手 survey 一下相關的實作, 筆者發現像這種特殊用途的 input 類型 tag 其實非常適合使用 web components 來做封裝, 類似 inpyt[type=date] 一樣, 只要設定特定的 HTML tag 便能馬上具備特定的功能, 於是乎 <hash-tag> 這個標籤便因應此需求而誕生 歡迎點擊下方連結進行觀看 : hashtag: http://mei.homin.com.tw/hashtagProt…

由於架構在 Web Components 上, 所以「hashtag」俱備了可攜、易用的特性, 搭配客製化 tag – <hash-tag> (custom element), 除了語意化結構獲得了補強, 並且發揮了 custom element 的「熱拔插」特性, 只要對 DOM 進行 element append / remove 的動作, 便可以快速對 element 進行 init / detach 的行為, 對 developer 的 effort 降到最低, 達到快速安裝使用. 最有趣的還可以直接在 element 上 bundle method, 讓 developer 可以輕輕鬆鬆便享受到 tag 所帶來的便利性, 將心力用於其他細節處理上, 讓整體體驗達到另一層次

如何套用 hashtag 到服務上

在頁面上任何想要套用 hashtag 的地方插入相對應的 html tag <hash-tag> …(git)

<hash-tag>    <h3>hash-tag</h3>    <input name="hashtag" value="# mei # lauMu" placeholder="Enter some hashtag here..."></hash-tag>

另外, JavaScript 也要將之 require 進來

< script async src="js/pack-hashtag.js">< /script >

由於 hashtag is designed by native JavaScript, 所以不管當前 website 是使用什麼樣的 framework, 皆可以正常運作, 不會受到任何影響

hashtag 再進行 init 的時候, 會將子元素第一個 input 的當前設定來做初始化設定

  • name: input field name, 當 user 完成 keyin 的動作後, 會把有 mapping 到的 tag 以 array 的方式產出, ex: hashtag[]
  • value: 設定初始話內容
  • placeholder: 當 hashtag field value 為空時, 要顯示的文字

例外, 也可以透過 JSON String 的方式來帶入相關初始化的 data

{    "fieldName": "hashtag",    "fieldValue": "# mei # lauMu"    "placeholder": "Enter some hashtag here..."}

再將上述 data 以 JSON String 的形式帶入 data-conf 這個 attribute 即可, 如下所示

<hash-tag data-conf='JSON String'></hash-tag>

完成 init 後, 只要是內容物有符合我們所設定的 rule, 即會將相關的 tag 做一個裝飾的動作, 讓 user 可以很清楚的知道有哪些 tag 是已經 mapping 到 rule Mapping 的 rule 就跟 facebook 的設定一樣, 由 “#” 這個 sign 做起始, 然後一個 space 做結束, 由於我們 default 帶進來的值是有符合該 rule, 所以它會如同下圖所示

完成 init 後的 <hash-tag>

由於我們有設定 placeholder, 這表示說當我們內容物為空時, 它便會顯示相關的內容於元件上

有設定 placeholder 且內容物為空時的呈現

接下來我們試著鍵入一些不同的組合, 來觀察一下相關的呈現

有 mapping 的 rule 的 text 就會自動加上裝飾, 方便 user catch 相關的訊息

至於資料結構的呈現會是如何呢 ? 基本上 hashtag 會將整理好的資料用 array 的方式做呈現, 不過由於 form action 無法將 shadowDOM 裡面的 input 刮出來做資料傳遞, 因此這些資料的結構必須置放在 shadowDOM 之外, 系統會將產生一個 .vanquish 的元件來做存放, hashtag 會做 de-deplictae 的動作, 即表示如果 keyin 了重複的 hashtag, 也僅僅只會 generate 一筆資料

所有的資料都被置於 .vanquish 中

此外, 亦會將原始內容放置於一 textarea 中, 方便做其它處理用, 該 textarea 的命名規則為 fieldName + Src

以上, 便是 hashtag 的基本設置, 輕輕鬆鬆幾個簡單的步驟, 就可以幫頁面上 form 新增相關的元件, 另外 hash-tag 亦提供了一些 method 來方便 developer 使用

hashtag 所提供的各種 method

  • set: 用來設定 hashtag 的內容, 如果需要動態調整其內容的話, 便可以透過這個 method 來做 .. .(git)
$('hash-tag').set('# mei # lauMu');
  • get: 用來取得當前有 mapping 到 rule 的所有資料, 資料會以 array 的型態進行回傳, 如果帶入 ‘source’ 這個 parameter 的話, 則會回傳原始資料 … (git)
$('hash-tag').get(); // return ['# mei', '# lauMu']$('hash-tag').get('source'); // return original content
  • hash-tag[data-set]: 除了以上兩種 method 之外, 其實 hashtag 亦支援透過 attribute 變化來動態更換當前內容 (browser must support web components) … (git)
$('hash-tag').setAttribute('data-set', '# mei # lauMu');

透過上面的 method 便可以方便 user 來做一些簡單的動態變化或者是資料驗證, 讓 hashtag 的支援度更趨於完整

hashtag 特點

  • pure native JavaScript, 不需要憑依在任何 framework 上
  • 使用容易, 透過簡單 HTML tag的設置, 便可以快速擁有其 feature
  • 輸入與裝飾分層表現, 讓 user keyin 回歸到最初的感動, 不會因為多餘的 JavaScript 運算造成不舒服的操作體驗

以上, 便是 hashtag 的相關使用與分享, 有興趣的朋友們請不用客氣, 可以直接使用, 也請不吝一同討論與指教喔!

測試環境:

  • OS: Windows 7
  • Browser: Chrome Version 50.0.2661.75 m (64-bit) , Firefox 45.0.2, Internet Explorer Version 11.0.9600.18230

Reference:

轉載文章 – Module 開發 – hashtag

mei