《前端跨界开发指南 JavaScript工具库原理解析与实战》史文强著|(epub+azw3+mobi+pdf)电子书下载

图书名称：《前端跨界开发指南 JavaScript工具库原理解析与实战》

【作　者】史文强著

【丛书名】WEB开发技术丛书

【页 数】 412

【出版社】 北京：机械工业出版社 , 2022.07

【ISBN号】978-7-111-70804-9

【价 格】129.00

【参考文献】 史文强著. 前端跨界开发指南 JavaScript工具库原理解析与实战. 北京：机械工业出版社, 2022.07.

图书封面：

图书目录：

《前端跨界开发指南 JavaScript工具库原理解析与实战》内容提要：

精选30+经典JavaScript工具库，展现多元有趣的JavaScript应用场景……

《前端跨界开发指南 JavaScript工具库原理解析与实战》内容试读

■■■■■■■■■■■■■■

■■■■■■■■■■

基础篇

■第1章Mock.js:如何与后端潇洒分手■第2章Node.js:连接

■第3章ESLint::你的代码里藏着你的优雅■第4章模块演义与Require.js■第5章Lodash.js是工具，更是秘籍

■第6章静态类型检查：Flow,js和TypeScript■第7章用函数描述世界：Ramda.js■第8章Rxjs:前端世界的“老人与海”■第9章不可变数据的制造艺术：Immer.js

和Immutable.js

■第10章Day.js:算个日期能有多难

■■■■■■■■

ChopterI目第1章

Mock.js:如何与后端潇洒分手

前后端分离的架构模式已在业内践行多年，实践证明，在这样的分工模式下，前端开发人员更能专注于样式和渲染性能的问题，后端开发人员则更能专注于业务逻辑的实现，以及如何通过接口为前端提供所需的数据和服务。随着应用程序复杂度的提高，前后端分离的架构模式几乎已经成为开发团队的标配。从用户的角度来看，前后端是否分离对他们而言并没有什么差别，毕竟用户最终使用的产品是作为一个整体来工作的。然而，对于开发人员而言，前后端分离的思想则具有很重要的意义：它能以更细的粒度划分开发人员的职责，对每个角色的要求也越来越高，同时还能使最终的项目文件在模块划分和层次设计上变得更加清晰，也更容易维护。在这样的合作模式下，后端开发者不需要像以前那样在服务端渲染好模板之后再传给前端开发者，只需要可靠、稳定地为前端提供约定的数据或服务即可，只有在性能要求较高的场景中才可能需要选用服务端渲染(Server Side Render)】技术。不过，请不要误以为这件事情像上面所描述的那样简单，因为除了常规的“增删改查”操作之外，后端开发人员还需要关注诸如鉴权、缓存、分流、备份、并发、安全等一系列功能性的开发工作，以保障基本功能的正常运行，只有这样才能尽量为不断发展的业务提供高度可靠的支撑。无论如何，用户直接面对的是产品界面，后端开发人员在合作中所做的工作就是为界面提供数据。

前后端分离的协作模式可以使前后端开发人员并行完成自己所负责的那部分工作。现代化前端开发是依赖数据驱动的，如果后端开发人员还没有写好前端开发需要用到的接口，那么前端开发人员要如何获取开发阶段所需要的数据呢？本章就来讲解在本地开发中，前端开发人员如何使用Mock.js技术为自己提供模拟数据，以便在与后端开发人员约定好相关接口后启动并行开发，从而避免受限于后端的开发进度，最后还会简单剖析Mo©kjs技术背后的实现原理。

第1章Mock.js:如何与后端潇洒分手3

1.1为什么你总是下不了班

如果你是一个初级前端开发人员，很有可能并不知道Mock.js是什么技术，我们先抛开对技术的理解来看看一个初级前端开发人员的工作具体包括哪些内容。一个任务被拆分为前端和后端两个部分后，前端和后端开发者通常会先商议接口细节并编写相关文档，然后团队的成员就会开始自己的编码工作。当前端开发人员写完页面静态部分的代码时，后端开发人员很有可能还没有准备好后台的接口。这种情况下，团队的项目经理往往会要求前端开发人员先使用虚拟数据把页面填充起来看一下效果，调整一下样式，等到后端开发完毕后再进行联调，这也是非常合理的。对此，开发者通常都会选择如下几种处理方式。

