最近在做一个仓颉输入法练习软件，
用 html + css + js 写的。
我想建立一个物件可以依仓颉输入法输出字根。
( cangJieDecode['hapi'] // 输出 '的' )
可以把仓颉字根对应资料丢在 js 或 html 里。
js 的话我的程式会超级长......，所以我没有，
我是认为资料应该和程式分开。
但分开就是丢到 html 里了......。
一开始是在 for 循环里存取 dom 来建立 cangJie 的属性。
<tr>
<td alt="hapi">的</td>
<td alt="vfbtv">网</td>
....
</tr>
// 大概是这样
// for(var i=0; i<tr.length; i++)
// cangJie[td.alt] = td.textContent;
但后来发现浏览器要解析会很慢，
就改成存在一个标签里，要用再用 javascript 解析。
<pre>
的hapi
网vfbtv
就yfiku
...
</pre>
// var array = pre.textContent.split('\n');
// for(var i=0; i<array.length; i++){
// var s = array[i];
// cangJie[s.substr(1)] = s.charAt(0);
后来我想嵌入 flickr 或其它网站的图片，
或比较复杂的 html ，像：
<p>
欢迎你进入 <strong>仓颉练习</strong> ！
如果遇到困难可以参见 <a href="help.html">使用说明</a> 。
</p>
如果用 js 创建会很麻烦。
所以我是丢在 html 里，用 css 让她不显示。
需要的时候 clone 或 move 出来。
上面两项我觉得我的处理方法不错，不知道各位怎么想。
最后我想做一个键盘的图。
js 中至少要有方法： keyboard.highLight('a');
// 让画面上该字改变颜色或做变化，
// 应该是由改 css class 来达成。
那我应该把 html 写成：
<div id="keyboard">
<div>手田水口廿卜山戈人心</div>
...
</div>
或是
<div>
<span alt="q">手</span>
<span alt="w">田</span>
...
</div>
如果是第一种方法，我得在 js 里动态把内容改成第二种，
因为要可以让每个字个别变化，要每个字都是 html 元素。
或是直接用第二种就好了？
***************
打完全文我觉得好像直接写成第二种就好了......，
毕竟才 25 个字，解析起来应该不会差太多。
只是到时候我还是要用 js 一个个存取 dom 抓资料。
这是我的程式，我的第一个 js 程式。
可能写的很烂，也请不吝赐教。
https://gholk.github.io/cjns/exercise.html
另外我还不会用 ajax ，目前也不打算用。
不然把资料存在 json 里，好像还不错。
(我让这个程式可以离线跑。)