前端技術雜談

發表於 | 分類於 | |

之前專案遇到可以談論的主題會先寫在日誌上
這樣部落格沒有靈感的話就可以直接取用 ʕ•̀ ω • ʔ
但有些想談論的主題沒有很深
無法單獨寫成一篇文章 ┑(￣ Д ￣)┍

所以想說可以用雜談的方式來聊：

  • URL search 搜索字符串的常見參數與用途
  • .gitignore 忽略已追蹤過的檔案
  • 傳統開發使用 polyfill 來模擬 ES6+ 的環境
  • CRA 專案預設的 eslint 規則

URL search 搜索字符串的常見參數與用途

首先附上 MDN 的文件介紹
還有它提供的代碼範例：

1
2
3
4
var url = new URL(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/search?q=123"
);
var queryString = url.search; // Returns:"?q=123"

URL search 是一個很方便且靈活的工具
很常被用來控制檢索畫面時的顯示訊息
基本上在各個大型網頁都會出現

所以設計網頁應用的過程
也可以多留意使用這個技巧

底下列舉一些常用的參數與用途：

參數描述示例
modal控制是否在模態框中打開搜索結果。?modal=true 或 ?modal=false
page控制顯示的分頁。?page=2
q指定搜索的關鍵詞或查詢字符串。?q=keyword
sort指定搜索結果的排序方式。?sort=date
lang指定搜索結果的語言。?lang=en
date限制搜索結果在特定日期範圍內。?date=2023-01-01..2023-07-31

.gitignore 忽略已追蹤過的檔案

.gitignore 基本上就是用來記錄不要加入版控的檔案
這個 .gitignore 通常會在專案搭建的一開始就定義好

不過處理專案的實務上
還是會遇到
噎…這個檔案不應該加在版控裡面呀
但是它已經被追縱過了
所以當你在.gitignore 新增已經追縱過的檔案時
就沒有作用了

解決方法可以用git rm -r --cached .
來把本地緩存的紀錄給刪除
這樣再提交就沒問題了

傳統開發使用 polyfill 來模擬 ES6+ 的環境

基本上現代專案開發都使用框架來搭建專案
一般來說可以不用自己去處理 webpack 和 babel 等腳手架設定
只需要專注在前端程式的開發就好

但有些簡單的畫面可能已經有設計人員切好版
你只需要直接撰寫程式即可

這種情況下
基於兼顧瀏覽器的相容性
你可以使用 jQuery 或是 ES5 來撰寫

另一種方式是可以引入 @babel/polyfill

1
2
3
<script src="
https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js
"></script>

這個版本的@babel/polyfill 可以模擬 ES6+ ~ ES10(ES2019)的環境
註：@babel/polyfill 包含 core-js v2.x 和 regenerator-runtime

但上網查在 Babel 某個版本之後 @babel/polyfill 已經被棄用了
而改用 core-js v3 和 regenerator-runtime 來進行一些更細部的操作和避免過去全局污染的潛在問題

1
2
<script src="https://cdn.jsdelivr.net/npm/core-js@3.20.1/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.js"></script>

這邊附註一下 core-js 與 regenerator-runtime 說明的參考資料：

特點core-jsregenerator-runtime
目的用於填充 ECMAScript 功能的庫用於異步生成器的運行時庫
兼容性提供新的 ECMAScript API專注於生成器/轉譯器需求
使用通常用於所有 JavaScript 代碼通常與 async/await 一起使用
填充範圍涵蓋廣泛的新功能專門針對生成器函數
大小由於填充範圍更廣，所以較大由於專注於特定用途，所以較小
異步/等待不直接處理異步代碼處理異步生成器函數
生成器支持不提供生成器功能增強異步生成器性能
導入方式根據需要導入各個功能作為整體導入，用於生成器功能
自定義性提供選項以包括特定功能自定義選項有限

CRA 專案預設的 eslint 規則

如果你是用 create-react-app 來搭建專案
基本上專案裡頭就已經包含了 eslist 的設定
而這個預設的規則就是 react-app
可以在 package.json 裡面看到：

1
2
3
"eslintConfig": {
  "extends": "react-app"
},

但是如果想搭配 VS code 的 ESLint 插件來檢查語法
可能會用eslint --init來創建設定檔
不過在裡頭的 react 相關配置中沒有 react-app
只有 eslint:recommended 和 plugin:react/recommended

如果還是想用 CRA 預設的 eslint 規則可修改 .eslintrc.js:

1
2
// extends: ["eslint:recommended", "plugin:react/recommended"],
extends: ["react-app"],

底下附註這幾項規則的參考資料：

特點react-appeslint:recommendedplugin:react/recommended
規則來源專為 React 項目設計ESLint 官方推薦規則React 插件官方推薦規則
覆蓋範圍針對 React 相關規則一般的 JavaScript 規則React 特定規則
JSX 規則包含 JSX 相關規則無包含 JSX 相關規則
異步渲染支持不包含異步渲染規則無不包含異步渲染規則
類型檢查支持不包含 TypeScript/Flow 等類型檢查規則無不包含類型檢查規則
特定框架功能檢查檢查特定的 React 功能和最佳實踐基本的 JavaScript 代碼質量檢查檢查特定的 React 功能和最佳實踐
自定義性有限，適用於大多數 Create React App 項目可以根據項目需求進行配置可以根據項目需求進行配置
適用場景Create React App 項目中建議使用通用 JavaScript 項目中建議使用React 項目中建議使用

本文作者： David Huang
本文地址： https://davidblog.github.io/2023/08/08/前端專案技術雜談/

0%