第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中間件(reduxthunk)
10.9.6Redux中間件(reduxsaga)
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