[請益] 把資料丟在 html 裡還是用 js 處理？

[hijkxyzuw (i,j,k) ×(x,y,z)]

最近在做一個倉頡輸入法練習軟體，
用 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://www.ptt.cc/bbs/Web_Design/M.1472373693.A.EFA.html
推 zoko741235: 資料還是存在 JS 或 JSON 吧
推 oToToT: 覺得弄個JSON存著，然後JS把它吃進來比較好
→ ssccg: 你搞錯了，html是view，不是data
→ ssccg: 要把程式邏輯和分開，也不會用html存資料
→ ssccg: 只要放在另一個js檔就好了，不管是js還是json，
HTML 是 content ，是放有內容的東西，樣式要放到 css 。
並不是看不到的東西就不用放。

HTML 裡當然可以放資料，像 table 就是放資料的元素，
還有 head 裡那一大堆後設資料也都是。

我寫過一個小腳本，從 html 裡抓 head 裡的 metadata ，
做成 footer 放到 html 裡。

※ 編輯: hijkxyzuw (140.116.102.135), 08/29/2016 12:18:58
→ kyleJ: 推 要把程式邏輯和分開，也不會用html存資料
→ ssccg: 所以你覺得你的轉換程式中的對照表，對網頁來說是content?
→ ssccg: 那還問什麼，就用html啊
因為如果沒有對照表，那這個網頁就等於沒有內容了……；
只剩標題和其它被 css 藏起來的東西。

我認為 html 是一個架構，可以存任何東西。
像 xml 可以存資料， html 也可以。

→ kyleJ: 另外不使用AJAX也還是能用JSON 兩者沒有直接關系
我是考慮到要存成可以離線用，
但一般瀏覽器不給讀本機的 json 檔。
否則就是存成 .js 直接用執行的。

※ 編輯: hijkxyzuw (140.116.102.135), 08/29/2016 14:45:57
→ ssccg: 如果只用在這個網頁，可能可以算是content，但是如果哪天要
→ ssccg: 把這支程式放在別的網頁，很明顯那個表是js程式的data而不
→ ssccg: 是網頁的content
→ ssccg: json格式本身就是合法的js物件，加個var data = 就可以直接
→ ssccg: 當js用，.json只是給輸入只吃json的用，資料格式是沒什麼差
我的想法是， js 的意義是操縱 html 裡的內容，
而不是 *主動產生內容* 。

這個網頁內容是所有常用字的倉頡碼，使用者可以讀。
而 js 會隨機抓出一組給使用者，並核對對錯。

我後來覺得不應該做出 *把字根翻成字的功能* ，
應該只要核對該組輸入正不正確就好了。
宣告那麼大的物件不太好，而且那樣的確該用一個獨立的資料檔。

※ 編輯: hijkxyzuw (140.116.102.135), 09/01/2016 22:53:49
→ ssccg: 好吧應該是我沒看懂你的需求，如果那些字根真的是要顯示出
→ ssccg: 來，當然就直接放html上
→ ssccg: 不過以一般的WebApp來說，我覺得js不只是操縱html裡的內容
→ ssccg: js就是WebApp的程式邏輯，操作html(DOM、view)只是功能之一