第1篇基礎篇

第1章大前端發展趨勢

1.1大前端的發展過程

1.2Node.js引領JavaScript進入全棧時代

1.3小程序、輕應用開啟前端新模式

1.4Flutter引領跨平臺開發

1.5華為ArkUI探索物聯網全場景開發

1.6大前端的革命與未來

第2章ECMAScript 6

2.1ECMAScript 6介紹

2.2Babel轉碼器

2.3let和const

2.4解構賦值

2.5字符串的擴展

2.5.1字符串新增方法

2.5.2字符串模板

2.6數組的擴展

2.6.1擴展運算符

2.6.2Array.from()

2.6.3Array.of()

2.6.4Array.find() 和 Array.findIndex()

2.6.5Array.includes()

2.6.6Array.copyWithin()

2.6.7Array.entries().keys().values()

2.6.8Array.fill()

2.6.9flat()、flatMap()

2.7對像的擴展

2.7.1對像字面量

2.7.2屬性名表達式

2.7.3super關鍵字

2.7.4對像的擴展運算符

2.8Symbol

2.9Set和Map數據結構

2.9.1Map對像

2.9.2Set 對像

2.10Proxy

2.11Reflect

2.11.1Reflect()靜態方法

2.11.2Reflect與Proxy組合使用

2.12異步編程

2.12.1Promise

2.12.2Generator

2.12.3async/await

2.13類的用法

2.13.1類的定義

2.13.2類的構造函數與實例

2.13.3類的屬性和方法

2.13.4類的繼承

2.14模塊化Module

2.14.1ECMAScript 6的模塊化特點

2.14.2模塊化開發的優缺點

2.14.3模塊的定義

2.14.4模塊的導出

2.14.5模塊的導入

第3章前端構建工具

3.1前端構建工具介紹

3.1.1為什麼需要構建工具

3.1.2構建工具的功能需求

3.1.3前端構建工具演變

3.1.4NPM與Yarn、PNPM

3.2Webpack

3.2.1Webpack介紹

3.2.2Webpack安裝與配置

3.2.3Webpack基礎

3.2.4Webpack進階

3.3Rollup

3.3.1Rollup介紹

3.3.2Rollup安裝與配置

3.3.3Rollup基礎

3.4ESBuild

3.5Vite

3.5.1Vite介紹

3.5.2Vite基本使用

3.5.3Vite原理

第4章TypeScript

4.1TypeScript介紹

4.2TypeScript安裝與配置

4.3TypeScript基礎數據類型

4.4TypeScript高級數據類型

4.4.1泛型

4.4.2交叉類型

4.4.3聯合類型

4.5TypeScript面向對像特性

4.5.1類

4.5.2接口

4.6TypeScript裝飾器

4.6.1屬性裝飾器

4.6.2方法裝飾器

4.6.3參數裝飾器

4.6.4類裝飾器

4.7TypeScript模塊與命名空間

4.7.1模塊

4.7.2命名空間

第5章Dart語言

5.1Dart語言介紹

5.2安裝與配置

5.3第1個Dart程序

5.4變量與常量

5.5內置類型

5.6函數

5.7運算符

5.8分支與循環

5.9異常處理

5.10面向對像編程

5.10.1類與對像

5.10.2類的繼承

5.10.3抽像類

5.10.4多態

5.10.5隱式接口

5.10.6擴展類

5.11泛型

5.12異步支持

5.12.1Future對像

5.12.2async函數與await表達式

5.13庫和庫包

5.13.1庫

5.13.2自定義庫包

5.13.3繫統庫

5.13.4第三方庫

第6章包管理與腳手架

6.1MonoRepo包管理

6.1.1單倉與多倉庫管理

6.1.2Lerna包管理工具介紹

6.1.3Lerna包組織結構

6.1.4Lerna安裝與配置

6.1.5Lerna操作流程演示

6.1.6Yarn Workspace

6.1.7Yarn Workspace與Lerna

6.2設計一個企業級腳手架工具

6.2.1腳手架作用

6.2.2常見的腳手架工具

6.2.3腳手架思路

6.2.4第三方依賴介紹

6.2.5腳手架架構圖

6.2.6創建腳手架工程與測試發布

6.2.7腳手架命令行開發

第2篇Vue 3框架篇

第7章Vue 3語法基礎

7.1Vue 3框架介紹

7.1.1Vue 3框架核心思想

7.1.2Vue 3框架的新特征

7.2Vue 3開發環境搭建

7.2.1Visual Code安裝與配置

7.2.2安裝Vue DevTools

7.2.3編寫第1個Vue 3程序

7.3Vue 3項目搭建方法

7.3.1手動搭建Vue 3項目

