前端开发核心知识进阶:从夯实基础到突破瓶颈
  • 推荐0
  • 收藏3
  • 浏览3.2K

前端开发核心知识进阶:从夯实基础到突破瓶颈

侯策 (作者) 

  • 书  号:978-7-121-38934-4
  • 出版日期:2020-10-24
  • 页  数:600
  • 开  本:16(185*235)
  • 出版状态:上市销售
  • 维护人:孙奇俏
纸质版 ¥139.00
本书共分8部分,涵盖33个主题,内容涉及JavaScript基础强化、JavaScript语言进阶、不可忽视的HTML和CSS、前端框架、前端工程化、性能优化、编程思维和算法、网络知识等,聚焦前端开发基础知识和进阶技能,关注前端工程化和体系化,结构清晰,循序渐进,深入浅出。
在重构基础知识方面,本书将标准规范和实践代码相结合。在培养进阶技能方面,本书深度剖析了技术背后的原理和哲学。书中列举的项目设计案例涵盖了许多经典面试题目,不仅能帮助初级开发者夯实基础,还能为中、高级开发者突破瓶颈提供帮助和启发。
前端知识从基础到进阶全面覆盖,大厂面试真题花样解法揭秘,圈内众多大咖给予赞誉!
侯策,曾先后就职于法国ENGIE集团、百度等国内外知名互联网企业,具有丰富的开发经验和团队管理经验。曾担任GIAC全球互联网架构大会演讲嘉宾,FDCon2019中国前端开发者千人峰会演讲嘉宾。著有《React状态管理与同构实战》一书。
前 言
如何突破前端开发技术瓶颈

