Node.js Fullstack 原理與實務 | 誠品線上

Node.js Fullstack 原理與實務

內容簡介

內容簡介 ◎代理經銷 白象文化

作者介紹

作者介紹 ◎ Moko365 技術總監、Flowchain 基金會（新加坡）創辦人，專精於 Embedded Linux、Android Framework 與驅動程式開發，累積超過二十年研發與實務經驗。曾為 Motorola、HTC、LG、OPPO、騰訊、廣達等五十餘家企業提供技術顧問、內訓與課程設計服務，擅長系統架構設計、軟硬整合開發與研發流程管理。2016 年創辦 Flowchain 基金會，推動以 Node.js 為核心的物聯網區塊鏈作業系統，實踐開源實作與跨域整合，並取得多項國際專利。多年來受邀於日本、加拿大、新加坡、斯洛維尼亞等地演講與授課，並多次在 Open Source Summit、OpenIoT Japan、FOSSASIA Summit 等國際會議發表技術演說。其代表性研究《Devify: Decentralized IoT Software Framework》曾於 AIoTAS’17（加拿大）發表，並收錄於 ACM SIGBED Review。Jollen 著有十餘本技術書，涵蓋 Linux、Embedded Linux 與 PHP，具備深厚的技術書寫與教材編撰經驗。近期聚焦於 WebAssembly 與語言模型整合開發，並主筆《Node.js 與 LLM》系列教材。Jollen's Blog：https: jollen.org blog讀者服務：www.jollen.org

產品目錄

產品目錄 ◎第 1 章：JavaScript 設計模式1.1 Object（物件）1.2 宣告 Class1.3 使用 Factory Pattern1.4 Constructor Pattern1.5 Design Pattern for Front-End1.6 Module Pattern1.7 jQuery Pattern1.8 選擇器模式1.9 Prototype Pattern1.10 其它模式第 2 章：HTML5 軟體開發的概念2.1 HTML5 的 Runtime 是瀏覽器2.2 從 Chrome 瀏覽器談起2.3 Web Fullstack 軟體開發的概念2.4 JavaScript 也能開發雲端服務2.5 Data Push 設計模式2.6 Device API 的革命時代2.7 重要的資訊交換格式：JSON2.8 結語：HTML5 是雲端技術第 3 章：Node.js 入門 - URL Routing 篇3.1 Hello, World3.2 製作 Node.js 模組3.3 URL Routing3.4 設計 HTTP API3.5 解析 Query String第 4 章：Node.js 入門 - WebSocket 與 JSON 篇4.1 第一個 WebSocket 伺服器4.2 學習 JSON 格式4.3 製作 WebSocket 用戶端4.4 使用 jQuery 模式4.5 使用 this 物件第 5 章：軟體思惟 - Lambda 篇5.1 Lambda5.2 Callback Function5.3 從 TypeScript 談 Promise5.4 使用 Promise 封裝非同步處理流程5.5 async await：語意同步化5.6 非同步 Node.js 技術演化第 6 章：軟體思惟 - Web Service 篇6.1 再探 HTTP API6.2 REST6.3 REST + JSON 範例第 7 章：軟體思惟 - Non-blocking IO 篇7.1 認識 Non-blocking IO7.2 非同步式讀取多個檔案7.3 深入 Node.js 非同步錯誤處理第 8 章：Node.js 應用 - Express.js 入門8.1 Express.js 初體驗8.2 MVC 與 HTML Template Engine8.3 解析 app.js8.4 Express URL Routing8.5 Middleware 的觀念第 9 章：Express.js 應用 - Middleware9.1 Express Middleware 控制流程9.2 使用 app.use() 撰寫全域 Middleware9.3 常用的 Express.js Middleware第 10 章：REST API 架構 - 使用 Express.js10.1 服務導向架構10.2 關於 SOA 與 3-Tier 架構10.3 Presenetation 在 Client 端10.4 Express.js 與 REST API10.5 Node.js Chat Client10.6 WebSocket 即時推播第 11 章：REST API 應用 - 使用 jQuery11.1 呼叫 REST API - 使用 jQuery11.2 從 Key-Value 對應出發：前端框架的語義演化第 12 章：MVC 架構實作 - Backbone.js 入門12.1 Backbone Way12.2 認識 View.$el12.3 認識 Backbone.Model12.4 認識 Backbone.Model.fetch12.5 認識 Backbone.Model.save第 13 章：NoSQL 資料庫應用 - 使用 MongoDB13.1 關於 MongoDB13.2 安裝 MongoDB 資料庫伺服器13.3 使用 Mongoose Driver：語意模型起點13.4 CRUD 實作：語意資料的最終流轉