7.3.2通過腳手架工具搭建Vue 3項目

7.3.3Vue 3項目目錄結構

7.4Vue 3應用創建

7.4.1createApp()方法

7.4.2數據屬性和方法

7.4.3計算屬性和監聽器

7.4.4模板和render()函數

7.5Vue 3模板語法

7.5.1插值表達式

7.5.2什麼是指令

7.5.3數據綁定指令

7.5.4class與style綁定

7.5.5條件指令

7.5.6循環指令

7.5.7事件綁定指令

7.5.8表單綁定指令

7.5.9案例： 省市區多級聯動效果

7.6Vue 3組件開發

7.6.1組件定義

7.6.2組件的命名規則

7.6.3組件的結構

7.6.4組件的接口屬性

7.6.5組件的生命周期方法

7.6.6組件的插槽

7.6.7提供/注入模式

7.6.8動態組件與異步組件

7.6.9混入

7.7響應性API

7.7.1setup()

7.7.2ref()

7.7.3reactive()

7.7.4toRef

7.7.5toRefs()

7.7.6computed()

7.7.7watch()

7.7.8watchEffect

7.7.9setup()生命周期函數

7.7.10單頁面組件

7.7.11Provide與Inject

7.8Vue 3過渡和動畫

7.8.1過渡與動畫

7.8.2Transition和TransitionGroup組件

7.8.3進入過渡與離開過渡

7.8.4案例： 飛到購物車動畫

7.9Vue 3復用與組合

7.9.1自定義指令

7.9.2Teleport

7.9.3插件

7.10Vue 3路由

7.10.1路由入門

7.10.2路由參數傳遞

7.10.3嵌套模式路由

7.10.4命名視圖

7.10.5路由守衛

7.10.6數據獲取

7.11Vue 3狀態管理(Vuex)

7.11.1狀態管理模式

7.11.2Vuex和全局變量的概念區別

7.11.3Vuex中的5個重要屬性

7.11.4Vuex開發入門基礎

7.11.5Vuex開發實踐

7.11.6Vuex中組合式API的用法

7.12Vue 3狀態管理(Pinia)

7.12.1Pinia與Vuex寫法比較

7.12.2Pinia安裝和集成

7.12.3Pinia核心概念

第8章Vue 3進階原理

8.1Vue 3源碼安裝編譯與調試

8.1.1Vue 3源碼包介紹

8.1.2Vue 3源碼下載與編譯

8.2Vue 3響應式數據繫統核心原理

8.2.1reactivity模塊介紹

8.2.2reactivity模塊使用

8.2.3reactive實現原理

8.2.4依賴收集與派發更新

8.2.5Vue 3響應式原理總結

8.3Vue 2 Diff算法(雙端Diff算法)

8.3.1雙端Diff算法原理

8.3.2非理性狀態的處理方式

8.4Vue 3 Diff算法(快速Diff算法)

第9章Vue 3組件庫開發實戰

9.1如何設計一個組件庫

9.1.1組件庫設計方法論

9.1.2組件庫的設計原則

9.1.3組件庫開發的技術選型

9.1.4組件框架樣式主題設計

9.2搭建組件庫項目

9.2.1搭建MonoRepo項目結構

9.2.2搭建基礎組件庫(packages/vueui3)

9.2.3搭建主題樣式項目

9.3組件庫詳細設計

9.3.1Icon圖標組件

9.3.2Button組件

9.4搭建Playgrounds項目

9.4.1創建Playgrounds項目

9.4.2測試Playgrounds項目

9.5組件庫發布與集成

9.5.1添加publishConfig配置

9.5.2設置發布包的文件或者目錄

9.5.3提交代碼到Git倉庫

9.5.4使用Commitizen規範的commit message

9.5.5使用Lint Husky規範的commit message

9.5.6使用Lerna生成changelogs

9.5.7將庫發布到npmjs網站

第3篇React框架篇

第10章React語法基礎

10.1框架介紹

10.1.1React框架由來

10.1.2React框架特點

10.2開發準備

10.2.1手動搭建React項目

10.2.2通過腳手架工具搭建React項目

10.2.3安裝React調試工具

10.3JSX與虛擬DOM

10.3.1JSX語法介紹

10.3.2React.createElement和虛擬DOM

10.3.3事件處理

10.3.4條件渲染

10.3.5列表與Key

1素渲染

10.4.1客戶端渲染

10.4.2服務器端渲染

10.5組件

10.5.1Re素與組件的區別

10.5.2創建組件

10.5.3組件的輸入接口

10.5.4組件的狀態

10.5.5組件中函數處理

10.5.6組件的生命周期

10.5.7組件的引用

