Slide 1
Slide 1 text
經驗分享：
Slide 2
Slide 2 text
聽說 COSCUP 投影片⼀一定要放貓…
Slide 3
Slide 3 text
輸入法
ㄔㄞ
Slide 4
Slide 4 text
拆
Slide 5
Slide 5 text
功能更多，當然不只查表
有吃的嗎？
還有什麼？
Slide 6
Slide 6 text
DEMO
http://timdream.org/jszhuyin/"
JS 注音 Firefox 附加元件
Slide 7
Slide 7 text
JS注音：自動選字手機輸入法
• 自動選字：ㄔㄞ ㄓㄥˋㄈㄨˇ → 拆政府
• 首碼／聲符輸入：ㄔㄓㄈ → 插枝法
• 混合：ㄔㄞㄓㄈ → 拆政府
• 建議：政府 → ~機關、~機構
• 連續選字
Slide 8
Slide 8 text
詞庫
Slide 9
Slide 9 text
詞庫來源
• 小麥注音 McBopomofo @mjhsieh
• MIT Licensed"
• ~14 萬字詞，TXT：6.2M"
• JSON：6.5M
"
./McBopomofo/Source/Data master$ make data.txt
bin/cook.py PhraseFreq.txt BPMFMappings.txt BPMFBase.txt data.txt
cat BPMFPunctuations.txt >> data.txt
cat Symbols.txt >> data.txt
./McBopomofo/Source/Data master$ wc –l data.txt
148060 data.txt
Slide 10
Slide 10 text
我今天要
5MB
的飼料
Slide 11
Slide 11 text
IndexedDB
• Implementation-independent, key-value storage for the Web"
• Very verbose and complex API, intend to be wrapped by
libraries."
window.indexedDB.open(‘database’).onsuccess =
function (evt) {
evt.target.result.transation(‘store’)
.objectStore(store).get(‘key’).onsuccess =
function (evt) {
console.log(evt.target.result);
};
};
• 以上範例還不包含錯誤處理、版本升級、新建 object store …"
Slide 12
Slide 12 text
插播：DOMRequest
var req = doSomething();
req.onsuccess = function …
req.onerror = function …
req.addEventListener(‘success’, handler);
"
• 目前新設計的 API 會偏向使用 Promise / Future"
• 別忘了 ECMAScript 6 還會有 yield
Slide 13
Slide 13 text
選字
Slide 14
Slide 14 text
窮舉法
明|天拆政府
明天拆|政府
明天拆政|府
明|天拆|政府
明天|拆|政府
Slide 15
Slide 15 text
Composition of a number
h&ps://en.wikipedia.org/wiki/Composi8on_%28number_theory%29#Examples
Slide 16
Slide 16 text
Composition of a number
• 2: [1,1], [2] (2 sets) "
• 3: [1,1,1], [1,2], [2,1], [3] (4 sets) "
• 4: [1,1,1,1], [1,1,2], [1,2,1], [2,1,1], [2,2], [3,1], [1,3], [4] (8 sets)"
• …"
• n: (2n-1 sets)"
• 通通丟進去查，加總積分來比就對了！"
Slide 17
Slide 17 text
遞迴查詢，連續選字
• ㄌㄧㄥˊㄕˊㄓㄥˋㄈㄨˇ"
• 零食政府
• 零食
• 零時
• 零
• 靈
• 玲
• …
• 輸出「零時」，扣掉兩個
發音繼續查詢
Slide 18
Slide 18 text
遞迴查詢，連續選字
• ㄓㄥˋㄈㄨˇ"
• 政府
• 政
• 正
• 證
• 症
• 鄭
• …
• 選擇「政府」
Slide 19
Slide 19 text
經驗分享
Slide 20
Slide 20 text
Change log
• Dec 2011：First version in Firefox OS Gaia"
• … optimization"
• Feb 2012：Switch to McBopomofo data"
• Feb 6th 2012：First rewrite"
• … improvements"
• Mar 2012：Desktop demo page"
• Aug 2012：Announcement on blog"
• Dec 2012：Split from Firefox OS Gaia with git filter-branch
• Jul 22nd 2013：rewrite2 begin"
• Aug 3rd 2013：Talk in COSCUP 2013"
Slide 21
Slide 21 text
已知問題
• 手機記憶體有限，GC 效能低落
• 在低階手機完全不堪使用
• 比 Emscripten 編譯的 libchewing 還要慢！？
• Closure/module pattern 內部無法單元測試
• 從外顯行為測試 ~1300 行的 Javascript：嗯，祝好運。
• There is a huge difference between hacking things
together in a short time and bootstrapping an
maintainable software project
Slide 22
Slide 22 text
踩雷
• IndexedDB 重複查詢，每次回傳的 object 互為 copy
而非 reference"
• Key
• “ㄊㄞˊ-ㄅㄟˇ-ㄕˋ” …?
• 很有結構的物件結構
• [["台",-2.946], ["臺",-3.501],
["抬",-4.771], ["颱",-4.809], … ];
Slide 23
Slide 23 text
曙光
• libtabe 記載的，源自倚天中文系統的編
碼系統，能將⼀一個音縮為 2 bytes
（= 1 char in Javascript）
1st Group 2nd Group 3rd Group Tone
Symbols
# of Symbols 21 3 13 5
# of Bits 6 2 4 3
• 將功能拆開成為各自的
Constructor Function 以及單元測試
• 將主要的運算放到 Web Workers 執行
• 打平資料結構
• 將積分轉為 4 bytes Float32，接在字串裡面
• 需要用的時候再從字串裡面讀 substring
讀書！
Slide 24
Slide 24 text
JSZhuyin v.2013JUL
• Client-Server 架構，用 postMessage() 溝通
Script
in
Browser
context
Script
in
Web
Worker/iframe
.
JSON/IndexedDB
Data
Storage
UI/Event
Listeners
Slide 25
Slide 25 text
Conference Driven
Development"
研討會死線式開發
Slide 26
Slide 26 text
Conference Driven
Development
（暈）
Slide 27
Slide 27 text
Classes
• BopomofoEncoder"
• StorageBase"
• JSONStorage"
• IndexedDBStorage"
• HybirdStorage"
• CacheStore"
• JSZhuyinIME …"
• IMEPostMessenger …"
• JSZhuyinLoader … ⁉-
• JSZhuyinWorkerLoader"
• JSZhuyinIframeLoader"
• JSZhuyin … "
• JSZhuyinLayoutMapper"
• WebJSZhuyinIME … "
Slide 28
Slide 28 text
Classes
• BopomofoEncoder"
• StorageBase"
• JSONStorage"
• IndexedDBStorage"
• HybirdStorage"
• CacheStore"
• JSZhuyin!
• JSZhuyinServer"
• JSZhuyinServerLoader"
• JSZhuyinServerWorkerLoader"
• JSZhuyinServerIframeLoader"
• JSZhuyinClient!
• JSZhuyinLayoutMapper"
• JSZhuyinWebIME
Slide 29
Slide 29 text
挑戰
• 無法延遲目前的 keyboardEvent，必須要提供 sync
response"
• Race condition"
• IndexedDB in worker thread is not available in
Firefox (yet, bug 701634)"
• … 說不定全部做完
Slide 30
Slide 30 text
meta
• Mozilla is hiring in Taipei, for Firefox OS!"
• MozTW 志工招募中！"
• Code: https://github.com/timdream/jszhuyin"
• Demo: http://timdream.org/jszhuyin/"
• 貓：