商品規格

試閱文字

推薦序 : ◎這本書是為 Node.js 初學者設計的入門教材，也是一份幫助你從零開始、逐步建立實作能力的學習指南。
每個章節都從基本觀念開始，帶你 Step-by-Step 寫出一段完整、能運作的小程式。在閱讀過程中，你會學到：

1. 如何用 Node.js 建立基本的 Web 應用程式
2. 如何用 Express.js 架構 RESTful API
3. 如何整合 HTML5 和前端框架，完成簡單的 Fullstack 架構
4. 如何用 WebSocket 和 JSON 實作即時雙向資料傳輸
5. 如何使用 MongoDB 儲存資料，並結合 Mongoose 建立資料模型

本書採用清楚的步驟式教學，並搭配語意導向的說明，幫助你了解每一段程式碼背後的設計邏輯。本書的理念，不是教你背熟語法，而是讓你具備基礎的程式設計思考力：能夠拆解問題、設計資料流程，並寫出能解決實際需求的應用程式。而是一本實務導向的 Node.js 入門教科書，跟著章節動手做，你會開始習慣查資料、讀官方文件，甚至能理解許多進階開發者的實戰經驗分享。如果你準備開始了，我們就從 console.log(“Hello World”) 開始吧。

試閱文字

自序 : ◎學習程式設程式，不只是學習語法，而是深入思考程式碼運作的情境與意義（「語境」與「語意」）。我們不只是在學習程式語言，而是在訓練思考方式：用語意與語境來建構邏輯。
Node.js 以非同步處理的語境，來實作雲端 API；Node.js 不只是「快速開發雲端 API」的工具，它更結合了 JavaScript 程式語言的藝術，以及 Fullstack 的開發思惟。
本書帶領 Node.js 初學者，從 JavaScript 程式語言，到入門 Node.js的軟體思惟與設計：
• 第 1 章，我們從 函數與設計模式啟程，理解 JavaScript 的語言本
質；
• 第 3 至 4 章，我們實作出一個能跑的 Node.js Web App，開始探索
route()、pathname 與 REST 架構；
• 第 5 章 開 始， 你 會 接 觸 非 同 步 程 式 設 計 的 世 界， 從 callback、
Promise 到 async/await——Node.js 對非步處理邏輯的封裝
• 然後進入 WebSocket、JSON、Express.js、MongoDB 等技術

語法不會讓你變強，思維才會。例如：我們不是在學寫 if/else，而是在引導：「你能不能用語言來設計一段流程？你能不能把一個情境實作出來？」

這本書的寫作宗旨，不在介紹「初學者要記住什麼語法」。對於第一次接觸程式語言的初學者來說，本書也可以做為「踏進程式設計的第一本書」。
當你看到 function() 語法時，不再只是思考怎麼寫才能執行，而是思考它「為什麼存在」；讓我們從 console.log("Hello World") 開始 Node.js 的旅程。

——Jollen

試閱文字

內文 : 第 1 章：JavaScript 設計模式
1.1 Object（物件）
JavaScript 的第一堂課，就是理解「物件生成」這件事。而物件，不只是資料容器，更是程式語意（Semantic）行為的包裝體（物裝封裝程式碼邏輯）。
在 JavaScript 裡，我們可以使用 function 關鍵字宣告一個可重複使用的物件工廠（Object Factory），並搭配 new 來生成具備屬性與方法的物件；另一種更直接的方式，是使用 Object.create() 或「物件實字（Object Literal）」語法。
var person = {
name: "Jollen",
job: "Software Developer",

queryJob: function() {
alert(this.job);
}
};

