---
# System prepended metadata

title: 單字檢測網站 版本紀錄&代辦

---

# 版本紀錄

## 前言
問題就在於這個project大概是從一~兩年前開始實作 問題在於先前的版本有很多我都沒有命名也沒有紀錄 唯一比較像紀錄的可能就是github上面我commit的名稱 我調一下:

![image](https://hackmd.io/_uploads/HJf7zj2pa.png)
### localStorage
    除理暫存問題 根本傑作
### fuck
    應該是做不好很躁
![image](https://hackmd.io/_uploads/B12WMohaT.png)
### sort
    做出平均分配排序與其優化 
    就是不要完全用遞迴然後第一次就取出最大所需範圍的sheet
    不同字母範圍就不用重新要一次表了可以從cache拿
    超棒 但目前還沒解決沒法打亂的問題
### 5552 
    就新增新的單字庫

![image](https://hackmd.io/_uploads/ByZZzonaT.png)
### big update
    我也不確定細項更新啥 應該是當時想新增超多取數方式 好險沒有全做出來
    
### select
    我不知道 待補上

### highlighter/highlight
    應該是只可以點下我不會然後之後統一看不會的
    例:
![image](https://hackmd.io/_uploads/HyuBNjhap.png)

![image](https://hackmd.io/_uploads/By01Mi2aa.png)
    
    這些不是字面上的意思就是我不知道了
目前的情形就是很多都沒細打 所以很多都不清楚在幹嘛
就頂多上面寫下一些有點印象的


## 版本設定
因為之前的都沒有確切的邊版本方法 所以我決定就把之前都當作第一版的各個小版 然後現在就從V2開始

## 版本更新日誌

### V2


---

#### V2
我通常適用手機在通勤時被單字 然後如果我有事把他關掉或手殘滑掉之前看的都不見了 真的很麻煩 然後被單字背到一半就跑去查 發現JS還真的有`localStorage`的東西 然後改了一下決定讓他開始的時候自己去跑onload 用displayWords顯示的時候判斷words的型別(因為localStorage是用key類似字典的方式存的 然後值都是string)這樣就很方便
```javascript=
function displayWords(words = localStorage.getItem('words')) {
    console.log(localStorage.getItem('words'));
    // console.log("test");
    console.log(typeof(words));
    if(words)
    {
      if(typeof(words) === 'string')//有暫存
      {
        words=JSON.parse(words);
      }
      var outputDiv = document.getElementById("outputDiv");
      console.log(outputDiv);
      var content = "<h2>抽到的單字：</h2><p>點擊單字切換成音標 再點一次切換回單字</p><table>";
      for (var i = 0; i < words.length; i++) {
          content += "<tr><td class=\"ranking\"><p>"+(i+1)+".</p></td>";
          content += "<td><p class=\"pronouncing-switch\" data-value=\""+words[i][2].replace(/'/g, '&apos;')+"\">" + words[i][0] + "</p></td>";
          content += "<td><input type=\"button\" onclick=\"high_light(this) \" value=\"我不會\"></td>";
          content += "<td><input type=\"button\" onclick=\"showChinese(this,\'"+ words[i][1] + "\' ) \" value=\"顯示中文\"></td></tr>";
      }
      content += "</table>";
      content += "<input type=\"button\" id=\"copyBtn\" value=\"複製單字到剪貼簿\">";
      content += "<input type=\"button\" onclick=\"toggleRowVisibility(this)\" value=\"只出現不會的字\"></input>";
      outputDiv.innerHTML = content;
      switch_col_one();
      document.getElementById('copyBtn').addEventListener('click', function() {
          // 在這裡使用 this
          create_alphabat_content();
          this.value = "已複製完成!";
      });
      localStorage.setItem('words',JSON.stringify(words))
    
    }
    else
    {
      console.log("no temp!");
    }
}
```
重點就在預設這個funciton的parameters讓他可以有多種判斷方式
好處是我不需要再創一個新的function 壞處是有點雜亂


---

#### V2.1
在搭公車的時候想到我如果點我不會highlight 那我的localStorage就沒有存到

所以就管他作文還沒寫就開始改

* 第一個當然是把localSotrage加上一欄 但我記得我之前偷懶所以好像GAS那邊高出範圍外的沒有管 
* 所以就用了
`var resultArray = data.result.map(row=>row.concat(0));`
解釋起來就是逐列後面在加一個{0}的陣列
* 在處理點擊按鈕的時候highlight的時候要同時修改陣列
```javascript=
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName('td');

/* highlight部分*/

line = Number(cells[0].children[0].textContent);
//處理loocalstorage
var temp=JSON.parse(localStorage.getItem('words'))
console.log("temp:"+temp)
temp[line-1][temp[line-1].length-1]=temp[line-1][temp[line-1].length-1] ? 0 : 1;
localStorage.setItem('words',JSON.stringify(temp));
console.log(localStorage.getItem('words'));
```
* 修改display 就是老方法繼續拆開越來越又臭又長
```javascript=
content += "<tr ";
if(words[i][words[i].length-1])//這個字使用者不會
{
content += " style=\"color:rgb(255, 0, 255);\" ";
}
content += "><td class=\"ranking\"><p>"+(i+1)+".</p></td>";
content += "<td ";
if(words[i][words[i].length-1])//這個字使用者不會
{
content += " style=\"color:\'#00FF00\';\" ";
}
content += "><p class=\"pronouncing-switch\" data-value=\""+words[i][2].replace(/'/g, '&apos;')+"\">" + words[i][0] + "</p></td>";

```

雖然看起來很簡單但其實不知道為何搞很久

#### V2.2

補上之前忘記把中文按鈕也存到localStorage
大同小異懶得打了 反正順序放錯差點把自己搞瘋
