信阅平台

编辑推荐

★阮一峰、张云龙等资深前端专家力荐

★涉及面广，适合用来了解和巩固前端开发技术全景

★与国内开发实践紧密结合，贴近国内开发者的需求

★还原了JavaScript在技术生态中“上下左右”所发挥作用

★系统地介绍了前端开发工作中需要的技能及工具

★从环境搭建、代码管理、Web流行趋势到后端开发调试

★作者将多年丰富的前端开发经验都总结到本书中

★可以提升工程师的视野扩展和技术应用格局

★避免弯路，直接踏上“康庄大道”

★快速进入“全端”的境界

展开

作者简介

朱德龙

多年web开发经验，熟悉前后端开发以及Docker容器技术，喜欢前端，热爱JavaScript。

“开发者头条”top10专栏作者。

“慕课网”认证作者、精英讲师。

2次担任w3ctech长沙分享会主讲嘉宾。

中科院人才中心评审委员会认证软件工程师。

CNCF认证CKA。

展开

内容介绍

本书讲述了开发者使用JavaScript在各种Web开发场景下所需要掌握的重点知识和概念。从zui基础的开发工具讲起，再到开发思维方式和前端页面开发，然后扩展到小程序开发和开发工具的混合应用，再讲解前后端交互zui常用的网络协议及API设计，zui后讲解了使用Node.js开发服务器端应用程序所需要掌握的核心概念。

全书以数据链为线索，对重要概念进行精练的分析和对比，从而帮助读者更好地理解和记忆。本书既包括知识技能，又包括设计思想，“道”与“术”并重，让读者“知行合一”，既能“坐而论道”，也能“起而行之”。

本书适合初级和中级前端开发者用来提升技术水平与视野，建立较为完备的开发技能和可迁移的学习能力，帮助读者拥有全端的技术和全局的视野，成为“了不起的JavaScript工程师”。

展开

精彩书评

本书的涉及面较广，前端开发需要了解的各种技术基本上都提到了，包括目前方兴未艾的TypeScript、GraphQL、Docker等，适合用来了解和巩固前端开发的技术全景。另外，本书的一个优点是与国内的开发实践结合较紧密，贴近国内开发者的需求，尤其重视对小程序开发的讲解。

——阮一峰《ES6标准入门》作者，资深IT技术专家、布道师

近年来前端的技术栈越来越宽，不断有新的技术吸引着我们的注意力，而在这些技术里面，JavaScript扮演着非常关键的角色。本书帮我们还原了JavaScript在目前的互联网技术生态中“上下左右”所发挥的作用，特别是相关应用领域的介绍，对于一个工程师的视野扩展和技术应用格局的提升很有帮助。

Scott 慕课网精英讲师，Moveha前CTO，宋小菜前端负责人，阿里前高级工程师

要想成为一名优秀的前端工程师，需要涉猎诸多技术知识，掌握大量的工程经验，以至于在前端领域工作近10年的我，时至今日仍然觉得自己是一个小学生。本书系统地介绍了前端开发工作中需要的技能及工具，很适合前端人员拓宽视野、丰富自己的工具箱，成为了不起的JavaScript工程师。

——张云龙知乎JavaScript话题优秀回答者，全民TV前CTO，阿里、百度前技术专家

在现代的前后端开发中，JavaScript可以帮你串联一切。本书从开发环境搭建、代码管理、Web流行趋势到后端开发调试，带你快速进入“全端”的境界。

——Fundon 真名蔡芳敦，StuQ讲师，自由职业者

本书以JavaScript为核心详细介绍了Web开发、小程序开发、Node.js开发等方面的知识，轻松易懂、讲解透彻。作者将多年丰富的前端开发经验总结到本书中，可帮助读者避免弯路，直接踏上“康庄大道”。

——王伟华长沙梯度信息科技有限公司CEO兼创始人

本书内容非常接地气，覆盖了JavaScript开发目前主要的热点领域，汇聚了作者在JavaScript开发工作中积累的深厚经验。全书逻辑和语言清晰精准。书中的高层思考和深度见解，对于JavaScript工程师“功力”的提升大有裨益。