日本作家村上春树写过一本富有哲理的书——《当我谈跑步时我谈些什么》。
在书中,他谈到,跑步跟写作一样,都需要坚毅隐忍,追逐超越;都需要心无杂念,持之以恒。全书落笔之处,没有浮华旖旎,而是将迷惘、失败和挣扎娓娓道来。
这本书名义上是在谈跑步,实际却是作者在个人创作低潮时期对突破进行的不断思考。仔细想来,这样的思考对于一位工程师也至关重要。
前端领域,入门相对简单,可是想要“更上一层楼”却难上加难,市场上的高级/资深前端工程师凤毛麟角。这当然未必是坏事,一旦突破瓶颈,在技能上脱颖而出,便能拥有更广阔的空间。那么,如何从夯实基础到突破瓶颈呢?
接下来我们就来讨论一下,当前端工程师需要进阶时,应该学些什么。
说到进阶,我想先谈一谈我们每个人内心的焦虑和迷茫,正视这种情绪是学习的第一步。对于每一个追求进步的人来说,瓶颈期总会在各个阶段“如约而至”。早在战国时期,庄子在《庖丁解牛》中就说:“吾生也有涯,而知也无涯。以有涯随无涯,殆已!已而为知者,殆而已矣!”
而如今,在这个信息爆炸的时代,信息量呈几何级数增长,知识似乎唾手可得。那么该学什么,到底该怎么学,学完之后又该做什么?大部分人都会在知识面前焦虑、迷茫。
同样,具有一定工作经验的工程师也面临着很多疑虑。
? 该如何避免相似的工作做了5年,却没能具备5年的工作经验?
? 该如何从繁杂而千篇一律的业务需求中提炼技术点并提高?
? 该如何为团队带来更大的价值,体现经验和能力?
这些疑虑对前端工程师来说貌似来得更加猛烈:前端技术发展备受瞩目,前端工程师变得越发重要的背后是相关技术的不断进步和更新迭代。因此,我们比以往任何时候都更需要主动学习。但据我观察,目前网络上的学习资料往往存在以下两个问题。
? 过于碎片化,这类知识在某种程度上只能成为缓解焦虑的“精神鸦片”。
? 追求短平快,大牛经验、快速搞定“面经题目”等内容渐渐演变成跳槽加薪的“兴奋剂”。
技术进阶是一个系统、曲折的过程。每个学习者所接触的知识内容和其背后的原理构成了他的思维方式。短期速成的内容或大量碎片化的知识很难帮助我们进行深度思考。坦白来说,我也是这些“学习资料”的搜集者,如果没有系统且有针对性的学习和反复刻意的练习,那么结果就是,以为收藏的是知识,其实收藏的是“知道”;以为掌握了知识,其实只是囤积了一堆“知道”。
我想把自己在海外和BAT工作多年积累的经验分享给大家,也想把长时间以来收藏的“干货”梳理一遍,系统整理输出,和大家一起提高。因此,《前端开发核心知识进阶:从夯实基础到突破瓶颈》这本书就诞生了。
爱因斯坦说过:“只是学习他人的智慧并不足够,你需要自己想明白才行。花时间记录、通盘考虑和深入思考你学到的东西。”
海伦?凯勒说过:“知识使人进步,而智慧使人得道。”
希望本书不仅详述了“知识”,更能体现编程“智慧”,让所有读者朋友一起思考,一起进步。
本书特色
说到本书特色,我想一边聊聊前端开发的发展,一边说说本书的聚焦点。
前端大航海时代:旧工具被淘汰,新力量崛起
记得我刚接触前端编程时,jQuery风靡一时,其清新优雅的DOM操作、稳如磐石的兼容性处理、灵活高效的封装和链式调用,让人如沐春风。
彼时,我幼稚地以为“这就是巅峰”,事实却是“这只是开始”——随着三大框架的崛起,技术更迭就像“暴风雨前的宁静”,jQuery突然就被其他“先进的生产力”甩在身后了。于是我们看见,各大平台的技术“改朝换代”,各自引领开发潮流。
这还只是一个类库在前端浪潮中的兴衰。再想想ES(ECMAScript)语言规范的演进速度,HTML5的扩张幅度,跨端开发框架从Ionic到React Native再到Flutter,CSS从基本布局模型到弹性盒模型再到原生Grid 方案,构建打包工具从Grunt到Gulp再到webpack和Rollup……
本书在重视“亘古不变”的语言的基础上,力求为大家介绍更先进的开发技术。比如,服务器端渲染、HTTP 3.0,使用 Lerna、yarn workspaces 构建 monorepo 项目,框架的原理、演进,框架间的对比和虚拟DOM,等等。
与生俱来的混乱:披荆斩棘,勇往直前
前端三大方向 JavaScript、CSS、 HTML 的背后是无尽的碎片化场景。前端是最贴近用户的“战线”,它的基因决定了它需要处理各式各样的情况。同时,无论是跨平台还是语言特性,都让开发者感到迷茫。
? 我们应该使用哪些HTML标签以达到最佳的语义化?
? 我们应该如何面对不同终端的诡异问题,并保证体验一致性?
? 我们应该如何编写JavaScript代码才能实现bug free?
? this用得乱七八糟,它到底指向谁?
在本书中,我们除了剖析理论,更会注重经验介绍和最佳实践。
? 分析多种场景和业界解决方案的产出。
? 实战观摩 webpack 打包结果,对比 Rollup 解决方案,同时分析 tree shaking 的实施细节。
? 探索究竟如何组织架构代码,提升开发效率。
? 不去讲解 CSRF、XSS 等基础概念,而从鉴权角度出发,让读者对安全有一个立体认知。
广阔的未来:打铁还需自身硬
目前,我们正在经历所谓的“资本寒冬”,不管是大厂、二线公司还是创业团队,“优化人员结构”的新闻层出不穷。但是据我观察,“高级前端工程师”的招聘需求却“逆流而上”,具备高水平和丰富经验的开发者无论何时都备受追捧。因此,磨炼技能、积累项目经验将是所有前端工程师的核心诉求。
作为作者,我也在思考如何让本书更有价值,真正帮助大家突破瓶颈,让读者感到“物有所值”,进而实现技能进阶。
在本书中,我将穿插大量经典面试例题,其中既包括我作为 BAT 面试官考查的“私房题”,又涵盖我作为面试者遇见的“经典题”,还有我和业界前辈讨论过的“开放题”。在平时的开发和学习中,我也研读了大量精品文章,会一并将感悟分享给大家。
从开发菜鸟到资深工程师,除了主观能动性,我个人认为成长过程中的一大瓶颈在于“不是每个人都能有机会接触到好项目,进而从中提高”。这里的“好项目”是指类似“项目重构”“类库迁移”“复杂应用设计”“疑难 bug 定位”“新技术落地实施”等对开发者基础和设计能力有较高要求的项目。
为此,在本书中,我会插入大量有关代码设计模式、函数式、源码分析、组件设计和封装、开源库解读、项目代码组织等内容,也会手把手地带领大家查阅Issue、Changelog,从社区中汲取精华,构建更为真实的开发场景,直击实践中的高频痛点。
最后,希望能和每一位读者保持长线联系,一起讨论问题,共同进步。
本书内容
本书共分为8部分,涵盖33个主题(33篇),其中每一部分的内容简介如下。
第一部分 JavaScript 基础强化(01~04)
“且夫水之积也不厚,则其负大舟也无力”——基础的重要性无须多言,这对于前端开发也不例外。本部分将介绍JavaScript语言中的关键基础内容。因为JavaScript语言的灵活特性,这些基础内容既是重点,也是难点。这些内容包括:JavaScript中的 this 指向问题、闭包问题、关键 API、高频考点等。事实上,这些内容将不仅决定你的面试表现,还能直接影响你日后的进阶和发展。
第二部分 JavaScript 语言进阶(05~08)
牢固的基础知识,是进阶路上的基石。本部分将从JavaScript异步特性理论与操作、Promise的理解和实现、面向对象和原型知识、ES的发展进化等内容入手,带领大家强化难点。同时我们会通过大量实例,加深读者对知识点的理解,帮助读者融会贯通。
第三部分 不可忽视的HTML和CSS(09~11)
翻过 JavaScript 的大山,也许你会觉得学习HTML和CSS能相对轻松一些,但关于HTML和CSS 的知识仍然“不可忽视”。即使它们不是面试和工作中的“拦路虎”,也是至关重要的内容。本部分,我们不会系统且全面地介绍HTML和CSS 的相关知识点,而是会启发式地从一些细节入手,“管中窥豹”,介绍应该如何学习这些内容,并介绍响应式布局和Bootstrap的实现。
第四部分 前端框架(12~18)
本部分将介绍前端框架方面的知识,以 React 为主分析框架对前端而言到底意味着什么,以及我们应该如何学习 React。事实上,对 React 的学习不能只停留在“会用”的层面,学习其组件设计和数据状态管理对于培养编程思维也非常有益,有利于学习者从更高的层面看待问题。同时,我们也会对比 Vue 框架,探讨前端框架的“前世今生”。
第五部分 前端工程化(19~22)
资深程序员永远逃不开的重点工作之一就是“基础构建”和“项目架构构建”。本部分将从模块化谈起,结合 webpack、Lerna 等工具,为大家还原一个真实的“基建”场景,深入项目组织设计,并落实代码规范工具设计。
第六部分 性能优化(23~25)
性能优化是理论和实践相结合的重要话题。本部分将介绍大量重要的性能优化知识点,如性能监控、错误收集与上报等,同时将结合项目实例和React来探讨性能优化问题。阅读本部分之前,大家需要了解缓存策略、浏览器渲染的特点、JavaScript 异步单线程对性能的影响、网络传输知识等内容,同时也要具备一些实践经验,如用 Chrome devtool 分析火焰图、编写并运行出准确的benchmark等。
第七部分 编程思维和算法(26~30)
前端开发离不开编程基础,良好的编程思维、基本的算法知识,可以说是每一位工程师所必须具备的。本部分将用 JavaScript 来描述多种设计模式,手把手教大家用JavaScript处理各种数据结构,并强化对一些常考前端算法的理解和掌握。
第八部分 网络知识(31~33)
本部分将重点强化网络知识,包括缓存、超文本传输协议(HTTP)、前端安全等。作为一名前端开发者,不了解互联网传输的奥秘、不清楚网络细节是很难进阶的。网络知识关联着性能优化、前后端协作等核心环节,对于每一位工程师而言都十分重要。
授人以鱼不如授人以渔,除去书中的知识点,我更希望能够与大家分享我的学习方法:如何投身到社区中与广大开发者一起讨论;如何阅读前人的经典著作,站在巨人的肩膀上使自己看得更远;如何解读开源库并从中汲取养分;如何在面试和述职中正确地表达观点……