10.6組件設計與優化

10.6.1高階組件

10.6.2Context模式

10.6.3Component 與PureComponent

10.6.4React.memo

10.6.5組件懶加載

10.6.6Portals

10.7React Hook

10.7.1React Hook介紹

10.7.2useState()

10.7.3useEffect()

10.7.4useLayoutEffect()

10.7.5useRef()

10.7.6useCallback()與useMemo()

10.7.7useContext()

10.7.8useReducer()

10.7.9自定義Hook

10.8路由(React Router)

10.8.1安裝React Router

10.8.2兩種模式的路由

10.8.3簡單路由

10.8.4嵌套模式路由

10.8.5路由參數

10.8.6編程式路由導航

10.8.7多個Routes/

10.9狀態管理(Redux)

10.9.1Redux介紹

10.9.2Redux基本用法

10.9.3Redux核心對像

10.9.4Redux中間件介紹

10.9.5Redux中間件(reduxthunk)

10.9.6Redux中間件(reduxsaga)

10.9.7Redux Toolkit簡化Redux代碼

10.10狀態管理(Recoil)

10.10.1Recoil介紹

10.10.2Recoil核心概念

10.10.3Recoil核心API

10.11React移動端開發(React Native)

10.11.1React Native優點

10.11.2React Native安裝與配置

第11章React進階原理

11.1React源碼調試

11.1.1React源碼下載與編譯

11.1.2React源碼包介紹

11.2React架構原理

11.2.1React 15版架構 

11.2.2React 16版架構 

11.2.3React Scheduler實現

第12章React組件庫開發實戰

12.1React組件庫設計準備

12.1.1組件庫設計基本目標

12.1.2組件庫技術選型

12.2搭建React組件庫(MonoRepo)

12.2.1初始化Lerna項目

12.2.2創建React組件庫(Package)

12.2.3創建一個Button組件

12.2.4使用Rollup進行組件庫打包

12.3創建Playgrounds

12.4通過Jest搭建組件庫測試

12.4.1安裝配置測試框架

12.4.2編寫組件測試代碼

12.4.3測試

12.5使用Storybook搭建組件文檔

12.6將組件庫發布到NPM

第4篇Flutter 2框架篇

第13章Flutter語法基礎

13.1Flutter介紹

13.2開發環境搭建

13.2.1Windows安裝配置Flutter SDK

13.2.2macOS安裝配置Flutter SDK

13.2.3配置VS Code開發Flutter

13.3第1個Flutter應用

13.3.1創建Flutter App項目

13.3.2編寫Flutter App界面

13.3.3添加交互邏輯

13.4組件

13.5包管理

13.5.1pubspec.yaml文件

13.5.2通過pub倉庫管理包

13.5.3以其他方式管理包

13.6資源管理

13.6.1圖片資源管理

13.6.2多像素密度的圖片管理

13.6.3字體資源的聲明

13.6.4原生平臺的資源設置

13.7組件設計風格

13.7.1Material(Android)風格組件

13.7.2Cupertino(iOS)風格組件

13.8尺寸單位與適配

13.9基礎組件

13.9.1基礎組件介紹

13.9.2構建布局

13.9.3列表與可滾動組件

13.9.4表單組件

13.10路由管理

13.10.1路由的基礎用法

13.10.2路由傳值

13.10.3命名路由

13.10.4路由攔截

13.10.5嵌套模式路由

13.11事件處理與通知

13.11.1原始指針事件

13.11.2手勢識別

13.11.3全局事件總線

13.11.4事件通知

13.12網絡

13.12.1HttpClient

13.12.2HTTP庫

13.12.3Dio庫

13.12.4WebSocket

13.12.5Isolate

13.13狀態管理

13.13.1InheritedWidget

13.13.2scoped_model

13.14Stream與BLoC模式

13.14.1Stream

13.14.2RxDart

13.14.3BLoC模式

第14章Flutter Web和桌面應用

14.1Flutter Web介紹

14.1.1Flutter Web框架架構

14.1.2Flutter Web的兩種編譯器

14.1.3Flutter Web支持的兩種渲染模式

14.1.4創建一個Flutter Web項目

14.2Flutter Desktop介紹

14.3Flutter Desktop開發案例

第15章Flutter插件庫開發實戰

15.1Flutter插件庫開發介紹

15.2Flutter自定義組件庫的3種方式

15.3Flutter自定義插件(Plugin)

15.4在Pub上發布自己的Package