person.queryJob();
在這段範例中：
person 是一個物件（Object）
name 和 job 是物件的屬性（attribute）
queryJob() 是一個方法（method），透過 this 取得 job 的值
這是典型物件導向語言裡的「語意」、一種觀念：資料（Data）與行為（Behavior）被包裝在同一個結構中。
1.1.1 語意（Semantic）與語境（Context）
寫程式不是在「學語法」，而是「看懂程式在說什麼」。每一段程式碼都不是「只是語法」，它有想表達的「意思」：我們稱它為語意（semantic）。例如，在 JavaScript 顯示字串的語法：
console.log('Error: not enough memory space.')
這段程式碼的「語意」是「在螢幕上顯示 Error: not enough memory space.」，它的「語境」通常會出現在程式遇到「記億體不足」的情況下，來顯示此訊息。
所以，console.log() 是一個語法（函數），它會根據不同的「語境」出現在程式碼。語意（例如：函數）會出現在哪裡、與哪些變數、資料或邏輯有關係，我們稱這些為語境（Context）。
我們常說：「會寫程式」和「懂程式」其實是兩件事。以中文為例：
今天早上天氣很好。
這句話語法沒問題，主詞、時間、謂語都正確。但如果你心裡的真正意圖是：
今天早上天氣很好（心理想：可以出門運動）
這才是語意層次的訊息。也就是說，「語法正確」只是形式，「語意清楚」才是真正的溝通。回到寫程式：寫出 class 來宣告「類別」，語法正確能執行。但你有思考它的意義嗎？
這樣的思考方式，才是真正在學「程式設計」，而不是只學「語法」運用。語法是寫給編譯器看的，語意則是寫給你（開發者）看的。語意清楚，才是說出你要表達的邏輯與設計。這就是學習程式設計的方法：語意導向學習——不是只學會語法，而是學會「思考為什麼要這樣寫」。

1.1.2 語法升級對照（ES6）
將上述範例，改用 ES6 的語法實作，可以更清楚地將資料與方法結構化，以下是等價的語法重構：
const person = {
name: "Jollen",
job: "Software Developer",

queryJob() {
alert(this.job);
}
};

person.queryJob();
差異說明
語法面向 ES5 ES6
宣告變數 var const（不可變）
方法寫法 queryJob: function() {} queryJob() {}
語意與語境 具備 this 語境，但無模組封閉 建議封裝於模組（Module Pattern）中
在第 4 章，我們將看到：物件（Object）不只是資料的容器，更是功能與語境封裝的單位。我們透過 jQuery plugin、WebSocket client，實踐了「以物件操作自身」的結構思維。
回過頭來看這個範例，會發現即便簡單如 person.queryJob()，也蘊含著物件內部語意行為（Semantic Behavior）的綁定與執行語境的切換。
關於 Node.js 的 JavaScript 語法標準，後續 3.6 節再進行詳細說明。
下一節，我們將進一步進入以 function 宣告物件行為的寫法 —— Instantiable Function。

1.2 宣告 Class
同樣地，早期 JavaScript 語言，並沒有類似 Class 這樣的語法（直到 ES6）；所以，在 ES5 中，我們是以 function 關鍵字來實作所謂的「Class」，也就是 Instantiable Function，這種寫法本質上是函數宣告：
function Person(name, job) {
this.name = name;
this.job = job;
this.queryJob = function() {
alert(this.job);
};
}
將 Function 當作類別使用，代表我們也可以使用 new 關鍵字將其實例化（instantiate）成一個物件。
上述函數內部使用 this 來定義屬性與方法。當透過 new 關鍵字呼叫這個函數時，就會生成一個新的物件實例，並綁定到這個 this 上。
這裡使用到 JavaScript 的 function 語法，但它的「語意」不是為了宣告函數，而是在定義類別（class）。這個範例的語意，是在實作「物件導向」的觀念。
以下是一個完整的例子：










在這個例子中，person 是 Person 類別的實例。當執行 person.queryJob() 時，瀏覽器會顯示該工作職稱。

1.2.1 語法升級對照：ES5 vs ES6
JavaScript 自 ES6 起，正式導入了 class 語法，讓語意與封裝更接近物件導向設計。



function 與 class 觀念對照
概念 ES5 語法 ES6 語法
類別宣告 function Person(...) { ... } class Person { constructor(...) }
方法定義 在 constructor 裡手動賦值 直接定義在 class 區塊內
繼承 使用 Object.create() / prototype 使用 extends
this 綁定 需手動保存 var self = this 使用箭頭函數或 class 方法
用「語意」來思考，才是真正在學寫程式，而不是用「語法」來學習寫程式。例如：思考 class 的「意思」與「意義」，而不是「這個語法在做什麼」。
下表整理 class 的語法（Syntax）與語意（Semantic）：
function 與 class 語意對照
問題類型 語法式問題 語意式問題
初學者常問的問題 class 要怎麼宣告？ 為什麼要用 class？什麼時候用比較合適？
技術論壇常見錯誤 constructor 括號錯了 建構邏輯與實例責任是否分離清楚？
專案設計核心思維 function vs class 哪個好？ 是否需要封裝狀態？這個單元是否具備語意自洽性？
對照示例：ES6 寫法
class Person {
constructor(name, job) {
this.name = name;
this.job = job;
}

queryJob() {
alert(`${this.name}'s job is ${this.job}`);
}
}