目录

第一部分 JavaScript基础强化
01 一网打尽this,对执行上下文说Yes   2
this到底指向谁 2
实战例题分析 3
开放例题分析 12
总结 13
02 “老司机”也会在闭包上翻车   14
基本知识 14
例题分析 32
总结 35
03 我们不背诵API,只实现API   36
jQuery offset方法实现 36
数组reduce方法的实现 40
实现compose方法的几种方案 45
apply、bind进阶实现 48
总结 52
04 JavaScript高频考点及基础题库   53
JavaScript数据类型及其判断 53
JavaScript数据类型及其转换 57
JavaScript函数参数传递 60
cannot read property of undefined问题解决方案 61
type.js源码解读 63
总结 65

第二部分 JavaScript语言进阶
05 异步不可怕,“死记硬背”+实践拿下   68
异步流程初体验 68
红绿灯任务控制 74
请求图片进行预先加载 76
setTimeout相关考查 79
宏任务和微任务 82
总结 85
06 你以为我真的想让你手写Promise吗   86
从“Promise化”一个API谈起 86
Promise初见雏形 88
Promise实现状态完善 91
Promise异步实现完善 93
Promise细节完善 97
Promise then的链式调用 100
链式调用的初步实现 101
链式调用的完善实现 106
Promise穿透实现 115
Promise静态方法和其他方法实现 116
总结 120
07 面向对象和原型——永不过时的话题   121
实现new没有那么容易 121
如何优雅地实现继承 123
jQuery中的对象思想 130
类继承和原型继承的区别 133
面向对象在实战场景中的应用 134
总结 136
08 究竟该如何学习与时俱进的ES   137
添加新特性的必要性 137
学习新特性的正确“姿势” 139
新特性可以做些什么有趣的事 141
Babel编译对代码做了什么 145
总结 150

