作者zoko741235 (台北金城武)
看板Web_Design
標題Re: [請益] 把資料丟在 html 裡還是用 js 處理？
時間Tue Aug 30 15:12:39 2016
※ 引述《hijkxyzuw (i,j,k) ×(x,y,z)》之銘言：
: 最近在做一個倉頡輸入法練習軟體，
: 用 html + css + js 寫的。
: 我想建立一個物件可以依倉頡輸入法輸出字根。
: ( cangJieDecode['hapi'] // 輸出 '的' )
: 可以把倉頡字根對應資料丟在 js 或 html 裡。
: js 的話我的程式會超級長......，所以我沒有，
: 我是認為資料應該和程式分開。
: 但分開就是丟到 html 裡了......。
其實一樣都能寫成 JS
只不過拆成幾個檔案，比如說 data.js、main.js
然後用 <script> 按順序載入
: 一開始是在 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>
我會把資料存在 data.js 裡面，寫法如下
var data = {
'hapi': '的'
};
簡而言之就是存成 object 的 key-value 結構
: // 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);
要抓資料可以寫在負責程式的 main.js (看你要怎麼命名都行)
// 取得輸入
var input = 'HAPI';
// 轉成小寫
var lower = input.toLowerCase();
// 檢查 data 有沒有符合的資料
if (data.hasOwnProperty(lower)) {
console.log(data[lower]);
}
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 134.208.60.23
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1472541162.A.E3A.html
1F：→ hijkxyzuw: 感謝你的回應，但我很好奇，為什麼是大寫啊？ 09/01 22:40
2F：→ zoko741235: 你說var input 嗎? 09/02 08:37
3F：→ zoko741235: 這是我自己假設使用者可能會打開CAPS LOCK 09/02 08:38
4F：→ zoko741235: 所以才透過這個步驟正確地從data抓出需要的資料 09/02 08:38
5F：→ hijkxyzuw: 了解, 使用者輸入到大寫也不會錯. 09/02 09:02