今日目標: 學習拿Polymer做實際應用

先來看看實際應用的小範例 (翻譯練習)

[線上試玩]

自訂HTML標簽 <x-word>...</x-word>

<x-word> 這標籤可以用來輸入單字，並即時與正確答案進行比對，而且可以唸出英文單字 (記得開喇叭)

<x-word>...</x-word> 標籤使用方式

會產生一個輸入框，如果按下逗號 『，』會自動唸出英文單字

單字拼錯背景會變成紅色

單字拼對了，會移除輸入框，改用純文字顯示

說明一下程式碼 [Github]

第3行 載入platform.js讓瀏覽器支援WebComponent用法

第4行 載入jquery.js方便寫這個範例

第5行 載入 x-word 這個自定標籤

第6行 使用Google所提供的等寬字形

第7行 設定內所使用的字型

第10行 放中文句子

第11行 放英文句子 (考題，準備提供使用者輸入)

第12行 答對考題後要顯示的圖片，目前先隱藏起來

再來就是範例主要程式了

第14行 考題

第15行 計算有幾個英文單字，每個英文單字對應一個<x-word>標籤

第17行 等元件載入完成後觸發

第18行 放中文句子到html中

第19~21行 將英文單字一個個用<x-word>包覆起來，然後放到 #en 這div內

第22行 自動focus()在第一個輸入框

第25~29行 由於使用者輸入完一個單字後，<x-word>會自動發出 x-word-check 這事件，所以這裡的程式碼是用來判斷，目前使用者輸入答對的單字數量，是否等於英文句子的單字數量，是的話就顯示 你好棒的圖片

<x-word> 自定HTML標籤件的程式說明

第1行 使用polymer一定要載入的最基礎元件 polymer.html

第2行 載入jquery使用，好吧，我承認我有點懶，用jquery方便些

第4行 宣告自定HTML標籤名稱為 x-word , 預設有 verify 屬性(自動對答) , 以及 size 屬性 (提供外部設定文字大小)

第7行 <div id='ctx'>..</div> 是準備用來控制答對移除input以及添加文字用

第 13~22 行是直接假設使用的瀏覽器有發出語音的能力，沒有的話就GG了. 這裡是設定語音的種類、腔調，和提供 _speak()方法，呼叫後會唸出傳入的words參數

有興趣了解語音API可以參考 [這裡]

再來就是元件的功能實做了，我簡略對每個function (功能) 交代一下，如果有問題再討論就好了 XD

第26行 又有一個speak() 呼叫 _speak(..) ，為什麼要繞一層，其實原因很簡單，為了省資源啊，每個x-word都具備相同的語音功能，但沒必要每個元件實例都寫一個語音物件啊，所以寫在static 區塊 (所有x-word元件共用的意思) 是比較省資源的選擇，共用就好了。會有需要語音雙重奏嗎? XD

ready() : 初始化元件時被呼叫，僅用來設定答對或答錯元素的動畫效果

attached(): 將單字記在word變數，然後清掉html顯示，然後計算單字的寬度，這裡會呼叫initField()幫忙處理。再來會呼叫keyinEvent用來監測使用者打字，判斷對或錯，要不要發出語音等功能

replaceEle(): 答對時會被呼叫，目的就是移除 input 輸入框

validate(): 驗證答對或打錯

focus(): 設定焦點

focusNext(): 在茫茫DOM裡面，找到下一個要輸入單字的輸入框

focusPrev(): 往前找一輸入單字的輸入框

這範例只是先起個頭，其實我想寫的範例是結合youtube元件來練英聽，而這自定html標籤 <x-word> 是基礎，所以先介紹這個元件使用，明天會加碼包裝句子元件，這樣就可以磨練整篇文章了。