第三部分 不可忽视的HTML和CSS
09 前端面试离不开的“面子工程”  152
如何理解HTML语义化 152
BFC背后的布局问题 155
通过多种方式实现居中 162
总结 167
10 进击的HTML和CSS   168
进击的HTML 168
不可忽视的Web components 171
移动端HTML5注意事项总结 171
CSS变量和主题切换优雅实现 174
CSS Modules理论和实战 178
总结 184
11 响应式布局和Bootstrap的实现分析   185
上帝视角——响应式布局适配方案 185
真实线上适配案例分析 187
Bootstrap栅格实现思路 192
横屏适配及其他细节问题 194
面试题:%相对于谁 195
深入:flex布局和传统布局的性能对比 197
总结 200

第四部分 前端框架
12 触类旁通多种框架   202
响应式框架基本原理 202
模板编译原理介绍 211
发布/订阅模式简单应用 214
MVVM融会贯通 215
揭秘虚拟DOM 216
总结 226
13 你真的懂React吗   227
神奇的JSX 227
你真的了解异步的this.setState吗 232
原生事件和React合成事件 234
请不要再背诵diff算法了 236
element diff的那些事儿 237
加上key就一定“性能最优”吗 238
总结 239
14 揭秘React真谛:组件设计   240
单一职责没那么简单 240
组件通信和封装 246
组合性是灵魂 248
副作用和(准)纯组件 250
组件可测试性 254
组件命名是意识和态度问题 257
总结 258
15 揭秘React真谛:数据状态管理   259
数据状态管理之痛 259
Redux到底怎么用 262
Redux的“罪与罚” 268
我们到底需要怎样的数据状态管理 270
总结 272
16 React的现状与未来   273
React现状分析 273
从React Component看React发展史 274
颠覆性的React hook 277
值得关注的其他React特性 282
总结 284
17 同构应用中你所忽略的细节   285
打包环境区分 285
注水和脱水 287
请求认证处理 292
样式问题处理 293
meta tags渲染 295
404处理 296
安全问题 297
性能优化 297
总结 298
18 通过框架和类库,我们该学会什么   299
React和Vue:神仙打架 299
新版本发布的思考 302
从框架再谈基础 304
总结 304

第五部分 前端工程化
19 深入浅出模块化   306
模块化简单概念 306
模块化发展历程 307
ES原生时代 314
未来趋势和思考 316
总结 318
20 webpack工程师和前端工程师   319
webpack到底将代码编译成了什么 319
webpack工作基本原理 327
探秘并编写webpack loader 330
探秘并编写webpack plugin 336
webpack和Rollup 341
综合运用 342
总结 344
21 前端工程化背后的项目组织设计   345
大型前端项目的组织设计 345
使用Lerna实现monorepo 347
分析一个项目迁移案例 350
依赖关系简介 353
复杂依赖关系分析和处理 354
使用yarn workspace管理依赖关系 356
总结 359
22 代码规范工具及技术设计   360
自动化工具巡礼 360
工具背后的技术原理和设计 367
自动化规范与团队建设 376
总结 378

第六部分 性能优化
23 性能监控和错误收集与上报   380
性能监控指标 380
FMP的智能获取算法 383
性能数据获取 384
错误信息收集 390
性能数据和错误信息上报 401
无侵入和性能友好的方案设计 404
总结 405
24 如何解决性能优化问题   406
开放例题实战 406
代码例题实战 410
总结 416
25 以React为例,谈谈框架和性能   417
框架的性能到底指什么 417
React的虚拟DOM diff 418
提升React应用性能的建议 419
React性能设计亮点 426
从Vue 3.0动静结合的Dom diff谈起 427
总结 436