——李根人和未来生物科技（长沙）有限公司大数据部技术总监，天河计算机核心研发人员

JavaScript作为一种编程语言，在本书中展现了它的魅力。随着作者深入浅出的讲解，你会像置身于飞鸟之上，俯瞰到一个真实而又奇幻的代码国度。希望你和我一样，将这本书作为学习实践JavaScript道路上的伙伴和向导。

——许森禄中兴新云前端UI经理

展开

精彩书摘

　　第6章 JavaScript的几个趋势
　　ES6和ES7版本的发布，给JavaScript带来很大的变化。同时随着主流框架Angular、Vue和TypeScript的互相支持（Angular默认使用TypeScript编写，vue-cli模板增加了对TypeScript的支持，TypeScript支持React的JSX语法），使得TypeScript成了最热的JavaScript胶水语言。
　　TypeScript不是ECMA国际提出的语言标准，而是微软公司的开源项目，微软为JavaScript语言贡献了两个宝贵的东西，一个是RxJS库，另一个就是TypeScript胶水语言。之所以称之为胶水语言，是因为其不能直接在Node.js和浏览器端运行，而需要通过编译器（TypeScript compiler）编译成JavaScript后才能被执行。它不仅支持ES6和ES7，而且还对它们进行了扩展，是它们的超集（称它为ES8也不为过）。
　　这一章我们先给出结论然后再展开分析。结合TypeScript（以下未作说明的都是2.6版本）的流行以及ES6、ES7的推出，JavaScript的发展出现了以下趋势。
　　? 静态化。首先是数据类型静态化。TypeScript支持了数据类型的校验，避免一个变量被赋值多种数据类型而引起混乱。然后可以通过接口对函数的入参、返回值以及变量的数据结构进行自定义和校验。其次模块引用也是静态化的，还同时支持解构等操作，使得模块可以被部分编译加载。
　　? 工程化。模块与命名空间的引用结束了浏览器端JavaScript长期没有统一模块管理的局面，从而可以更好地支持大型项目开发。
　　? 靠拢后端语言。借鉴了其他热门后端语言的特性，比如Python中的装饰器、匿名函数，Java中的类。
　　? 前后端统一。模块管理机制是为浏览器端和Node.js端设计使用，对全局对象的统一处理，都是在为JavaScript的同构铺平道路。
　　接下来我们将从具体变化开始详细分析。
　　6.1　接口与数据类型
　　如果要用一个词形容JavaScript，那么就是——自由，这种自由包括变量的自由和函数的自由。变量的自由指的是它的弱类型特性，你可以不用关心变量的数据类型而随意赋值，甚至可以不用声明直接使用（在浏览器端）。函数的自由指的是函数可以作为参数来传递。而往往太多的自由便成了“放纵”。
　　首先是弱类型带来的维护性难题，看下面这段代码：
　　function handle(param) {
　　//此处省略100行代码
　　}
　　假设现在有一个共用函数叫handle，你需要调用它，那么问题来了，param参数到底是什么数据类型，该怎么传参给handle函数呢？此时你不得不通读函数代码或者进行搜索查看param的数据类型。更糟糕的是如果handle函数中调用了其他函数，要层层递进查找将变得更加困难。比如：
　　function handle(param) {
　　//此处省略100行代码
　　funA(param.a);
　　funB(param.b);
　　//...
　　funN(param.n);
　　}
　　这种问题不仅存在于函数的入参上，函数的返回值无法声明数据类型，也使得可维护性降低。比如下面这段代码中出现多个return，每个return都可以返回不同的数据类型：
　　function handle(param) {
　　//...
　　if(condistionA) {
　　//...
　　return numberA
　　} else {
　　if (conditionB) {
　　// ...
　　return stirngB
　　}
　　// ...
　　return objectC
　　}
　　}
　　习惯比较好的开发者可能会留下一些注释来描述函数的参数，但谁也无法保证这些注释是和函数本身同步更新的，所以很容易出现注释和代码不一致的情况。
　　数据类型校验的问题不仅出现在函数上，同时也存在于变量中，一个变量被多次赋值成不同的数据类型和多次引用也非常容易引发问题，而且这种问题只能在运行时才能发现。
　　其次是传递函数带来的著名问题——回调地狱，例如下面这段代码：
　　a(function(resultFromA) {
　　// ...
　　b(resultFromA, function(resultFromB) {
　　// ...
　　c(resultFromB, function(resultFromC) {
　　// ...
　　d(resultFromC, function(resultFromD){
　　// ...
　　});
　　});
　　});
　　});
　　这样的代码无论是可读性还是可调试性都会带来很大的挑战。
　　这一节我们利用TypeScript提供的静态类型校验功能来解决第一个问题。
　　对于简单的数据类型，我们可以直接在定义变量时声明数据类型，比如：
　　let isDone: boolean = false;
　　如果后面的代码在非法使用isDone变量或者对isDone赋予非布尔值时都会报错：
　　let result = 1 / isDone; // The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
　　isDone = 0; // Type '0' is not assignable to type 'boolean'.
　　对于复杂的数据类型，我们可以通过定义接口来描述数据结构：
　　interface ifc {
　　a: string;
　　b?: number;
　　readonly c: boolean;
　　}
　　let abc: ifc;
　　这段代码表明a、b、c变量符合IFC接口规范，其中a为字符串数据，b为可选的数值类型，c为只读的布尔类型，当然还支持索引、类等复杂的类型，这里就不一一举例了。这样给开发者带来的好处就是不必去查找关于a、b、c变量的代码即可知道它拥有哪些属性，当然这通常要配合开发工具的插件实现，可能的结果如图6-1所示。
　　6.2　更好的异步解决方案
　　前面提到了回调地狱的问题，JavaScript采用回调函数的形式主要源于它的一些异步操作，比如AJAX发送请求、DOM事件等，所以说回调函数的问题本质上就是异步的问题。而在ES5中有很多解决方案来优化异步的操作，比如第三方库q、jQuery中的Deferred对象、AngularJS中的$q服务等，虽然各有差异，但是它们大多都遵循或参考了Promises/A+规范。
　　简言之，Promise/A+规范规定了由一个带有返回then函数的promise对象或函数来处理异步情况。一个promise有3种状态：pending（执行中）、fulfilled（执行成功）、rejected（执行失败），而then函数可以传入两个函数作为参数，第一个函数在执行成功时调用，第二个在失败时调用。它们的参数分别通过resolve（成功时执行）和reject（失败时执行）传入（详细文档：https://promisesaplus.com/）。
　　……

