作者hijkxyzuw (i,j,k) ×(x,y,z)
看板Web_Design
标题[请益] 把资料丢在 html 里还是用 js 处理？
时间Sun Aug 28 16:41:23 2016
最近在做一个仓颉输入法练习软体，
用 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 里，好像还不错。
(我让这个程式可以离线跑。)
--
「只有当你可以直视对方眼睛的时候，对方才也可以直视你的眼睛。」
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 140.116.207.237
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1472373693.A.EFA.html
1F：推 zoko741235: 资料还是存在 JS 或 JSON 吧 08/28 17:02
2F：推 oToToT: 觉得弄个JSON存着，然後JS把它吃进来比较好 08/28 17:33
3F：→ ssccg: 你搞错了，html是view，不是data 08/28 18:40
4F：→ ssccg: 要把程式逻辑和分开，也不会用html存资料 08/28 18:42
5F：→ ssccg: 只要放在另一个js档就好了，不管是js还是json， 08/28 18:43
HTML 是 content ，是放有内容的东西，样式要放到 css 。
并不是看不到的东西就不用放。
HTML 里当然可以放资料，像 table 就是放资料的元素，
还有 head 里那一大堆後设资料也都是。
我写过一个小脚本，从 html 里抓 head 里的 metadata ，
做成 footer 放到 html 里。
※ 编辑: hijkxyzuw (140.116.102.135), 08/29/2016 12:18:58
6F：→ kyleJ: 推 要把程式逻辑和分开，也不会用html存资料 08/29 12:41
7F：→ ssccg: 所以你觉得你的转换程式中的对照表，对网页来说是content? 08/29 12:41
8F：→ ssccg: 那还问什麽，就用html啊 08/29 12:42
因为如果没有对照表，那这个网页就等於没有内容了……；
只剩标题和其它被 css 藏起来的东西。
我认为 html 是一个架构，可以存任何东西。
像 xml 可以存资料， html 也可以。
9F：→ kyleJ: 另外不使用AJAX也还是能用JSON 两者没有直接关系 08/29 12:42
我是考虑到要存成可以离线用，
但一般浏览器不给读本机的 json 档。
否则就是存成 .js 直接用执行的。
※ 编辑: hijkxyzuw (140.116.102.135), 08/29/2016 14:45:57
10F：→ ssccg: 如果只用在这个网页，可能可以算是content，但是如果哪天要 08/31 02:21
11F：→ ssccg: 把这支程式放在别的网页，很明显那个表是js程式的data而不 08/31 02:22
12F：→ ssccg: 是网页的content 08/31 02:22
13F：→ ssccg: json格式本身就是合法的js物件，加个var data = 就可以直接 08/31 02:24
14F：→ ssccg: 当js用，.json只是给输入只吃json的用，资料格式是没什麽差 08/31 02:27
我的想法是， js 的意义是操纵 html 里的内容，
而不是 *主动产生内容* 。
这个网页内容是所有常用字的仓颉码，使用者可以读。
而 js 会随机抓出一组给使用者，并核对对错。
我後来觉得不应该做出 *把字根翻成字的功能* ，
应该只要核对该组输入正不正确就好了。
宣告那麽大的物件不太好，而且那样的确该用一个独立的资料档。
※ 编辑: hijkxyzuw (140.116.102.135), 09/01/2016 22:53:49
15F：→ ssccg: 好吧应该是我没看懂你的需求，如果那些字根真的是要显示出 09/02 10:27
16F：→ ssccg: 来，当然就直接放html上 09/02 10:28
17F：→ ssccg: 不过以一般的WebApp来说，我觉得js不只是操纵html里的内容 09/02 10:29
18F：→ ssccg: js就是WebApp的程式逻辑，操作html(DOM、view)只是功能之一 09/02 10:31