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的辦法，供大家參考。

LeetCode 實作解說系列-Longest Common Prefix

Sun, 19 Jun 2022 00:00:00 +0000

題目解說

原題目

Write a function to find the longest common prefix string amongst an array of strings.

If there is no common prefix, return an empty string "".

Example 1:

1
2

Input: strs = ["flower","flow","flight"]
Output: "fl"

Example 2:

1
2
3

Input: strs = ["dog","racecar","car"]
Output: ""
Explanation: There is no common prefix among the input strings.

Constraints:

1 <= strs.length <= 200
0 <= strs[i].length <= 200
strs[i] consists of only lowercase English letters.

翻譯

給定一個陣列strs，裡面會有字串，找出此陣列字串相同的前綴，如果沒有，返回""。

解題策略

邏輯上是後面的字串去跟前面的做比較就好，所以聲明字串pre，一開始就宣告為陣列的第一個元素，如果比對不到，就將pre刪掉一個字符，刪到比對出相同前綴為止。

JS程式碼

var longestCommonPrefix = function(strs) {
   if(strs == null || strs.length == 0) return "";
   let pre =strs[0]
   console.log(strs.length)
   for(let i =1;i<strs.length;i++){
       while(strs[i].indexOf(pre) != 0){
           pre=pre.substring(0, pre.length - 1);
       }
   }
    return pre;
};

LeetCode 實作解說系列-Roman to Integer

Sun, 19 Jun 2022 00:00:00 +0000

題目解說

原題目

Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M.

Symbol       Value
I             1
V             5
X             10
L             50
C             100
D             500
M             1000

For example, 2 is written as II in Roman numeral, just two ones added together. 12 is written as XII, which is simply X + II. The number 27 is written as XXVII, which is XX + V + II.

Roman numerals are usually written largest to smallest from left to right. However, the numeral for four is not IIII. Instead, the number four is written as IV. Because the one is before the five we subtract it making four. The same principle applies to the number nine, which is written as IX. There are six instances where subtraction is used:

I can be placed before V (5) and X (10) to make 4 and 9.
X can be placed before L (50) and C (100) to make 40 and 90.
C can be placed before D (500) and M (1000) to make 400 and 900.

Given a roman numeral, convert it to an integer.

Example 1:

1
2
3

Input: s = "III"
Output: 3
Explanation: III = 3.

Example 2:

1
2
3

Input: s = "LVIII"
Output: 58
Explanation: L = 50, V= 5, III = 3.

Example 3:

1
2
3

Input: s = "MCMXCIV"
Output: 1994
Explanation: M = 1000, CM = 900, XC = 90 and IV = 4.

Constraints:

1 <= s.length <= 15
s contains only the characters ('I', 'V', 'X', 'L', 'C', 'D', 'M').
It is guaranteed that s is a valid roman numeral in the range [1, 3999].

翻譯

這題主要是在說羅馬數字的計算方式，並告知('I', 'V', 'X', 'L', 'C', 'D', 'M') 分別等於數字多少，且 4 不是 IIII 而是 VI ，以此類推應用到 9,40,90,400,900。

解題策略

解題邏輯是讓每個字母等於一個數字，再用 object ={key:value} 的方式加總就好，首先要處理的就是 4,9,40,90,400,900 ，我宣告的 object 把 'IV':4,'IX':9,'XL':40,'XC':90,'CD':400,'CM':900 用一個字母取代掉 'f':4,'n':9,'l':40,'c':90,'d':400,'m':900，接著是做字串s的文字取代 s.replace('IV','f').replace('IX','n').replace('XL','l').replace('XC','c').replace('CD','d').replace('CM','m')，最後利用迴圈加上 charAt()就可以逐一取值並加總。

JS程式碼

var romanToInt = function(s) {
    //'IV':4,'IX':9,'XL':40,'XC':90,'CD':400,'CM':900
    const obj  ={'I':1,'V':5,'X':10,'L':50,'C':100,'D':500,'M':1000,'f':4,'n':9,'l':40,'c':90,'d':400,'m':900};
    let new_s = s.replace('IV','f').replace('IX','n').replace('XL','l').replace('XC','c').replace('CD','d').replace('CM','m')
    let sum = 0
    for(let i = 1;i<=new_s.length;i++){
       sum = sum + obj[new_s.charAt(i-1)]
    }
    return sum;
};

