材女的进击

转载 RxJS中高阶操作符的全面讲解：switchMap，mergeMap，concatMap，exhaustMap

在更高阶映射中，我们不会简单地映射一个值比如说1到另外一个值比如说10，我们将把值映射进另外一个Observable中！结果是一个高阶Observable。它和其他可观察对象一样，只是它的值本身也是可观察对象，我们可以单独订阅。这可能听起来有些牵强，但事实上，这种类型的mapping一直都在发生。我们来给一个关于这种类型的mapping的实例。我们举例来说，我们有一个Angular反应式表单，它会通过一个Observable一直发送合法的表单值：})});12.ts。

原创 浏览器渲染原理

原创 详解事件循环机制

浏览器最主要的进程 ：渲染主线程如何理解JS的异步任务没有优先级，但消息队列有优先级阐述一下JS的事件循环

转载 5种前端代码共享方案：npm包、git submodules、脚手架模板、复制、UMD或模块联邦

而且很多公司都有自己的项目脚手架，有自己的独特的模板。你每发布的一个版本必须是长期可用的、或者更新成本极低的。这并不容易，我之后会发文章详细聊聊，如何做好「脚手架模板生成」。其实不是这样的，npm也可以从git仓库安装依赖。你可以不发布到npm，也可以只把产物（或源码）上传git仓库。（我把他们放一起，是因为他们思想上是一致的，只是实现方式不同）你可能以为npm必须发布到公开的，才能用。所以个人开发者也能用npm，只是我认为效率不高罢了，不如直接用 git submodules。

转载 教你实现一个深浅拷贝！

从上面的样例代码中可以看到，利用 object.assign 也可以拷贝 Symbol 类型的对象，但是如果到了对象的第二层属性 obj1.a.b 这里的时候，前者值的改变也会影响后者的第二层属性的值，说明其中依旧存在着访问共同堆内存的问题，也就是说这种方法还不能进一步复制，而只是完成了浅拷贝的功能。当然，如果你在考虑到循环引用的问题之后，还能用 WeakMap 来很好地解决，并且向面试官解释这样做的目的，那么你所展示的代码，以及你对问题思考的全面性，在面试官眼中应该算是合格的了。

转载 深入探究：null 和 undefined 究竟有何区别？

值。

转载 浏览器路由技术：比较hash和history路由

但是，当进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。hash路由对于单页面应用程序和低版本浏览器支持更好，而history路由在URL美观性和浏览器API的使用上更加灵活。在现代Web应用程序中，路由技术是一个重要的概念，它使得用户可以通过URL在不同的页面之间导航。hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的。hash路由支持低版本的浏览器，而history路由是HTML5新增的API，只支持较新的浏览器。

转载 webpack中的chunk

希望读过本篇文章，你在看Webpack配置的时候，能在脑中形成Chunk的生成过程。

原创 http2 与 http1.1 有什么改进

可参考文章。

转载 webpack打包的3种hash值详解

结论：当规则为chunkhash时，打包后的hash值会根据入口文件的不用而不一样，当某个入口文件修改后重新打包，会导致本入口文件关联的所有文件的hash值都修改，但是不会影响到其他入口文件的hash值。结论：当规则为contenthash时，每个文件的hash值都是根据自身内容而生成，当某个文件内容修改时，打包后只会修改其本身的hash值，不会影响其他文件的hash值。由于我们预设的是hash，所以我们直接运行打包npm run build，我们看看我们打包后的是什么东西。这里我就抽取精华部分。

转载 前端安全问题及解决方案

随着互联网的高速发展，信息安全问题已经成为行业最为关注的焦点之一。总的来说安全是很复杂的一个领域，在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，还时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。

转载 sessionStorage可以在多个Tab之间共享数据吗？

sessionStorage是浏览器会话级别的存储机制，它只在单个浏览器标签页(tab)或窗口之间共享数据，每当用户打开一个新的tab页或一个窗口时，sessionStorage会重新初始化，每个tab页和窗口都有自己独立的sessionStorage。同时在A页面设置一些sessionStorage数据，然后a标签_blank的方式打开另一个tabB页面，发现B页面有A页面的数据，此时两个页面的sessionStorage相互独立，修改不会影响对方，所以称之为。

转载 npm install 原理

首先安装的依赖都会存放在根目录的node_modules,默认采用扁平化的方式安装，并且排序规则.bin第一个然后@系列，再然后按照首字母排序abcd等，并且使用的算法是广度优先遍历，在遍历依赖树时，npm会首先处理项目根目录下的依赖，然后逐层处理每个依赖包的依赖，直到所有依赖都被处理完毕。在处理每个依赖时，npm会检查该依赖的版本号是否符合依赖树中其他依赖的版本要求，如果不符合，则会尝试安装适合的版本。安装某个二级模块时，若发现第一层级有相同名称，相同版本的模块，便直接复用那个模块。

转载 BOM与DOM