const person = new Person("Jollen", "Software Developer");
person.queryJob();

1.2.2 進階 Class 繼承：extends / super
ES6 提供了 extends 與 super() 語法，使得繼承變得直覺可用。
以下是 Person 類別的延伸範例：
class Developer extends Person {
constructor(name, job, language) {
super(name, job); // 呼叫父類別的 constructor
this.language = language;
}

introduce() {
console.log(`Hi, I code in ${this.language}`);
}
}

const dev = new Developer("Jollen", "Software Developer", "JavaScript");
dev.queryJob(); // 繼承自 Person
dev.introduce();
這種語法結構，在第 4 章中我們可以用來封裝不同的前端元件行為（例如：WebSocketClient 的繼承擴展），並明確使用 super() 呼叫基礎行為。
this 綁定與原型鏈：從 ES5 到 ES6
在第 3 章與第 4 章的 WebSocket 程式碼裡，我們將會看到 this 綁定與封裝（Closure）帶來的實務挑戰。例如：
this 在 callback 裡會指向錯誤的上下文，因此需使用變數保存 (var self = this)
將函數封裝為 jQuery plugin 時，需將 this 綁定為 DOM 節點，以強化封閉性
這些問題，在 ES6 的 class 與箭頭函數下得以改善：箭頭函數不會綁定自己的 this，會自動指向外層作用域的 this。
本書策略說明：從 ES5 出發，導向 ES6 應用
為了幫助初學者理解 JavaScript 的語意結構與執行脈絡，本書前幾章範例皆採用 ES5 語法做為起點，逐步導入：
模組化（require vs export）
物件導向建構（constructor pattern）
callback / closure 思維
從第 4 章後期開始，將同步提供 ES6 改寫版本，並逐步導入：
class 語法
const / let 替代 var
箭頭函數（Arrow Functions）
模組語法（import / export）
這種階段式過渡的寫作策略，目的在於：讓讀者先理解 JavaScript 的底層語意，再逐步適應新語法帶來的簡潔與強大。
JavaScript 裡生成物件的做法：
使用 var（或 let, const）宣告物件
Instantiable Function（ES5）
class 語法（ES6）

1.3 使用 Factory Pattern
Instantiable Function 可使用 new 關鍵字建立物件，進一步可透過封裝的方式將物件生成過程抽象化。這就是 Factory Pattern 的用途。
Factory Pattern 是一種常見的物件生成設計模式，它在軟體工程領域中用於將物件的建立過程進行封裝抽象化。例如，以下我們將先前的範例改寫成 factory pattern 的實作：
// 不可做為 Constructor Pattern
function personFactory(name, job) {
const o = {};

o.name = name;
o.job = job;
o.queryJob = () => {
alert(`${name}'s job is ${job}`);
};

return o;
}

const person1 = personFactory("Jollen", "Software Developer");
const person2 = personFactory("Paul", "Product Manager");

person2.queryJob();
範例中，person1 和 person2 的物件生成過程被抽象化（封裝）起來。在主程式內，我們看不到 new 關鍵字的使用，而是透過 personFactory() 函數來封裝物件的生成。然而，使用 factory pattern 的缺點在於無法判斷物件原本的 class type，例如：
1 alert(person1 instanceof Object); // true
使用 personFactory() 建立的物件實際上是 Object 的實例。如果需要明確生成 Person 類別的物件，仍建議使用先前介紹的 constructor 模式：
// 可做為 Constructor Pattern
function Person(name, job) {
this.name = name;
this.job = job;
this.queryJob = function() {
alert(this.job);
};
}

// 將 Person() 視為 constructor
const person = new Person("Jollen", "Software Developer");

alert(person instanceof Person); // true
在這個範例中，物件 person 確實為 Person 類別的實例。將函數 Person() 視為 constructor，而非一般函數，能在概念上達到明確判斷 class type 的目的。

最佳賣點

最佳賣點 : ◎ Node.js 初學者設計的入門教材，幫助你從零開始、建立實作能力的學習指南。