女王控的博客

前端

144 篇文章

Webpack原理入门

概括 Webpack 以其使用简单著称,在使用它的过程中,使用者只需把它当作一个黑盒,需要关心的只有它暴露出来的配置。 本节将带你走进这个黑盒,看看 Webpack 是如何运行的。 基本概念 在了解 Webpack 原理前,需要掌握以下几个核心概念,以方便后面的理解: Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry… »

TypeScript 入门学习

背景知识 TypeScript Handbook 入门教程 深入理解 TypeScript 工具泛型的实现 Partial Partial 作用是将传入的属性变为可选项 前置知识 首先我们需要理解两个关键字 keyof 和 in,keyof 可以用来取得一个对象接口的所有 key 值,比如 而 in 则可以遍历枚举类型, 例如 源码解析 keyof 产生联合类型,in 则可以遍历枚举类型,所以他们经常一起使用,看下 Partial 源码 上面语句的意思是 keyof T 拿到 T… »

javascript ES6 笔记

let 和 const 块级作用域的出现 通过 var 声明的变量存在变量提升的特性: 初学者可能会觉得只有 condition 为 true 的时候,才会创建 value,如果 condition 为 false,结果应该是报错,然而因为变量提升的原因,代码相当于: 如果 condition 为 false,结果会是 undefined。 除此之外,在 for 循环中: 即便循环已经结束了,我们依然可以访问 i 的值。 为了加强对变量生命周期的控制,ECMAScript… »

Module federation 原理研究

首先了解一下 webpack 的打包原理 webpack 的打包原理 chunk 和 module webpack 里面有两个很核心的概念,叫 chunk 和 module,这里为了简单,只看 js 相关的,用笔者自己的理解去解释一下他们直接的区别: module:每一个源码 js 文件其实都可以看成一个 module chunk:每一个打包落地的 js 文件其实都是一个 chunk,每个 chunk 都包含很多 module 默认的 chunk 数量实际上是由你的入口文件的 js… »

客服新窗口技术探索

需求背景 由于客服聊天组件需要支持以新窗口的形式打开,也就是以 window.open 的新窗口打开,同时需要支持嵌入公司自己的产品端,在技术攻关的过程中遇到很多问题,特此记录 问题及解决方案 标记为横线的为完成需求后发现现阶段不需要做的 跨域窗口间的通信: 编写底层通信库 、通过 url 传递 嵌入公司产品端:独立客服聊天组件的运行环境 设置新窗口位置:需要注意兼容分屏情况 监听新窗口打开情况: 通过底层库发消息 、获取 window.open 的 closed… »

0%