第七部分 编程思维和算法
26 揭秘前端设计模式   438
设计模式到底是什么 438
设计模式原则 439
设计模式的3大类型和23种套路 440
总结 441
27 无处不在的数据结构   442
数据结构和学习方法概览 442
栈和队列 443
链表 446
链表实现 448
树 454
图 461
散列表(哈希表) 467
散列表的实现 472
总结 474
28 古老又新潮的函数式   475
函数式和高质量函数 475
柯里化分析 479
偏函数 485
总结 488
29 那些年常考的前端算法   489
前端和算法 489
算法的基本概念 490
V8 引擎中排序方法的奥秘和演进 491
快速排序和插入排序 491
排序的稳定性 498
Timsort实现 499
实战 500
算法学习 513
总结 518
30 分析一道常见面试题   519
题意分析 519
思路与解答 521
再谈流程控制和中间件 523
总结 534

第八部分 网络知识
31 缓存谁都懂,一问都发蒙   536
缓存概念与分类 536
流程图 538
缓存和浏览器操作 539
缓存相关面试题目 539
缓存实战 540
实现一个验证缓存的轮子 551
总结 554
32 HTTP的深思   555
HTTP的诞生 555
HTTP的现状和痛点 555
HTTP 2.0未来已来 557
从实时通信系统看HTTP发展 559
相关深度面试题目 560
总结 561
33 不可忽视的前端安全:单页应用鉴权设计   562
单页应用鉴权简介 562
单页应用鉴权实战 565
采用Authentication cookie实现鉴权 567
混合使用JWT和cookie进行鉴权 568
总结 571
结束语 572

读者评论

  • 实现offset方法中,使用递归的方式中,减去元素的node.scrollTop,我试验了下还是不用去减呀,还是可以获取准确呀

    codedreamfy发表于 2021/7/8 23:38:58
  • 书中 P457 的搜索二叉树的 removeNode 方法有误

    只有右节点的时候:

    else if (root.right)
    

    改为

    else if (!root.left)
    

    就可以了。
    否则会把 既有左子树又有右子树的情况判断进去,导致结果出错。

    然后上面还有个小地方有问题,还是 P457 的 removeNode 方法,this 打成了 tis

    躺着吃肉都会胖发表于 2021/4/18 17:57:26
  • var a = 123
    const foo = () => a => {
    console.log(this.a)
    }

    const obj1 = {
    a: 2
    }

    const obj2 = {
    a: 3
    }

    var bar = foo.call(obj1)
    console.log(bar.call(obj2))

    陀螺发表于 2021/3/31 15:14:04

图书类别

相关博文

  • 前端中台化,把格局做大:Node.js与测试服务探索

    前端中台化,把格局做大:Node.js与测试服务探索

    陈晓猛 2020-11-06

    作者简介 侯策,曾先后就职于法国ENGIE集团、百度等国内外知名互联网企业,具有丰富的开发经验和团队管理经验。曾担任 GIAC 全球互联网架构大会演讲嘉宾,FDCon2019 中国前端开发者千人峰会演讲嘉宾。著有《前端开发核心知识...

    陈晓猛 2020-11-06
    305 0 0 0

相关图书

数据分析与挖掘算法:Python实战

张晓东 (作者)

本书是一本介绍数据分析相关算法的学习指南,主要包括数据分析及数据挖掘相关概念介绍、数据思维及各种数据分析算法的原理及实现方法。本书的每个数据分析算法都介绍了数学...

¥69.00

Python大数据分析与应用实战

余本国 (作者)

本书是介绍如何用Python 进行数据处理和分析的学习实战指南。主要内容包括Python语言基础、数据处理、数据分析、数据可视化图形的制作,以及利用Python...

¥109.00

业务可视化分析: 从问题到图形的Tableau方法

对广大的业务分析师而言,业务分析(或者称为商业分析)应该从业务和问题出发,可视化是实现的方法,辅助决策是最终的目的。本书以业务分析为起点,介绍了“样本范围、问题...

¥139.00

最强iOS和macOS安全宝典

Jonathan Levin (作者) 郑旻 (译者)

《最强iOS和macOS安全宝典》以苹果操作系统的安全为主题,主要面向苹果高级用户、系统管理员、安全研究人员和黑客。<br>本书主要分三个部分:第一部分重点介绍...

¥179.00

时间记录:数据反映行为,行为改变数据

胡剑飞 (作者)

这是一本介绍时间记录体系落地的书。作者将自己7年的时间记录经验,以及服务学员超过100万小时的落地经验,总结成系统化的工具,同时提供标准化、系统化的操作方式,从...

¥79.00

Python+Office:轻松实现Python办公自动化

王国平 (作者)

《Python+Office:轻松实现Python办公自动化》分为6篇。第1篇Python编程基础篇,介绍Python语言及开发环境搭建、Python编程基础、...

¥79.00