隨著Web技術的迅猛發展，以Electron、ReactNative、ArkUI等為代表的新的混合式開發模式日趨成為與Qt、Android、iOS原生開發並肩的開發模式之一。隨著WebVR、WebAR、WebAssembly等一繫列技術的日趨成熟，原本前端之間的隔閡會逐漸消失，逐步進入大前端開發的時代。
近幾年，隨著新硬件和新商業模式的興起，傳統的前端技術得到了新的應用和發展空間，特別是以HTML5和新一代JavaScript語言為代表的大前端技術正在滲透到技術的各個環節，這也對前端工程師提出了新的要求並帶來了新的機遇。
HTML5和新一代JavaScript語言以其自身的廣泛適配性和良好的運行效率已經不簡單地隻作為網頁開發專用技術了，它們可以很好地和其他底層語言進行調用和連接，已經可以廣泛適用於萬物互聯的場景應用開發。如華為公司在2021年推出了自己的下一代物聯網操作繫統(HarmonyOS)後，推出了自己的操作繫統應用開發框架ArkUI，該框架就是基於JavaScript語言實現的一套跨終端的應用開發框架，它通過前端的JavaScript語言與底層的C 語言進行相互高效調用，實現了一套代碼多端運行的目標。
2021年，全球社交平臺Facebook正式更名為Meta，該名字源自Metaverse，中文宇宙，意思是新型社會體繫的數字生活宇宙是整合多種新技術產生的下一代三維化的互聯網應用形態。它基於擴展現實技術和數字孿生技術實現從現實到虛擬的空間拓展； 借助人工智能和物聯網實現虛擬人、自然人和機器人的融合共生； 借助區塊鏈、Web 3.0、數字藏品/NFT等實現經濟價值的增值。
這一新的模式必將帶來重大的技術突破和新技術的宇宙時代的大前端開發將是一個突破傳統前端局限而面向一體化的時代。
在新模式、新技術和新硬件的加持下，大前端未來可能進入下一個領域—&mda宇宙前端。可以看到目前WebVR、WebAR、WebGL等新的Web視覺和Web 3D技術正在興起，未來必定成為前端的主流技術。

本書特色

本書通過介紹目前廣為流行的三大前端框架及生態體繫，帶領讀者全面掌握從移動互聯應用開發到萬物互聯應用開發技術和實戰技巧。本書共4篇15章，由淺入深，帶領讀者從學習移動互聯開發(Vue、React)框架入手再到物聯網開發(Flutter)框架開發。本書第1篇先從大前端主流開發語言(ECMAScript 6、TypeScript、Dart)講起，在基礎篇中全面介紹大前端打包構建流程及工程化體繫。再從基礎、原理和實戰的三個緯度出發全面介紹Vue、React、Flutter三大框架的基礎語法、實現原理、源碼編譯、核心算法及企業級組件庫項目搭建。本書提供了大量的代碼示例，讀者可以通過這些例子理解知識點，也可以直接在開發實戰中稍加修改而應用這些代碼。另外，提供了書中所有案例所涉及的源碼，以便於讀者高效地學習。

本書內容

本書4篇15章的主要內容如下：
第1篇，開發基礎篇(第1~6章)。第1章介紹大前端的發展過程和發展趨勢； 第2章介紹ECMAScript 6語法及用法； 第3章介紹前端構建工具，詳細介紹Webpack、Rollup、ESBuild和Vite的原理及使用； 第4章介紹TypeScript的語法及用法； 第5章介紹Dart的語法及用法； 第6章介紹MonoRepo管理模式及如何設計一個企業級腳手架工具。
第2篇，Vue 3框架篇(第7~9章)。第7章全面介紹Vue 3框架語法和使用； 第8章介紹Vue 3框架原理、Vue 3源碼下載和編譯、Vue 3的雙向數據綁定和Vue 3 Diff算法原理； 第9章介紹如何構建一個基於Vue 3的組件庫。
第3篇，React框架篇(第10~12章)。第10章介紹React框架語法和使用； 第11章介紹React框架原理、React源碼下載和源碼測試； 第12章介紹如何構建一個基於React的組件庫。

第4篇，Flutter 2框架篇(第13~15章)。第13章介紹Flutter 2的語法和使用； 第14章介紹Flutter Web和桌面應用開發； 第15章介紹Flutter插件庫開發與發布。

本書讀者對像

學習本書內容需要具備一定的HTML、CSS、JS基礎知識，本書可以作為前端開發者提升技能的工具書，也可以作為前端開發者搭建企業級前端產品體繫的參考書，還可以作為普通開發者從網頁開發過渡到萬物互聯開發的參考書。懇請讀者批評指正。

致謝
感謝清華大學出版社趙佳霓編輯在寫作本書過程中提出的寶貴意見，以及我的家人在寫作過程中提供的支持與幫助。

徐禮文2022年8月

本書源碼下載