展开

第1章开发环境 1
1．1　代码编写工具 2
1．1．1　IDE 2
1．1．2　编辑器 3
1．1．3　最佳选择 3
1．2　Docker容器 5
1．2．1　Docker概述 5
1．2．2　Docker重要概念 6
1．2．3　Docker使用场景 11
1．2．4　Docker扩展 15
1．3　代码管理 15
1．3．1　什么是代码仓库 16
1．3．2　版本管理的意义 16
1．3．3　版本管理的常用操作 16
1．3．4　分支管理的意义 17
1．3．5　分支管理的常用操作 17
1．3．6　分支管理流程 18
1．4　其他软件 23
1．4．1　文件夹管理软件 23
1．4．2　快速搜索工具 24
1．4．3　终端管理软件 25
1．4．4　Chrome中的插件 25
1．5　硬件提升 26
1．5．1　提升程序运行速度 26
1．5．2　减少程序切换时间 27
1．6　小结 28
第2章 Web页面与多页应用 29
2．1　Web页面的运行环境――浏览器 29
2．1．1　渲染引擎 30
2．1．2　JavaScript引擎 38
2．1．3　数据持久层 40
2．2　HTML 41
2．3　模板 42
2．3．1　模板的意义 42
2．3．2　常用模板分类 42
2．3．3　模板的重要功能 42
2．4　CSS盒模型 45
2．5　CSS 46
2．6　CSS布局 47
2．6．1　普通文档流 47
2．6．2　浮动 57
2．6．3　定位 61
2．6．4　弹性盒模型 62
2．7　CSS预处理 68
2．7．1　预处理的意义 68
2．7．2　预处理的重要功能 69
2．7．3　样式文件规划 72
2．7．4　样式类命名 73
2．8　JavaScript 77
2．8．1　实现功能逻辑 77
2．8．2　操作页面或浏览器 78
2．8．3　进行网络通信 79
2．8．4　第三方JavaScript库――jQuery 84
2．8．5　JavaScript简史 84
2．9　自动化构建工具 85
2．9．1　自动化构建工具的作用 85
2．9．2　常用的自动化构建工具 85
2．10　小结 86
第3章高效编写/组织代码的心法 87
3．1　拆分方式 89
3．1．1　按文件类型拆分 89
3．1．2　按功能类型拆分 90
3．1．3　按关注点拆分 90
3．2　抽象原则 91
3．2．1　第一原则：DRY 91
3．2．2　第二原则：YAGNI 92
3．2．3　第三原则：The Rule of Three 93
3．3　不止于代码 94
3．4　小结 94
第4章模块 96
4．1　模块的意义 96
4．2　ECMAScript 5中的模块 96
4．2．1　立即执行函数表达式（Immediately-Invoked Function Expression） 97
4．2．2　显式模块声明 97
4．2．3　异步模块定义 98
4．2．4　共同模块定义 99
4．2．5　CommonJS 100
4．2．6　通用模块定义 101
4．3　ECMAScript 6中的模块 102
4．4　模块打包工具 103
4．5　小结 107
第5章单页应用（SPA） 108
5．1　框架 109
5．2　视图与数据 110
5．2．1　双向数据绑定 111
5．2．2　单向数据流 115
5．3　路由 116
5．3．1　hash 116
5．3．2　history 117
5．4　组件 119
5．4．1　原生组件 119
5．4．2　第三方组件 121
5．5　小结 123
第6章 JavaScript的几个趋势 124
6．1　接口与数据类型 125
6．2　更好的异步解决方案 127
6．3　面向对象与类 132
6．3．1　封装 132
6．3．2　继承 134
6．3．3　多态 135
6．4　模块化 138
6．5　小结 141
第7章小程序概述 142
7．1　常见的App 142
7．2　JavaScript开发者的一双翅膀 143
7．3　小程序的发展 144
7．4　小结 144
第8章小程序与Web页面 145
8．1　WXML 145
8．1．1　WXML与HTML的相同之处 145
8．1．2　WXML与HTML的不同之处 146
8．2　WXSS 149
8．2．1　WXSS与CSS的相同点 149
8．2．2　WXSS与CSS的不同点 149
8．3　JavaScript与WXS 155
8．4　JSON 155
8．4．1　app．json 155
8．4．2　project．config．json 156
8．4．3　page．json 157
8．4．4　component．json 158
8．5　小结 158

