- 博客(90)
- 收藏
- 关注
RSS订阅原创 webpack的ESM实现
在现代化ES中提供了新的组织代码的工具“模块”，而新的工具总会伴随着兼容性等问题，所以有了babel和webpack等工具帮开发者抹平现实和理想（新特性）之间的差距。而，这是本文要探寻的问题。
2024-03-25 09:52:52
846
原创 CSS基础概念之选择器类型
当伪元素具有指定的伪元素名称，与任何伪类所表示的额外条件匹配，并具有由相邻的前一个选择器表示的起源元素时，伪元素与伪复合选择器匹配。是一个序列，这个序列由组合子分割的复合选择器或伪复合选择器或者复合选择器和伪复合选择器组成。当一个元素或伪元素匹配中了序列中最后的复合/伪复合选择器，并且序列中通过组合子分割的其他选择器单元也匹配中了各自的元素，那么就可以说这个元素匹配中了复杂选择器。例如，在.foo::before:hover中，.foo是复合选择器，而::before:hover是伪复合选择器。
2023-12-05 18:45:23
553
原创 JavaScript中的class和super
随之而来的是类继承extends能力和ES6之前的继承不同，extends实现的继承是从父类到子类的顺序，而不是子类创建好对象之后给到父类挂载属性。顺序颠倒了。
2023-05-01 21:00:01
1174
原创 HTTP的那些事儿
摘要算法可以将任意长度的数据压缩成定长，并且摘要算法具有雪崩效应，对于原文的一点改动生成的摘要则完全不同，同时摘要算法生成的摘要不可逆。我们可以通过摘要算法生产原始数据的摘要附上原始数据一起发送给对方，这样如果被修改过，那么肯定和摘要是对不上的。当然通信必须要建立在机密性之上，否则连原文和摘要一起改那也就束手无策了。到这里完整性和机密性都具备了，还差身份认证和不可否认。
2023-04-02 22:53:12
1221
原创 react和vue在响应式上的不同理解
在vue中数据是可变的，而副作用监听数据的变化。所以在vue中props中的数据是可以被改的，并且vue本身还能够支持props数据变化之后的响应。vue的响应以数据源中心向外辐射，换句话说只要数据改了vue就能响应变化，无论这个数据是在什么地方改的。react实现响应的方法是，需要对比两次数据是否相同，修改前和修改后数据相同则不更新组件，否则触发响应，更新整个组件，包括子组件。vue实现响应的方法是，首先收集依赖这个数据的副作用（视图更新、计算属性等），当数据修改时统一调用依赖这个数据的副作用完成响应。
2023-03-06 12:54:50
805
原创 读vue【深入响应式系统】后整理
一直以来对vue的依赖自动追踪的原理很感兴趣，像魔法一样。对于交给vue的对象返回后，在哪里使用了这个返回的对象vue会自动追踪，等这个对象改变时vue会自动通知到之前使用改变量的方法，整个过程和react很不一样，react的useEffect需要用户手动声明依赖而vue不同。这篇官方文档通俗易懂的介绍了vue的响应式原理，对文档中省略的部分补充后，文档中代码可以正常运行。阅读完文章后对其进行解释。当点击页面时会触发属性的修改，属性a修改后会自动通知到重新执行。
2022-12-16 10:27:31
221
原创 nginx try_files流程解析
nginx 的try_files对于前端单页应用的部署意义非凡，对于try_files不能总处于知其然而不知其所以然的状态，所以花时间整理了try_files指令的执行流程。
2022-11-19 20:36:23
2586
原创 问题记录之前端路由系统
公司的一个项目中使用了根据路由配置生成对应的Route，而配置会存在一份在store中，当store中的RouteConfig变化时，会根据最新的配置来生成最新的试图。因为路由配置系统实现上的一些缺陷本次需要对其就行性能上的一些优化，优化后的路由系统在运行时偶尔会导致页面白屏，在排查后总结一下问题导致的原因和问题的解决方案，和过程中的一些思考，以便后期回归。
2022-10-01 20:31:24
420
原创 Hi Generator
函数也是封装了状态，通过调用函数获取对应状态，只是这个状态只有一个，函数只能被执行一次，retrun之后无法再继续return之后的语句执行，而generator提供了继续执行中断上下文执行的能力。Generator helloworld中通过两个yield产出了两个状态，分别是’hello’和’world’，Generator外部获取这两个状态的方式是调用ge对象的next()方法。在例子里可以将next()可以当做在执行函数，而yield作为return来看的就会好理解很多。
2022-09-20 12:27:58
196
原创 The Little Schemer-周而复始之Y组合子由来
The Little Schemer周而复始章节Y组合子的推导让人迷惑摸不着头脑，在进行深入理解后的笔记做了总结，以便之后复习回顾。
2022-07-23 13:42:34
203
原创 package-lock.json
package.json确定依赖的范围，package-lock.json将这个范围精确到具体版本。主要是为了解决在各个环境中得到确定的node_modules，如果只依赖package.json因为该文件声明的是直接依赖的范围，它无法将直接依赖固定在某个特定版本，也无法声明依赖的依赖。所以需要引入package-lock.json文件来达到我们固定node_modules的目的。。npm7之后的版本生成的package-lock是可信的。...
2022-05-15 21:41:28
11562
2
原创 TCP握手为什么需要三次通信
TCP三步握手three way (or three message) handshake 是TCP核心知识点，很长一段时间内我无法理解为什么TCP建立连接需要三次通信，而不是两次或者四次或者更多次。我翻了很多问答和博客，他们说的都很有道理，但是借来的火，点不亮自己的灯。随着时间的推移终于对这个问题我有了自己的理解。TCP握手为什么需要三次通信？互联网这个信道并不可靠，TCP用于在不可靠的信道中进行可靠的信息传递。首先要明确的是，无论通过多少次握手都无法改变信道不可靠的事实，而如何在不可靠的信道中进行可
2022-04-17 07:49:26
454
原创 webpack联邦模块之consumes方法
对于使用联邦模块的项目会有两个依赖，一个是远程模块，一个是共享模块。上一篇文章解释了远程模块的加载和安装并初始化共享作用域。consumes则是共享模块的解决方案，用于在运行时加载并安装依赖的共享模块。为什么叫consumes？我理解是因为共享模块的获取是在__webpack_require__.I中完成的，而consumes只是使用__webpack_require__.S中的数据来安装对应模块。所以consumes是在消费__webpack_require__.S中的数据。__webpack_req
2022-04-10 20:21:21
1200
原创 webpack联邦模块之remotes方法
使用联邦模块后当前项目就会有两个依赖，一个是依赖共享模块，一个是依赖远程模块。运行时webpack/runtime/consumes用于解析共享模块，运行时webpack/runtime/remotes 用于解析远程模块。这两个模块对应的方法分别是__webpack_require__.f.consumes ****和__webpack_require__.f.remotes，是的这两个方法都是关在__webpack_require__.f上的，和上一篇文章中的__webpack_require__.f.j
2022-04-10 16:04:34
1948
原创 webpack联邦模块之webpack运行时
webpack是如何打包ES模块的？webpack是如何构建自身的模块运行时的？__webpack_require__这是整个webpack运行时的核心。该函数被用于根据模块Id从变量__webpack_module_cache__获取模块对应导出：有，直接返回没有，去__webpack_modules__上找到模块id对应的模块，获取对应模块导出。所以可以看出来__webpack_require__方法不用管模块具体是怎么来的。该方法调用的时候，调用方需要确保该模块id对应的模块已经存在
2022-04-02 16:29:50
1971
原创 antd表单控件的设计思想
antd对于form中输入控件的抽象十分简单，只要能接收value和onChange属性的组件都可以成为Form.Item的子组件，为Form对应的字段提供值。对于输入控件的抽象我认为这已经达到了极致，事件（onChange）产生值（value）。事件向上，值向下，完全符合React哲学。如何实现一个标准的输入组件？对于输入组件首先需要具备接收value和onChange属性的能力，这两个属性被提供的情况下这个组件被称为受控组件，它受到父组件控制，状态来自父组件。当父组件没有提供value的情况下该组件
2021-11-28 14:21:23
637
原创 允许同站跨域Nginx配置方案
基于目前前后端分离的趋势和微前端解决方案，并且很多web服务部署在Nginx服务器上，那么因为前后端分离导致的跨域问题需要迫切得到解决。因为是否允许跨域的因素有协议、域名、端口，只要有一个不一致就算跨域。大部分需求要求一个一级域名下所有子域名都被允许跨域，一个一个枚举配置十分繁琐，且要发版，为了规避这些问题，解决方案如下：方案一：map $http_origin $corsHost { default *; # 写上自己的默认值 "~https://csdn.net" h
2021-08-10 12:16:17
980
1
原创 Chrome不显示OPTIONS请求的解决方法2021版chrome90
在chrome90上之前展示跨域请求预检请求的方法失效了：在chrome地址栏总输入 chrome://flags/#out-of-blink-cors将其设置为Disabled后重启浏览器在chrome://flags找不到选项out-of-blink-cors。取而代之的是chrome将预检请求放到了控制台网络面板的 OTHER 面板中。要和XHR一起查看可以使用ctrl + click 或者 command + click。另外注意并不是所有跨域请求都会发送预检请求，之后非简单请求才
2021-07-23 09:48:57
5666
原创 TypeScript类型推论(Type Inference)
要完全理解类型推论需要完整理解类型上下文，并且理解TS对于是否可以使用类型推论是基于静态分析完成的。上下文类型应用在许多地方。常见的例子包括函数调用的参数，赋值的右手端位置，类型断言，对象和数组的成员，和返回语句。上下文类型还充当最佳公共类型中的候选类型。TS中需要为每个JS名字规定类型，而名字出现在对应的上下文中则会自动获得类型，若没有对应的上下文，这个名字则会自动获得类型any。名字：通过声明语句声明的名字，例如var、let、const、function a() {}、class A {}、i
2021-07-03 20:05:01
543
3
原创 TypeScript 交叉类型(intersection type)
在TS中和联合类型(union type)对应的还有交叉类型(intersection type)。交叉类型的出现主要为了组合多个对象类型(object type)，因为相对于interface，object type没法继承，那么就可以通过union type来实现混合的目的，从而实现继承的功能。type objtype1 = {a: string}type objtype2 = {b: string}type objtype = objtype1 & objtype2function
2021-06-19 14:00:52
3042
原创 TypeScript 联合类型(union type)
TS是JS的超集，在JS的基础上添加了一套类型系统，这样的TS可以被静态分析带来的好处显而易见。let val: string = 'val';声明一个string类型的变量val。let val: string = 'val';val = 1; // Type 'number' is not assignable to type 'string'.因为number类型和string类型并不兼容，在string类型值出现的地方并不能使用number类型指完成替换，所以在TS世界中给string
2021-06-19 12:48:37
3362
原创 网格布局之网格元素放置算法
接下来的表格项放置算法将网格项的自动位置解析为确定位置，确保每个网格项具有布局明确的网格区域。（Grid spans 不需要特别的解析；如果它没有明确指定，默认是1）注意：这个算法可以在显式网格中没有地方自动放置网格项的时候，导致在隐式网格中创建新的行或者列，每个网格单元（无论是显式还是隐式网格）都可以被occupied 或者 unoccupied。一个被网格项的网格区域（grid area）覆盖的单元是occupied的；否则这个单元是unoccupied。在算法执行期间单元的occupied/u
2021-04-27 12:52:19
596
原创 ESLint共享配置的两种方式eslint-plugin和eslint-config
使用ESLint很久了，也看了ESLint官方文档很多遍，但对于ESLint配置的规则还是不胜清楚，例如：{ "extends": ["plugin:prettier/recommended"]}上面extends的值为什么要"plugin:"开头？这里的prettier插件需要显示安装吗？像这样plugins: ["prettier"]。{ "plugins": ["prettier"], "rules": { "prettier/prettier": "error" }
2021-02-17 13:09:03
3303
6
原创 sessionStorage什么时候失效
最近在调试程序的时候无意间看到 cookie 的过期时间是 session，这个 session 表示的是什么时候过期？牵扯出来另一个存储方案 sessionStorage 存储的数据又是什么时候过期呢？在查找相关资料的时候总会看到会话结束的时候 cookie 会被清除，当然 sessionStorage 内的数据也会在会话结束的时候被清除。问题又来了会话是什么？会话什么时候会结束？暂时抛开这些问题，看看 sessionStorage 是怎么使用，和之前的持久化存储方案 cookie 有什么不同。S
2021-01-13 18:41:23
13277
12
原创 Nginx 使用try_files遇到的问题
背景：root /app/app;location / { try_files $uri $uri/ /dist/index.html;}使用React之类的的库来开发前端页面的时候，因为是单页应用所以需要上面的Nginx配置，用来在找不到html文件的时候内部重定向到/dist/index.html文件。服务器上的目录结构是/app/app/dist/assetes网站的静态资源都是存在/app/app/dist/下的，而服务器的根目录是/app/app/。域名：localhost.abc
2020-11-30 23:56:03
5176
原创 TypeScript中的class声明了什么
在初看TypeScript的时候在这里卡住的时间难以估计，并不能很好的理解”换个角度说，我们可以认为类具有 实例部分与 静态部分这两个部分。“这句话。今天再回头看这部分文档，在同事的帮助下突然有了比较通透的理解。class Greeter { static standardGreeting = "Hello, there"; greeting: string; greet() { if (this.greeting) {
2020-10-28 20:13:59
494
原创 代码风格之Prettier简介
多人协作中统一的代码风格有利于项目的发展这是共识，但是采用什么标准来统一代码这选择就相对纷杂。项目刚开始使用了ESLint来规范代码，但是ESLint默认是支持JavaScript，加上配置可以支持TypeScript，而样式的支持则需要再配置StyleLint，所以后面在项目中引入了Prettier这个统一的方案。因为最开始使用的ESLint的standard来规范JavaScript和TypeScript代码所以切换到Prettier的时候不方便做大的改动，所以Prettier的采用目的是规范Java
2020-09-28 11:31:37
860
原创 阅读react-redux源码(七) - 实现一个react-redux
1. 之前说过可以引起React组件更新的元素有两种，一个是props的更新，一个是state的更新，但是props的跟新放眼整个react应用也是state的更新。所以React应用中组件重新渲染只能通过state的更新。2. 在React中需要跨层级传递消息可以使用Context。3. Redux可以通过subscribe来订阅store中state的更新。
2020-08-02 17:02:34
259
原创 阅读react-redux源码(六) - selectorFactory处理store更新
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现阅读react-redux源码(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories阅读react-redux源码(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkF.
2020-08-01 13:59:34
255
原创 阅读react-redux源码(五) - connectAdvanced中store改变的事件转发、ref的处理和pure模式的处理
在[阅读react-redux源码(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkForUpdates](https://blog.csdn.net/letterTiger/article/details/107305480)中介绍了函数connectAdvanced是如何关联到store变动的，其实这个函数做的事情不仅仅有关联变动，还有对于store改变的事件转发、ref的处理和pure模式的处理。
2020-07-30 08:29:01
363
原创 阅读react-redux源码(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkForUpdates
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现阅读react-redux源码(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories终于到了最核心的connectAdvanced.js文件，在这里做的最主要的事情就是响应Provider提供的store的改变。除了响应store的.
2020-07-12 21:12:30
400
原创 阅读react-redux源码(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现mapStateToPropsFactoriesimport { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps'export function whenMapStateToPropsIsFunction(mapStateToProps) {.
2020-07-08 08:40:12
358
原创 阅读react-redux源码(二) - createConnect、match函数的实现
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现上一节看了Provider组件的实现，主要做的事情就是通过Context透传了来自redux的store和监听store变化的事件对象Subscription的实例。本节会深入到connect组件的内部查看实现方式，整个connect组件的实现相对复杂，并且巧妙。通过入口文件可以知道connect组件是/src/connect/c.
2020-07-07 08:37:21
487
原创 阅读react-redux源码 - 一
阅读react-redux源码零中准备了一些react、redux和react-redux的基础知识。从使用的例子中可以看出来顶层的代码中需要用一个来自react-redux的Provider组件提供redux的store，然后Provider的后代组件通过connect组件连接自己的业务组件就可以获取到通过Provider组件跨组件传递过来的store中的state值。所以我们先从Provider开始看源码的实现。因为源码很短，直接先贴出来整个源码如下：import React, { useMemo,
2020-06-20 23:12:18
306
原创 Access-Ctrol-Allow-Headers:*兼容问题导致的跨域失败
现象：通过抓包看到在部分客户端上跨域的非简单请求只发送一个预检的OPTIONS请求，之后的真实请求并没有发送。出现问题的环境：部分IOS低版本系统。windows系统微信内必现（2020-04-29）。分析通过上面条件OPTIONS请求发送成功，但是实际请求没有发送，可以推断出是服务端相关HTTP头没有设置正确，导致客户端认为服务端不允许当前源上的web应用跨域访问该资源，所以后面真正...
2020-05-05 22:10:25
2549
原创 CORS（跨域资源共享）
CORS（跨域资源共享）使用额外的HTTP头部来告诉浏览器，允许运行在origin(domain)上的Web应用访问来自不同源服务器上的指定资源。浏览器访问一个web应用，这个web应用会发很多的跨域请求，例如加载不同源的JS/CSS脚本，或者加载不同源图片等。但是并没有发现请求的异常，这些资源是可以正常返回的。而通过JS发送的跨域HTTP请求却时常得到错误，所以跨域请求很常见，但是浏览器对于请...
2020-04-06 20:56:55
498
原创 阅读react-redux源码 - 零
react的技术栈一定会遇到redux，而在react中使用redux需要使用react-redux，那么react-redux是怎么包装redux已适用react的呢？react-redux的原理是什么呢？带着这些问题，翻看了react-redux的源码，小有收获，写博客以记，方便以后翻阅。0. 准备在继续之前先回顾一些redux、react和react-redux必要的知识。redu...
2020-03-30 17:56:47
331
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人