是BOM对象的核心，JS的顶层对象，浏览器窗口只要打开一个HTML文档，浏览器就会为我们创建一个window对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。window对象是JS中的全局对象，可以在任何地方调用， 我们在页面上写的元素，js函数，全局变量都属于window对象，都可以 用window对象来调用.全局变量是 window 对象的属性。全局函数是 window 对象的方法。

转载 webpack的构建原理

加载和解析模块：Webpack 会根据模块的类型和配置，使用合适的 loader 加载和解析模块。解析入口文件：Webpack 通过配置文件中的入口文件（entry）来确定构建的入口，Webpack 会从入口文件开始递归地解析依赖关系，将所有依赖的模块都加入到构建过程中。生成输出文件：Webpack 将打包后的代码生成指定的输出文件，可以是单个文件或多个文件。生成依赖图和 Chunk：Webpack 根据模块之间的依赖关系，生成依赖图，并将相互依赖的模块打包成一个 Chunk（代码块）。

转载 ES Module 和 Commonjs | require和import的区别

CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。若两个文件同时引用一个模块，改变模块内的值时，require引入的模块内的值不会改变，而import引入的模块内的值会改变。require/exports 输出的是一个值的拷贝，import/export 模块输出的是值的引用。require/exports 是运行时动态加载，import/export 是静态编译。导入：const module = require('module')

转载 Object与Map的区别

简介：Object：是最常用的一种引用类型数据，可用于存储键值对的集合，在ECMAScript 1st里添加的Map：是键值对的集合，采用Hash结构存储，在ECMAScript2015版本里新增的。

转载 TS 函数重载（JS中本身不支持重载）

举个例子，声明一个类Course，里面写一个begin的方法，我们调用 begin时传入不同参数类型已经参数个数，begin方法会做出不同处理，那么怎么实现呢？这里介绍个名次「函数签名」，顾名思义，函数签名主要定义了参数及参数类型，返回值及返回值类型。函数签名不同，函数会做出不同的处理，这是我对函数重载的理解。声明一个函数arithmetic，参数类型为联合类型，返回值也是联合类型，但是如下代码却报错了。我们可以可以根据传参的类型和函数返回值声明多个同名的函数，只是类型和返回值不同而已。

转载 Angular encapsulation视图封装模式

组件视图中的每一个元素，都有一个 _ngcontent 属性，它会标记出该元素属于哪个宿主的模拟 Shadow DOM。Emulated: 只有全局样式能进来，其他样式无法进来，组件样式也出不去（默认值）在组件的元数据设置encapsulation，可以分别控制每个组件的封装模式。当选择器相同且选择器优先级相同时，组件内部样式的优先级大于全局样式的优先级。None: 任何样式都能进来，组件的样式也都能出去。组件相当于是隔离状态，不受外界样式的影响。组件相当于是半隔离状态，受全局样式的影响。

转载 一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别

除了将每个内容投影到单个 ng-content 中之外，您还可以使用 ng-content 的 select 属性控制内容的投影方式。Angular 将宿主元素（指令所应用到的元素）包装在 ng-template 中，并通过用诊断注释(diagnostic comments)替换它来使用完成的 DOM 中的 ng-template。project-content 组件的开始和结束标记中传递的 HTML 内容就是要投影的内容。内容将在提供内容投影功能组件内的 ng-content 内呈现。

转载 取消订阅RxJs Observable 的方案

我们使用|async管道订阅Observable，每次Observable流推入新值时，我们用{{ }}计算(执行)组件的updateTitle()方法，而不是显示任何内容。作为一个额外的好处，使用NgRx Effects意味着我们正在使用更加良好的理念处理副作用，这使体系结构更清洁，促进可维护性，并且更容易测试。注意，我们使用了Observable的.pipe()方法来添加操作符，在我们的例子里是将takeUntil添加到Observable链中？外面发生的事情，或者说“在一边”，听起来很像一个指向;

转载 Angular脏值检查

Angular Change Detection是一种强大的框架机制，可确保我们的UI以可预测和高效的方式表示我们的数据。可以肯定地说，更改检测仅适用于大多数应用程序，尤其是当它们不包含50多个组件时。您收到一个ExpressionChangedAfterCheckedError并需要解决它您需要提高应用程序性能我希望本文可以帮助您更好地了解Angular的变更检测。随意使用我的演示项目来试用不同的变更检测策略。

转载 每个 Angular 开发人员应该了解的关于 Zone.js 十件事

在 debug Zone 时,会观察到不同类型的任务:微任务和宏任务。通常乱说，从宏任务开始观察会更好，因为大多数问题都和宏任务有关。这两种任务有什么区别呢？简而言之，微任务被规划在当前任务之后立刻进行（在同一个 VM 轮询中），而宏任务则只会规划在下一个 VM 轮询中。你可以在Jake Archibald 的文章中了解更多的细节。

转载 【Angular中的HTTP请求】- HttpClient 详解