第9章小程序与单页应用 159
9．1　路由 159
9．1．1　路由配置 159
9．1．2　路由跳转 160
9．1．3　路由监听 161
9．2　组件 162
9．2．1　组件与页面 162
9．2．2　小程序组件与单页应用组件 164
9．3　web-view 165
9．3．1　作用 165
9．3．2　交互 165
9．4　小结 165
第10章小程序的框架与插件 166
10．1　RxWX 166
10．2　WePY 168
10．3　mpvue 171
10．4　Taro 171
10．5　小结 171
第11章小程序的开发工具与发布 173
11．1　开发者工具组成 173
11．1．1　模拟器 174
11．1．2　调试器 174
11．1．3　编辑器 176
11．1．4　其他功能 176
11．2　发布流程 177
11．2．1　小程序的版本 177
11．2．2　用户身份与权限 178
11．3　小结 178
第12章其他混合应用简介 180
12．1　流应用 180
12．2　桌面应用 181
12．3　小结 182
第13章 HTTP协议与Web网站 183
13．1　HTTP的历史 183
13．2　HTTP的通信方式 183
13．3　HTTP的状态 184
13．4　小结 184
第14章 HTTP协议内容 185
14．1　请求行/状态行 186
14．1．1　URL 186
14．1．2　请求方法 188
14．1．3　状态码/状态信息 188
14．2　头部 192
14．2．1　通用头部字段 192
14．2．2　请求头部字段 194
14．2．3　响应头部字段 196
14．2．4　主体头部字段 196
14．2．5　其他头部字段 197
14．3　主体 198
14．4　Cookie 199
14．4．1　Cookie的分类 199
14．4．2　Cookie的使用 199
14．4．3　Cookie的缺陷 200
14．4．4　Cookie与存储 201
14．5　Cookie与状态 204
14．5．1　状态存储 205
14．5．2　状态获取 207
14．5．3　基于token的认证方式更好 207
14．6　小结 208
第15章 HTTP请求优化 209
15．1　减少连接/请求数 209
15．1．1　减少请求 209
15．1．2　减少连接 210
15．2　缓存数据 210
15．3　减少传输数据量 210
15．4　优化网络链路 210
15．4．1　减少域名 211
15．4．2　使用CDN 211
15．5　小结 211
第16章 HTTP/2协议 212
16．1　多路复用 212
16．2　压缩 214
16．3　支持TLS 215
16．4　应用层协议协商 215
16．5　服务器端推送 215
16．6　流控制 216
16．7　小结 216
第17章 HTTPS协议 217
17．1　HTTP的缺点 217
17．1．1　通信使用明文 217
17．1．2　不验证通信方身份 218
17．1．3　无法证明报文的完整性 218
17．2　理解HTTPS 219
17．2．1 HTTPS通信流程 219
17．2．2 密码学基础 221
17．2．3 摘要与签名 221
17．2．4 X．509与证书 222
17．3　小结 223
第18章 WebSocket协议 224
18．1　WebSocket与HTTP 224
18．2　WebSocket的使用 224
18．2．1　客户端 225
18．2．2　服务器端 226
18．3　小结 227
第19章 API 228
19．1　REST 228
19．1．1　REST API设计 228
19．1．2　REST API工具 230
19．2　GraphQL 231
19．2．1　GraphQL设计 232
19．2．2　GraphQL工具 234
19．3　小结 235
第20章 Node．js概述 237
20．1　为什么要学习Node．js 237
20．2　什么是Node．js 238
20．3　Node．js的历史 239
20．4　Node．js的结构 240
20．5　Node．js的运行机制 241
20．5．1　单线程 241
20．5．2　事件循环 242
20．6　学习Node．js的三个挑战 244
20．6．1　I/O回调 244
20．6．2　代码性能 244
20．6．3　多进程协作 245
20．7　小结 245
第21章用Node．js编写Web服务器端 246
21．1　处理请求 246
21．1．1　创建服务器端 246
21．1．2　解析请求 247
21．2　响应结果 250
21．2．1　状态信息 250
21．2．2　响应头部 251
21．2．3　响应主体 251
21．3　路由解析 253
21．4　I/O操作 260
21．4．1　文件 260
21．4．2　数据库 264
21．4．3　网络请求 267
21．5　Web框架 270
21．5．1　Express 271
21．5．2　Koa 271
21．6　小结 271
第22章 Node．js内存控制 273
22．1　内存限制 273
22．2　内存管理 276
22．2．1　内存分配 276
22．2．2　内存回收 276
22．3　内存泄漏 277
22．3．1　缓存 277
22．3．2　不断增长的数组 279
22．3．3　重复的事件监听 279
22．4　大内存处理 281
22．5　小结 283
第23章 Node．js多进程 284
23．1　PM2模块 284
23．1．1　安装与使用 285
23．1．2　进程通信 286
23．1．3　进程管理 287
23．2　cluster模块 290
23．2．1　基本使用 291
23．2．2　进程通信 294
23．2．3　进程管理 294
23．3　child_process模块 298
23．3．1　基本使用 298
23．3．2　进程通信 298
23．3．3　进程管理 302
23．4　worker_threads模块 303
23．4．1　基本使用 303
23．4．2　线程通信 304
23．4．3　线程管理 305
23．5　小结 306
第24章 Node．js调试与测试 307
24．1　开发工具 307
24．2　调试工具 307
24．2．1　debug模块 308
24．2．2　Node Inspector 309
24．3　单元测试 312
24．3．1　单元测试的意义 312
24．3．2　单元测试代码编写原则 312
24．3．3　测试框架 314
24．3．4　测试风格 316
24．3．5　测试指标 317
24．4　小结 319

展开