YaoDeBiAn的博客

foreword（前言）本篇文章作为前面一篇文章（原生js如何获取宽高）的后续，主要分析原生 javascript 获取元素定位的 api 以及一些优化。JS 定位都有哪些获取方式呢clientLeft & clientTopoffsetLeft & offsetTopscrollLeft & scrollTop以下则会针对 clientTop、offsetTop、scrollTop 作为讲解。clientLeft & clientTopThe widt

foreword（前言）最近，我的学弟他在我们的一个群里问了一个问题：“数组解构和对象解构在性能上有什么区别呢，哪种方式会更好？”。当时，我的第一反应是，当时是数组了，而且为什么会有这样的问题呢，一个是针对数组的解构，一个是针对对象的解构，这两个有可比性吗，对比他们有意义吗？当然，只是我的第一反应，为了验证它们是否是有比较的意义，我大致花了一天多的时间简单研究了一下。test（自我测试，直接 coding 测试不就行了）于是我写了以下的一些代码用于测试：arr_normal.js: 使用 es5

foreword（前言）最近项目中需要获取 dom 元素的尺寸，所以借此对比分析一下 js 所有获取尺寸的方法，以及相关的 dom 定位方式。JS 尺寸、定位都有哪些获取方式呢JS 尺寸获取方法：clientWidth & clientHeightoffsetWidth & offsetHeightscrollWidth & scrollHeightgetComputedStyle...

foreword（前言）就跟学习JS一样，学习TS首先需要掌握它具有哪些数据类型，本篇文章将记录TS基本的数据类型。在TS中，数据类型都有哪些？TS作为JS的超集，必然包含JS所有的数据类型，它们分别是：BooleanNumberStringArrayFunctionObjectSymbolundefinednull除此之外，TS还新增了以下的数据类型：voidanynever元组枚举其他高级类型玩法类型注解在对比分析每种数据类型之前，有必要先了解TS中的类

foreword（前言）上一篇文章中，主要介绍了一个基本的项目环境搭建、express-generator的简单使用以及对其构建的项目结构的梳理。本篇文章是针对IM(InstantMessaging)聊天应用的项目预演篇，将会从以下几个角度进行展开：梳理应用所需的技术难点并找到合适的解决方案；技术选型梳理项目业务模块；梳理项目业务流程；基本的 UI 设计；技术难点与解决方案1...

foreword（前言）上一篇主要简单介绍了express的一些高阶玩法，本篇文章将主要围绕基于express的项目结构这个主题：梳理一个简单清晰的项目结构；express generator 以及它所构建的项目结构；express generator 构造器简单原理分析；手写一个简单的express项目1.首先，先把完整的目录结构构建好：├── config （基础配置目录）...

foreword（前言）上一篇文章中，我们已经大致介绍了express的基础语法，本篇文章将主要介绍express的一些进阶用法，大致为以下几点：express自定义模版引擎；简单介绍process manager;express如何预防安全漏洞；express的性能优化操作；express自定义模版引擎上一篇文章中我们简单演示了pug模版引擎的使用，我们发现pug其实是通过np...

foreword（前言）由于前三周搬家、身体、心理等方面的一些因素，导致文章更新中断了。目前已经明确了自己的一些规划，从本周开始，我将会以更加系统的视角深入各种知识，以更加稳定的节奏进行文章创作，希望能在这个过程中不断提高自己的技术水准、眼界视角、文章质量等。express作为nodejs中非常经典的框架之一，我认为从学习使用它开始，并深入阅读并理解它的源码，会是一个非常有意思的过程，而且我觉...

foreword（前言）最近在看极客时间的“nodejs开发实战”，里面简单介绍了一个npm包——httpserver（https://github.com/bahamas10/node-httpserver#readme），它可以为我们搭建一个本地静态资源服务器。通过js，它是怎么做的呢，本着好奇的心态，我点进github查看了它的源码，发现只有100多行代码而且，所以有了这篇文章。在这篇文...

foreword（前言）最近在看极客时间的“nodejs开发实战”，其中有个nodejs中commonjs模块规范的例子，例子中可以得出的结论是如果以module.exports作为导出，那么其优先级是最高的。我对此非常好奇，它的运行机制是怎样的？作者在最后给出了一个小引导，通过webpack将nodejs代码打包成js代码，并以js的角度来作为一个窗口。所以，本篇文章，我想要做的是将这打...

foreword（前言）学习方式，最理想的状态或许是有足够的时间能让你渐进式从基础到深入地掌握某个知识或技能，这会让你掌握系统全面的结构体系，并且能发现很多细节问题。所以，从环境搭建开始，希望能记录下Typescript每一个层级、每一个阶段下的知识领域，进而系统全方位地掌握这个工具或者也可以说是一门“语言”。编写环境编辑器：Vscode代码环境：安装nodejs初步使用Typescr...

foreword（前言）这是本人关于Typescript的第一篇笔记，之所以选择将“强类型语言和弱类型语言、静态语言和动态语言”作为第一个想要去总结的主题，是因为个人觉得它很重要。如今这个年代，可以供我们选择的编程语言非常之多，我们也不能在我们的编程生涯中仅仅只使用一门语言（除非你能够不断钻研一门语言并达到业界先驱者的层次），所以当我们在使用不同的编程语言时，如果我们连各种语言的性质、区别都不...

起初，基于webpack构建的图形关系体系，chunks（包括其内部引进的modules）通过父子关系进行链接。过去我们通过CommonsChunkPlugin来避免重复的依赖，但是却达不到更进一步的优化。webpack4.x中，CommonsChunkPlugin已经被optimization.splitChunks取代，以达到更好的优化体验。Defaults（默认）开箱即用SplitCh...

概要这个配置表示split前单个非按需导入的module的并行数的最低下限。注：只对import或require直接引入的module有效。分析简单来讲，假如minChunks设置为n，那么某个module想要被拆分出去，那么它的共享次数（或者说并行请求次数必须 >= n）:1. minChunks设置为n2. 假设有m个入口点，这m个入口点都直接引入了某个模块module（通过...

概要cacheGroups即缓存组，其中的每一项缓存组都可以继承/覆盖之前提到的splitChunks参数值（如name、maxSize、minSize、maxInitialRequests、maxAsyncRequests等），除此之外还额外提供了三个配置，分别为：test, priority 和 reuseExistingChunk。test: 表示要过滤 modules，默认为所有的 ...

概要minSize和maxSize分别表示chunk在被拆分之前的最小体积和最大体积。（maxSize可以小于minSize）准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webp...

概要这个配置用于控制webpack打包时被拆分出来的bundle的名称。我们来看下官方文档上是怎样描述的：boolean = true 、function (module, chunks, cacheGroupKey) => string、stringAlso available for each cacheGroup:splitChunks.cacheGroups.{cache...