口将数据直接写在所使用的代码段附近，等后台的接口开发完毕并进行联调之后再来修改。这是初级前端开发人员最容易想到也最常使用的方式，虽然选择这种方式本身并没有什么问题，但可以确定的是，将来重构代码时的工作量将会非常大，因为需要手动改写每一段虚拟数据，将它们的获取方式改为从后台请求。这里还需要注意的一点是，数据的返回是异步的，如果依旧像对待静态数据一样来编写代码，那么很有可能后续的逻辑会在获得数据之前先被执行，这时得到的结果往往不是自己所期望的，而初级前端开发人员却不能理解到底发生了什么。

口将需要的数据写入JSON文件，从本地引用或请求。稍有经验的前端开发人员会更

容易接受这样的方式，相对于前一种方案而言，它的“侵入性”更小，虚拟数据可以保存在独立的文件中，像普通模块一样被引人，在联调结束后将其移除即可。但以这种方式引用的数据仍然是同步获得的，而联调阶段需要对接的是后端开发人员提供的接口，它是异步返回数据的，如果联调过程不顺利，则很有可能还需要在虚拟数据和真实接口之间来回切换，那么这种方式的协作效率问题就会暴露出来。例如，联调时发现接口出现问题，在后端开发人员修复的这段时间内，前端开发人员自然也需要做一些其他工作，而不是一直等待。可是，联调阶段的代码已经改成前端异步请求后端数据的方式了，后端的接口一直报错会导致前端的整个页面白屏，

为了修复与用户界面(UI)相关的其他问题，前端开发人员又不得不将代码改为使

用虚拟数据的方式，因此通常只能先把写好的请求代码小心翼翼地注释掉。另外，页面使用的虚拟数据很有可能需要前端开发人员手动准备，面对数组或是嵌套结构较深的对象，手动准备这些测试数据也会消耗大量的时间。

口等待后端开发人员开发完毕后提供接口。这种方式的确会比较省力，但潜在的风险却很大，因为前端开发人员不得不面对这样一种可能，并非每一位合作的后端开发人员都是专业且友好的，如果他提供的接口一切正常，那自然是皆大欢喜，前端开发人员只需要进行一些字段的检验和调整就可以宣告联调成功了。但如果与你合作的后端开发人员恰好是位新手，那么联调的过程可能就会变成反复刷新页面、协助测试接口、抓取请求1ogd等无聊的工作。可能几个小时下来，你除了不停地刷新

4基础篇

页面以外，几乎什么进展都没有。如果与你配合的后端开发人员比你更有话语权，或者恰好是你的领导，那么他们极有可能会坐在你的电脑前进行各种调试，而你尽管有其他任务在身也只能耐心等待。最终的结果就是，你需要写很多额外的代码来解析和重组后端返回给你的数据，甚至还有可能因为数据结构的变化而导致前端的整个逻辑需要进行重构。最后，别人的工作都做完了，你却不得不留下来加班。你为什么总是加班？开发经验的欠缺只是原因之一，更重要的解决方法是，我们需要学习在团队作战中如何高效地完成自己的任务，以及如何更有效地与他人合作，这从来都不是一个靠妥协和忍让就能解决的问题。工作流程的优化对任何团队来说都是一件重要但不紧急的事情，你可以置身事外等待队友来处理，也可以躬身入局自己来推进问题的解决(并不是让你独自一个人来实现的意思)，而后者不正是我们作为软件工程师的本职工作吗？

1.2联调加速

高效的联调是基于前后端开发人员有效的约定来达成的，也就是说，在开发前，前后端开发人员应提前对所需要的接口进行沟通和设计。发送哪些参数，以及参数的具体结构一般是由后端开发人员决定的，因为他们是最终接收并使用这些数据的人。后端返回的响应数据的构成一般需要由前端开发人员来决定，如果不对细节进行约定，那么很多后端开发人员都会直接在响应体中返回一个需求数据的超集，然后让前端开发人员自己去筛选和重组数据。随着接口数量的增多和业务逻辑的日益复杂，前端的代码中会混入越来越多的对数据进行二次加工的逻辑，如果没有相应的代码规范约束，整个前端代码的可维护性很快就会变得非常糟糕。

