前端實作 on Yen's 實作筆記

使用ESLint提高程式碼品質

Mon, 08 Aug 2022 00:00:00 +0000

ESLint可以做什麼？

檢查出語法錯誤：變數未經宣告、function未經定義、括號不成對等等

將code格式化：如何縮排、單引號或雙引號、分號、space及tab的大小等等

刪除多餘的程式碼：提醒刪除import但沒有使用的模組、空的function、變數宣告但未使用等等

確保遵循最佳實踐：使用嚴格相等 === 而非 ==

再搭配現在流行的 style guide：

透過以上兩種工具的結合，可以確保自己的程式碼與團隊遵循的規則相符，

一旦通過ESLint的代碼檢查，表示程式碼品質在一定的水準內。

在專案中引入ESLint套件

以下將會解說如何將vscode內的延伸模組Prettier與ESLint + Airbnb style guide做結合，

目標是禁用ESLint的格式規則，因為我們只需要用他來檢查語法錯誤，

並用Prettier格式化程式碼。

在開始之前，記得要先安裝 npm 及 npx。

配置方法

下載VScode的 ESLint 及 Prettier 延伸模組
在我們的專案根目錄中安裝 ESLint 及 Prettier 套件

npm install -D eslint prettier
安裝 Airbnb style guide

npx install-peerdeps --dev eslint-config-airbnb
安裝 eslint-config-prettier（禁用ESLint格式化）

npm install --save-dev eslint-config-prettier

安裝 eslint-plugin-prettier（允許ESLint在我們寫程式時顯示格式錯誤）

1
2

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

在專案根目錄建立檔案 .eslintrc ，內容如下：

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

最後，在vscode內設定格式化的工具為Prettier就好了，

設定的方式，可以在撰寫程式碼的地方，按右鍵»格式化文件，

這時候vscode會跳出你要選擇什麼延伸模組去格式化，

在這邊選擇 Prettier 即可。

前端實作系列-在React Project內串接第三方API

Mon, 20 Jun 2022 00:00:00 +0000

很多時候我們會需要去串接第三方API，而我的習慣是，在真正去project call api之前，會用postman先測試過，那天心血來潮去試著call 政府的 open data ，用的是

全國街道路名: https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035 的api，

在postman的結果，很正常，

於是我在我的React Project寫下fetch

1
2

  fetch("https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035")
  .then((res) => console.log(res))

結果出現了錯誤訊息，上面寫的要在我們發送請求時加上 mode:'no-cors'

於是我加上了

  fetch("https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035",{
  mode:'no-cors'
  })
  .then((res) => console.log(res))

But!!!!!人生就是這個BUT!!!!!!!

可以看到我的 Response 裡面有個 type ='opaque'，關於這個錯誤大家可以上網查查，簡單來說，這是一個不透明的 response，我們是無法去取得裡面的資料，所以 body 裏面是 null，事實證明 mode='no-cors' 並不會讓事情成功的執行，

我也有試過什麼setupProxy，依舊無法取得我想要的資料，

就在想要放棄之際，我看到了一個東西，

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en

這是google chrome的一個插件，可以允許跨域請求，

我將他安裝在我的瀏覽器，並按下左下角的toggle on ，

然後回到我的程式碼，將 mode:'no-cors' 拿掉，再去到開發者工具看看這次回傳什麼，

可以看到我的 Response type 已經是 cors，但body依舊怪怪的？沒有我要的data，

接著我利用插件的 Test Cors來檢查我的瀏覽器到底可以接受怎樣的跨域請求，

可以看到我的fetch通通都是被拒絕的，但是，XMLHttpRequest的 GET & POST都是被允許的，

於是我將我的 fetch 改成 axios，因為axios的請求格式就是 XMLHttpRequest，

1
2

  axios.get("https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035")
  .then((res) => console.log(res))

讓我們再回到開發者工具看看，

這次成功的回傳了api所提供的data!!!!!

以上就是我在react project 直接去串接第三方api的辦法，供大家參考。

前端實作系列-上傳圖片並預覽

Sat, 18 Jun 2022 00:00:00 +0000

很多前端工程師一定會使用到的功能：圖片上傳，並將圖片預覽在網頁畫面上，其實做法非常簡單

說明

利用 input type='file' 去取讓使用者選取要上傳的圖片
利用 button onClick() 觸發預覽圖片的funtion fileUp()
利用 FileReader() 讀出file資料
利用 readAsDataURL 產生出當下可用的URL供渲染網頁使用

程式碼

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h3>實作檔案上傳預覽</h3>
  <input id="file1" type="file" accept="image/*" />
  <button id="btn1" onclick="fileUp()">預覽檔案</button>
  <p id="demo"></p>
  <div>
    <img id="img1" width="50%" />
  </div>
</body>

<style type="text/css">
  body {
    font-family: system-ui;
    background: #b3d9d9;
    color: white;
    text-align: center;
  }
</style>

<script>
  function fileUp() {
    const file = document.getElementById("file1").files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = document.getElementById("img1");
      img.setAttribute("src", e.target.result);
      document.getElementById("demo").innerHTML = file.name;
    };
    reader.readAsDataURL(file);
  }
</script>

GitHub Link

https://github.com/Yen-An/JS-

Try in CodePen

https://codepen.io/yen-an/pen/poaGRRb