前言

1. 目的：觀察和理解 Middleware 中的：
   (1) app.use、(2) next()、(3) Router 順序，對 request 流向的影響。
2. 方法：建立一組 Router 設定檔(範例)，包含 4 組設定
   (Name代稱[Router])和最終回傳 JSON：
   (1) Kevin [app.use]
   (2) John [POST/me]
   (3) Jimmy [app.use＊]
   (4) Mary [GET/me]
   (5) Final JSON：res.json({answer: req.name})

Express－Using middleware

Express is a routing and middleware web framework that has minimal functionality of its own: An Express application is essentially a series of middleware function calls.

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

…

前言

以範例理解 Currying 觀念和屬於弱型別 JavaScript 的型別強制轉換特性。

Currying

Currying is an advanced technique of working with functions. It’s used not only in JavaScript, but in other languages as well.

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

Currying doesn’t call a function. It just transforms it.

範例 1：

說明：(1) 資料傳遞方式、(2) 參數 x 和 y 值變化

1. 命名 add5 = makeAdder(5)，函式 makeAdder(x)的參數 x，固定代入
   5 後， 繼續執行inner func－return function(y)。
   但 inner func的return function(y) 只有參數 y，沒有 x，所以只會計算 x。
2. 測試 console.log(“add5(0)”,add5(0))：
   可得知函式 add5內的參數為y，得知完整函式和參數 add5(y)。
   // 得出 5+0=5
3. 執行 console.log(“add5(2)”,add5(2))：
   // 得出 5+2=7

範例 2…

前言

Alpha Camp 課程中，依據不同教師，包含約 2–3 種不同 Route 分流寫法。

我選擇對於自己較易理解的寫法，歸納統整成 organizational chart (組織圖)，幫助提點記憶和快速查詢。

express-router 套件 (npm 官網)

express-router is a library for organizing routes of an express application.

express-router lets you write your express routes in a simpler way.
You just have to create a ‘routes’ folder inside your project and place your routes in an index.txt file.

規劃 Route 分流，主要參與對象(檔案)共 4 個：

1. app.js
2. routes [Folder]
   (1) routes/index.js (總路由器)
   (2) routes/routes.js (Full-stack features)
   (3) routes/apis.js (Back-end APIs)

app.js 結構：

更新

5. 重新上傳 Heroku：.env＆FACEBOOK for Developers

前言

佈署 Heroku，以整合第三方 API－Imgur 和切換成 MySQL Database 為例，步驟和指令：

1. 前置作業
   (1) 建立個人 Heroku 帳號
   (2) Heroku CLI：Download and install
2. PostgreSQL ( Heroku 預設 )
3. 整合 Imgur API
4. PostgreSQL 換成 MySQL (ClearDB MySQL)
5. 重新上傳 Heroku：.env＆FACEBOOK for Developers

2. PostgreSQL ( Heroku 預設 )

(1) 安裝套件：node-postgres

(2) 修改 config/config.json 的 production 模式

(3) 建立 git commit

(4) Heroku CLI 初始化

(5) 佈署至 Heroku

(6) Heroku 啟動專案

(7) 建立 Heroku 新資料庫

(8) app.js 修改 Port

(9) 定義啟動腳本 Procfile

(10) 重新 commit，並上傳 Heroku。

(11) 執行 Migration & Seeder

3. 整合 Imgur API

(1) 註冊 Imgur 帳號

(2) 安裝套件：imgur-node-api

(3)…

Also on Strikingly:
https://ryanx94.medium.com/javascript-1-the-this-concept-2-iife-immediately-invoked-function-expression-cceb60252674

更新

新增：

1. 立即函式 IIFE (Immediately Invoked Function Expression)
2. 立即函式 IIFE 對 this 的影響

前言

學習 this 觀念後，後續遇到應用情境，仍似懂非懂，因此歸納統整，儘量明確釐清：(1) this、(2) 前端 Views (MVC Framework)、(3) 物件導向的 Constructor (建構式函式)，3者觀念和實務應用情境。

目前自己實務上，常用操作情境和 this 觀念：

1. 前端 Views (MVC Framework)：
   (1) 使用 this 的 Implicit Binding (隱式綁定)，即 this 自動指向最近(父層)的 Object。
   (2) Controllers 將 Array Data 傳至 Views，Views 搭配 this 指向該 Array，幫助 render 頁面。
2. Design Operational Data API (Object-oriented programming－Constructor)：
   設計 API 時，透過物件導向的 Constructor (建構式函式)產生符合 JSON 的資料格式，另搭配使用 this 的 New Binding (new 關鍵字綁定)。
3. Arrow function (箭頭函式)不適用 this。

this 定義

1. JavaScript 中的 this ，會在調用某個 function 時，「自動」添加到該 function 中。
2. 注意：this 是在 function 執行時才被自動添加在該 function 中，當 function 尚未執行時，無法確定…

Also on Strikingly:
https://site-4828247-981-6937.mystrikingly.com/blog/getting-data-from-request-req

更新

新增 URL (取得 “網址” 內容)：2-3. req.method (取得 HTTP Method)

前言

Express－Request

The req object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on. In this documentation and by convention, the object is always referred to as req (and the HTTP response is res) but its actual name is determined by the parameters to the callback function in which you’re working.

根據常用 req 內容，依來源位置，歸納為 4 類(共5種)：

1. HTML Form (取得 “表單” 內容)：req.body
2. URL (取得 “網址” 內容)：
   2-1. req.query、2-2. req.params、2–3. req.method (取得 HTTP Method)
3. Passport 套件＋資料關聯：req.user
4. Flash Message…

Also on Strikingly:
https://site-4828247-981-6937.mystrikingly.com/blog/javascript-array-related-functions-operators

前言

1. 主要以 3 種方式統整常用陣列相關函數：

(1) 歸納功能類別：目前共12種功能分類
(2) 區分相似函數：如 slice()、splice()
(3) 區分該函數對原陣列影響：標註 改變/不改變 原陣列

2. 之後擴充時，主要新增 3 種情況：

(1) 上述既有架構內，新增其他函數。
(2) 新功能類別：如第13種功能大分類。
(3) 新實務運用：如 [對稱合併 2 陣列] 等實務操作，方便之後快速檢索和組合運用。

一、Array-related Functions

1. 去頭、去尾
2. 加頭、加尾
3. 切出 & 產生新陣列
4. 刪除／ …

Also on Strikingly:
https://site-4828247-981-6937.mystrikingly.com/blog/database-related-knowledge

前言

1. 以 MECE (Mutually Exclusive, Collectively Exhaustive)原則，統整歸納Database 相關知識。
2. 建立 organizational charts(組織架構圖)，作為基礎架構，後續維護時，若學習新知，可持續擴充。

Database 分類架構

Data Structure