前后端开发人员对接口细节的协定并不是一件多么复杂的事情，但是许多团队都做不好。需要说明的一点是，接口的开发协定并不是“银弹”，即使开发之初前后端已经进行了详细的约定，但是在过程中还是有可能会出现各种各样的问题，及时沟通反馈才是问题的解决之道，开发协作中并非不允许出现偏离约定的事情，但是绝对不能等到最后一刻才告诉对方某个事物与最初的设计不一致。对接口的细节进行基本的约定之后，前端开发人员就可以在开发中为自己提供虚拟数据了。前端发送请求的代码可以在本地开发阶段一次性写好，联调的时候只需要简单修改一下请求的地址就可以了，因为测试数据与后端开发的真实接口所返回的数据在数据结构和使用的字段名上都是一致的，这样做无疑会大大提升前端开发人员的工作效率，当然，请求地址的变更也可以借助打包工具以参数的形式从代码外部注入。1.3节就来详细讲解如何使用Mock.js生成指定结构的数据。

1.3使用Mock.js

Mock.js是使用JavaScript语言生成测试数据的第三方库，它能用一套相对规范的模板

⊙官网地址：http:/mockjs.com/。

第1章Mock.js:如何与后端潇洒分手◆5

语法让开发者自行定制测试数据的结构，然后根据模板生成用于测试的数据。Mock.js不仅可以使用类似于“@date”“@cname”这样的模板占位符来生成时间和中文姓名等特殊的测试数据，而且可以编写自定义的扩展占位符来生成需要的测试数据，更方便的是，仅仅使用简单的标记符就可以生成大量结构重复的测试数据。如果你使用过任何SPA(Single Page

Application,单页面应用)框架，就不难联想到Mock.js与“*ngFor”“v-for”这类用于生成重复结构的模板语法如出一辙。

1.3.1 Mock.js的语法规范

MoCk.s的语法规范可以分为数据模板定义规范和数据占位符定义规范，规范的详细内容可以在项目GitHub仓库的wiki页中查看和学习。

1.数据模板定义规范

数据模板中的每个属性均由3部分构成：属性名、生成规则和属性值。数据模板的格式如下：

"|":

这个简单的规则会依据value的类型将rule解释为不同的编译规则。例如，当value的类型为number时，rule的不同写法可以最终生成指定范围内的整数，或者指定范围和小数位数的浮点数；而当value的类型为Array时，rule的不同写法可以最终生成数组中的某一项，或者是将value重复若干次后得到的新数组。或许这些规则最初会让人感到很烦琐，但实际上在手动模拟2~3个接口的响应之后，绝大多数开发人员很容易掌握其中的规律。

2.数据占位符定义规范

占位符是写在属性值字符串中的，在最终生成数据时，会依据定义替换为对应的内容。数据占位符的格式如下：

'name|rule':'e占位符

'namelrule':'e占位符（参数[，参数]）

Mock.is内置的占位符可以生成常见的字符串，诸如姓名、时间、地址、段落、指定大小的图片链接、符合某个正则表达式的字符串等，只需要在数据模板的value字段处使用“@[keywords]”的形式进行声明即可。同时，Mock.Random命名空间下也提供了与占位符同名的生成函数，开发人员可以根据自己的需求编写新的占位符。

拓将同类别的方法集中到命名空间下是一种非常好的编程习惯，因为这样做可以避免

知全局环境的污染。浏览器脚本的全局环境是一个无限制的命名空间，你挂载在全局识环境中的方法有可能会覆盖其他人的同名方法，也有可能被后来的开发人员所编写

的函数覆盖。可怕的是，这样的覆盖并不是语法错误，所以你的程序有可能并没有报错，而最终的业务逻辑却出现了与预期不符的结果，这种情况下的调试往往会非

6基础篇

常困难。初级开发人员应该从最初学习编程时就培养良好的习惯，独立的命名空间意味着如果你的代码写得很好，那么其他开发人员可以直接引入以进行复用；如果你的代码写得不够好，或者最终由于业务逻辑变更而失效，那么你也可以很轻松地用新的函数替代它。

1.3.2 Mock.js实战

Mock.js支持在浏览器环境和Node.js环境中使用。在浏览器中，Mock.js既可以使用