Life × Ex × Code

常常聽到 GMT 和 UTC 這兩個時間，但是確不了解它們兩個的差異，所以紀錄個文章成為筆記。

mac 寫 code 的人必裝套件，紀錄此相關用法

信相前端工程師在切版下過一點功夫的人，一定都聽過 tailwind css ，但不一定有聽過 windicss ，這兩個東西都被稱作是下一個世代的 css ，今天來比較兩個的差異。

本文章不會說明太多的寫法，只會針對差別來作一個比較

Git 可以說是比寫 code 還要重要的東西，現在的專案基本上都要共同協作，所以如何避免衝突，不在開發的時候發生災難，可以說是非常的重要，寫 code 寫不好可以問人，但 Git 不行的話可能連工作都沒有辦法一起 co-work 。

另外如果對 vim 還沒有很熟的話建議去多了解一下 vim 的編輯、儲存、查尋方式，對你在使用 git 上會更加的得心應手。

有些專案由於年代久遠，所以沒有辦法使用現在的 LTS 的版本，所以透過 nvm 來切換 node 的版本，以利開發速度

Mac OS 系統目錄介紹

max os 屬於類 unix 的系統，所以他會有一些 unix 系統的目錄風格。

網上對類 unix 系統的一些解釋

類 Unix 系統（英文：Unix-like）是指繼承 UNIX 的設計風格演變出來的系統（比如 GNU/Linux、FreeBSD、OpenBSD、SUN 公司的 Solaris、Minix、QNX 等），這些作業系統雖然有的是自由軟體，有的是商業軟體，但都相當程度地繼承了原始 UNIX 的特性，有許多相似處，並且都在一定程度上遵守 POSIX 規範，但是它們卻並不含有 UNIX 的原始碼。目前 UNIX 的原始碼為 SCO 公司所有，屬於商業軟體，UNIX 的商標權和 UNIX 標準認定屬於 OPENGROUP 所有。由於 UNIX 標準認定價格昂貴，所以目前唯一獲得 UNIX 標準認定的為蘋果的 MACOS 系統。

install

1

$ npm install axios

起手式

快速暴力的先使用了在說

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import axios from "axios";

axios.defaults.baseURL = [YOUR_DOMAIN];

axios.interceptors.request.use(
  (request) => {
    return request;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axios;

建立專案

專案結構

MVC（Model–view–controller）為軟體工程中的一種軟體架構模式。它由三個部分所形成：

Model

主要用來處理資料的邏輯及資料庫的部分。只要是與資料相關的事情，都會交由它處理。

View (api 不處理這一塊)

將 Model 的資料透過 View 來呈現給使用者。

Controller

藉由使用者的行為來控管及觸發特定的事件，並指示該事件所對應的 Model 來進行處理。

自定義的 Express MVC

若使用 Express 的快速建置開發環境的專案，是還沒有做到職責分離的動作，我們可以試著將controller及model加入其中，其運作會是：

draw.io

資料結構就會變成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.
├── app.js
├── bin
│   └── www
├── controllers
│   ├── index_controller.js
├── models
│   ├── index_model.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

vscode 打 api 套件 ⇒ Thunder Client

為什麼 node 不能用 import export

模塊化編程在 js 界流行，也是基於此，隨後在瀏覽器端，requirejs 和 seajs 之類的工具包也出現了，可以說在對應規範下，require 統治了 ES6 之前的所有模塊化編程，即使現在，在 ES6 module 被完全實現之前，還是這樣。
ES6 標準發布後，module 成為標準，標準的使用是以 export 指令導出接口，以 import 引入模塊。
但因為一些歷史原因，雖然 Node.js 已經實現了 99%的 ES6 新特性，採用的卻是 CommonJS 規範，使用 require 引入模塊，使用 module.exports 導出接口。

什麼是 Babel

在前一篇文章中，我們談到如何安裝 Node.js 本身，本文則介紹如何安裝 Babel。

Babel 是 JavaScript 轉譯器，可將 ES6+ 程式碼轉為等效的 ES5 程式碼，我們在撰寫程式時就可以使用新的語法特性來改善程式碼的品質，而不用刻意守在舊有的手法。在實際執行 JavaScript 程式時，則會以普遍受到支援的 ES5 來執行，不用考慮 ES6 實作不夠完整的議題。

或許再過幾年，瀏覽器充份支援 ES6 的特性，那麼 Babel 專案就可以功成身退。但我們的專案並沒有白費，因為我們原本就是用 JavaScript 來寫程式，只是在版本間做了些轉換。

node 为什么不支持 import？

https://opensourcedoc.com/javascript-programming/babel/

參考文章

Node.js-Backend 見聞錄(10)：關於後端觀念(六)-關於 MVC - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

https://kusakawazeusu.medium.com/%E7%94%A8-typescript-%E5%AF%AB-express-route-%E8%88%87-controller-%E7%AF%87-40db4850a8f2