About Me

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

Hi, I’m Yen. 今年24歲，畢業於國立高雄海洋科技大學資訊管理系，大學時因為專題碰到Vue.js，開啟了我對coding的興趣，曾以Vue.js + Firebase 開發課程互動軟體（現在想起來真是超前部署XD），榮獲第24屆全國大專院校資訊應用服務創新競賽資訊應用組第9名，後來步入社會並沒有走向coding這條路，但熱情未減，這裡會記載我所有實作筆記。

My GitHub Here.

LeetCode 實作解說系列-Palindrome Number

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

題目解說

原題目

Given an integer x, return true if x is palindrome integer.

An integer is a palindrome when it reads the same backward as forward.

For example, 121 is a palindrome while 123 is not.

Example 1:

1
2
3

Input: x = 121
Output: true
Explanation: 121 reads as 121 from left to right and from right to left

Example 2:

1
2
3

Input: x = -121
Output: false
Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.

Example 3:

1
2
3

Input: x = 10
Output: false
Explanation: Reads 01 from right to left. Therefore it is not a palindrome.

Constraints:

-231 <= x <= 231 - 1

翻譯

給定一個整數x，回傳x是不是個相反數。舉例來說121相反為121，回傳true，-121相反為121-，回傳false。

解題策略

將x轉為字串xstr，再將xstr利用reverse函數做字序的反轉，最後將x與xstr做一般相等比較。

JS程式碼

var isPalindrome = function(x) {
    let xstr = x.toString().split("").reverse().join("")
    console.log(xstr)
    if(x==xstr){
        return true;
    }
    else{
        return false;
    }
};

LeetCode 實作解說系列-Two Sum

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

題目解說

原題目

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order.

翻譯

給一個整數陣列nums以及一個整數target，回傳出兩個整數相加等於target在nums裡面的索引值，每個數不能被重複使用，而且只會有一個解。

Example 1:

1
2
3

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].

Example 2:

1
2

Input: nums = [3,2,4], target = 6
Output: [1,2]

Example 3:

1
2

Input: nums = [3,3], target = 6
Output: [0,1]

Constraints:

2 <= nums.length <= 104
-109 <= nums[i] <= 109
-109 <= target <= 109
Only one valid answer exists.

解題策略

跑過整個陣列後必定能找到兩兩相加為target的值，用雙層迴圈跑完陣列中的所有數並兩兩相加，方得解答。

JS程式碼

var twoSum = function(nums, target) {
    for(let i = 0;i<nums.length-1;i++){
        let x = nums[i];
        for(let j = i+1;j<nums.length;j++)
            {
            let  y = nums[j];
            if(x+y===target){
                return [i,j]
            }
            }
 
    }
};

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

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

Links

Mon, 01 Jan 0001 00:00:00 +0000

To use this feature, add links section to frontmatter.

This page’s frontmatter:

links:
  - title: GitHub
    description: GitHub is the world's largest software development platform.
    website: https://github.com
    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
  - title: TypeScript
    description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
    website: https://www.typescriptlang.org
    image: ts-logo-128.jpg

image field accepts both local and external images.

Search

Mon, 01 Jan 0001 00:00:00 +0000

Yen's 實作筆記

使用ESLint提高程式碼品質

ESLint可以做什麼？

再搭配現在流行的 style guide：

在專案中引入ESLint套件

配置方法

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

LeetCode 實作解說系列-Longest Common Prefix

題目解說

原題目

翻譯

解題策略

JS程式碼

LeetCode 實作解說系列-Roman to Integer

題目解說

原題目

翻譯

解題策略

JS程式碼

About Me

LeetCode 實作解說系列-Palindrome Number

題目解說

原題目

翻譯

解題策略

JS程式碼

LeetCode 實作解說系列-Two Sum

題目解說

原題目

翻譯

解題策略

JS程式碼

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

說明

程式碼

GitHub Link

Try in CodePen

Archives

Links

Search