不同版本的Angular，以上代码位置行数不同，但是文件位置都是一样的，大家可以通过以上关键字搜索就能找到相关代码。注入时，处理程序实例将请求分派到链中的第一个拦截器，然后分派到第二个拦截器，第三个拦截器，依次分派，最终到达。操作符基于请求信息新建的一个单播的 Cold Observable （数据流，原始的数据就是请求信息）。方法对请求进行了一个链式的处理流程：主要包括不定数量的拦截器的处理加上最后的。被订阅的时候，请求先经过拦截器的处理，最后通过浏览器 HTTP API 发出。

转载 CSS3新增的属性

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);

转载 http常见状态码

5xx(服务器错误)这些状态码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求的错误。4xx (请求错误)这些状态码表示请求可能出错，妨碍了服务器的处理。304 （未修改）自从上次访问过后，请求的资源未修改。500，(服务器内部错误)服务器遇到错误，无法完成请求。403 （禁止）服务器拒接访问，代表请求的服务器资源。503，表示服务器处于停机维护或超负载，无法处理请求。400 （错误请求）服务器不理解请求的语法。100，接受的请求正在处理，信息类状态码。

原创 angular 双向数据绑定原理

这样，当一个异步操作（例如一个HTTP请求）完成后，Angular会自动检测组件的变化并更新视图。在Angular中，所有的数据绑定都是通过Observable实现的，当一个属性被绑定到一个表达式时，Angular会在这个属性上创建一个可观察对象，并且在这个对象上注册一个观察者，当这个属性的值发生变化时，会通知所有的观察者。当一个组件中的属性或者模板中的表达式发生变化时，Angular会创建一个变更检测器，并且在组件的变更检测树中遍历所有的子组件和指令，检测它们的属性是否也发生了变化。

转载 Typescript 常用的内置工具类型

作用：生成一个新类型，该类型拥有 T 中除了 K 属性以外的所有属性;作用：生成一个新类型，映射类型;in的意思就是遍历，如上就是将 类型string进行遍历，也就是string。作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为可选项。作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为必选项。作用：生成一个新类型，T 中的 K 属性是只读的，K 属性是不可修改的。作用：以元组的方式获得构造函数的入参类型。作用：以元组的方式获得函数的入参类型。{} 任何不为空的对象。

转载 TypeScript 中的 any、unknown、never 和 void

any 是任意类型，具有所有类型的行为，可被执行，可访问属性，超脱于类型系统之外。unknown 则是类型更安全的 any，同样可以将任何类型赋给它，但不能执行任何操作，必须用类型断言来显示说明类型才能去执行操作。never 是无法观测的类型，比如不会执行完的函数的返回值，合并结果不存在的交叉类型。在类型编程中非常活跃，常用于丢弃一些子类型。void 就比较简单，只是代表函数没有返回值，没有其他的场景了。

转载 JS遍历数组的十五种方法

这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组。forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变。

转载 JS 异步编程方法：6种方案

简简单单的六种方法：js 异步编程的进化史：callback -> promise -> generator -> asnyc + await。

原创 ES5 构造函数与ES6 Class的区别

即在子类的constructor方法中必须使用super()，之后才能使用this，如果不调用super方法，子类就得不到this对象。es6的子类可以通过__proto__属性找到父类，而es5的子类通过__proto__找到Function.prototype。es5的继承是先建立子类实例对象this,再调用父类的构造函数修饰子类实例(Surper.apply(this))。另一条： 子类prototype属性的__proto__属性指向父类的prototype属性.

原创 ES6的子类有没有自己的this？

子类和父类是个相对的概念，严格来说是有歧义的，因为一个类可以既是子类也是父类，所以规范里用的是绝对的概念：基类和派生类。"子类没有自己的this"这句话更准确的说应该是子类中的this是通过父类中创建好this后传递下来的，所以子类必须要先调用super（）。说的，JS 里的构造函数要么是基的，要么就是派生的。也就是实例对象最开始是在基类里创建好，然后一层层传递给下层的。就是在执行它的时候创建的，而派生的构造函数不会创意新的。的，但在那之前，也有一个东西是通过。向上一层层传递的，那就是。

原创 啥是MVVM

MVVM采用双向数据绑定，view中的数据变化将自动反映到viewmodel上，反之，model中的数据变化也会自动展示在页面上。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。

原创 css常见布局（面试要问的哦）

【代码】css常见布局（面试要问的哦）

原创 css的四种加载方式

优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分。链式样式使用最多，在标签之间用引入css文件。在head标签之间用标签声明。

原创 HTTPS 和HTTP 的区别

https协议需要到CA申请证书，一般免费证书很少,需要缴费。 http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。 http和https使用的是完全不同发放人连接方式，用的端口也不一样，https是443，http是80 http连接是无状态的，https是由ssl+http构建的可进行加密传输、身份认证的网络协议，比http协议更加的安全。

转载 Vue3 + vite + Ts + pinia

Vue3学习

原创 Javascript 设计模式

设计模式

原创 ECMAScript 详解

ECMAScript 与 JavaScript 的关系