- 博客(271)
- 收藏
- 关注
RSS订阅原创 计算机网络(3)数据链路层
数据链路层的基本概念结点：主机或者路由器都成为结点链路：网络中两个节点之间的物理通道，链路的传输介质主要有双绞线，光纤和微波。分为有线链路和无线链路。主要是物理通道。数据链路：网络中两个节点之间的逻辑通道，控制数据传输协议的硬件+软件+链路 = 数据链路帧：数据链路层的协议数据单元，封装网络层的数据报。数据链路层就是负责通过一条链路，从一个节点向另一个节点（该节点必须是物理链路直接相连）传送网络层交下来的数据包。就好像搬运工的角色。数据链路层功能概述在物理层提供服务的基础上，向网络层
2022-06-08 08:30:35
1704
1
原创 react源码debugger-各个hooks的逻辑实现(useState和useEffect)
了解react的整体流程，会有助于理解本文。hooks是什么？要了解hooks是什么，我们得先想知道react怎么执行函数组件。先看看函数组件的fiber是什么？const fiber = { type: f App(){}, //函数本身， memoziedState: {}, //hooks链表 updateQueue: {}, //effects链表 ....}对于函数组件，我们现在只需要关注他这几个属性就行了首先看到renderWithHooks函数，他是执
2022-05-29 22:59:30
256
原创 计算机网络（2）物理层
物理层基本概念物理层解决如何在连接各种计算机的传输媒体上传输数据比特流。而不是指具体的传输媒体。主要任务：确定与传输媒体接口的一些特性=》定义标准定义标准：不同的厂家在物理层定义的标准下实现不同的但是可以连接的接口。机械特性：定义物理连接的特性，规定物理连接时所采用的规格，接口形状，引线数目，引脚数量和排列情况。如电气特性：规定传输二进制位时，线路上信号的电压范围，阻抗匹配，传输速率和距离限制等。功能特性：某条线上出现的某一电平表示何种意义，接口部件的信号线的用途。规程特性：定义各条
2022-05-29 12:10:24
716
原创 一库让你快速搭建redux。auto-redux，跟普通hooks一样使用redux。
前言：借鉴于组内大佬开发的一个库的思路，模拟实现一个类似的。redux使用过redux的同学应该知道，redux每一个状态都需要编写特定的action和reducer，通过react-redux提供的hooks，useDispatch，useSelector去获取状态，派发aciton。比较麻烦。基于需要编写action和Reducer这一点，开发一个可以根据最初的state，自动生成action，reducer，我们使用状态的时候只需要跟useState等普通hooks一样。auto-redux介绍
2022-05-24 23:33:16
106
原创 计算机网络（1）
概念计算机网络：是一个将分散的具有独立功能的计算机系统，通过通信设备和线路连接起来，由功能完善的软件实现资源共享和信息传递的系统。计算机系统可以是手机，电脑等等。通信设备可以是路由等等。计算机网络，通信设备，线路等搭建成一个架子。而通过软件才能实现资源共享。就好比前三个组成一个毛胚房，不能住人，而通过软件装修之后，才可以住人。计算机网络是互联的，自治的计算机集合。互联：互联互通，通信链路。自治：无主从关系。计算机网络功能1数据通信（连通性）2 资源共享【 硬件（打印机）， 软
2022-05-24 09:03:43
425
原创 react源码debugger-commit阶段的完成
commit阶段上节讲到了rootFiber完成completeWork的时候，返回了一个状态，为RootInCompleted，表示工作完成。调用finishConcurrentRender方法，该方法会调用commitRoot，开启commit阶段。现在回顾一下，我们的fiber结构是// App组件const App: React.FC = () => { return <DD />;};// DD组件class DD extends Component {
2022-05-15 21:49:50
296
原创 react源码学习（2）
继上一篇react源码学习（1）创建FiberRoot和rootFiber//render调用方法function legacyRenderSubtreeIntoContainer( parentComponent: ?React$Component<any, any>, // mount是null children: ReactNodeList, // ReactElement container: Container, //容器 forceHydrate: boole
2022-05-15 00:34:28
129
原创 react源码学习(1)
jsxjsx会被转为createElement方法，看下源码这个方法export function createElement(type, config, children) {}接受三个参数：type元素类型，对于普通元素，就是div p ，对于函数组件，就是 函数本身， 对于类组件，就是类本身config 配置属性，比如ref, key, style…children 子元素这个方法的主要作用就是：1 分离props属性和特殊属性 let propName; const
2022-05-14 23:19:28
242
原创 计算机网络专题
osi七层模型七层模型和五层模型的对比open System Interconnection 适用于所有网络分层带来效能，将复杂的流程分解为几个功能相对单一的子进程。就好比以前项目之后服务器渲染，现在都分为了前端后端等。从下往上：物理层： 网卡，网线数据链路层： 交换机（传输数据，确认帧，发错重传）（数据帧）网络层：路由器（处理网络间路由）（数据包）传输层： TCP/UDP,提供可靠的连接传输数据功能（在不可靠的网络层上建立可靠的传输）。（数据段）会话层：验证，会话管理，维护应用之间通信，
2022-05-12 21:25:31
101
原创 从零实现一个脚手架
node支持esModule的两种方式：通过webpack搭建环境将webpack的target设为node，表示使用的是node环境，这样就可以使用node的一些内置模块，比如path。mjs第二中就是将js文件改为mjs。然后直接执行...
2022-05-09 22:54:53
378
原创 自动构建 grunt gulp
常用的自动化构建工具GruntGulpFlsGrunt基本用法Grunt的配置方法initConfig支持注册一些参数。module.exports = (grunt) => { grunt.initConfig({ foo: { bar: 213 } }) grunt.registerTask('test',()=>{ const bar = grunt.config('foo
2022-05-05 23:37:48
431
原创 掘金小课《React进阶实战指南》笔记
阅读了掘金小课《React进阶实战指南》,做的笔记加自己的一些总结。部分资源来自掘金小课《React进阶实战指南》认识JSXJsx统统被转为React.createElement,createElement参数：第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。其他参数：依次为 children，根据顺序排列。如<div>
2022-05-05 15:36:57
2365
原创 Yeoman
Yeomanyeoman官网Yeoman 是一个通用的脚手架系统允许创建任何的 app 。它可以迅速的搭建一个新项目，并且能够简化了现有项目的维护。使用步骤：1 明确需求 ( npm i -g Yo)2 找到合适的Generator3 全局范围安装Generator (npm i -g generator-node)4 通过Yo 运行对应的Generator( Yo node)5 通过命令行交互填写选项、6 生成项目结构自定义GeneratorGenerator实际上就是一个
2022-05-04 21:55:05
509
原创 js性能优化
JS性能优化内存内存：由可读写单元组成，表示一片可操作空间。管理：人为的操作一片空间的申请，使用和释放。内存管理：开发者主动申请空间，使用空间，释放空间等。js的垃圾js的内存管理是自动的。对象不再被引用时就是垃圾。对象不能从根上访问到时就是垃圾。（js的根可以理解为全局变量对象）GC算法垃圾回收机制的简写GC可以找到内存中的垃圾，并释放和回收空间。算法就是工作时查找和回收所遵循的规则。优点：发现垃圾立即回收。最大限度的减少程序暂停。缺点：循环引用对象无法回收时
2022-05-02 00:20:21
1661
原创 ECMAScript
ECMAScriptECMAScirpt与js的关系ECMAScript是一个脚本语言规范，通常看作是js的标准规范，但是js其实是ES的扩展语言。在ES钟，只是提供了最基本的语法，停留在语言层面。而js是实现了ES的标准，并且在基础之上实现了其他的功能。在浏览器中，js = ES + webApis(BOM,DOM)在node中，js = ES+nodeApis(fs,net,etc…)...
2022-04-30 23:57:49
104
原创 前端脚手架开发(1)
脚手架实现原理当我们在终端输入vue create xx的时候终端会去全局环境变量中，找到vue指令的方法查看create-react-app的位置，所有通过npm -g安装的包都会放入该目录下。在终端输入create-react-app之后、终端解析命令终端在上述的环境变量中找到creat-react-app命令脚本window在C:\Users\Administrator\AppData\Roaming\npm可以找到create-react-app.cmd，如上图，这是一个软链接
2022-04-30 21:35:38
773
原创 dumi组件库打包总结
最近在做页面抽成组件然后发布，期间也是遇到了很多问题和坑，现在顺便分享一下。dumi官网dumi为组件开发场景而生的文档工具，这里注重分享打包的过程，fatherdumi使用father打包，father文档1 使用rollup打包的时候报错。father提供了几种打包的方式，umd, cjs, esm。也支持使用rollup或者babel来打包成cjs/esm。一开始选择的是rollup来打包。出现的问题：rollup只支持esmodule，不支持commonjs，如果你的组件库引用
2022-04-26 17:34:49
2661
3
原创 jwt+nest.js，实现登录挤出功能
什么是JWTJWT的全称是JSON Web Token。一个jwt由三部分构成：Header，payload，Signature(签名)。Header部分主要规定了token的加密方式。如{alg: "xx", type: "JWT"}payload是token中包含的重要信息。Signature，就是header的base64的值+payload的base64+密钥组成的HS256算法，左边就是生成的token。JWT特点：防止CSRF，跨站请求伪造。适合移动应用无状态
2022-04-18 23:23:12
898
原创 基于net模块，从零实现websocket(ws模块)
WebsocketWebsokcet是H5开始提供的一种浏览器与服务器进行全双工通讯的网络技术通俗的讲，就是在客户端和服务器有一个持久的链接，两边可以在任意时间开始发送数据。属于应用层协议，它是基于TCP传输协议的，并复用HTTP的握手通道。websocket连接websocket服用了http的握手通道。具体就是，客户端通过http请求，与websocket服务端协商升级协议，协议升级完毕之后，后续的数据交换则遵守Websocket的协议。请求体中Upgrade表示升级为webso
2022-04-17 15:52:16
2767
1
原创 函数式编程
函数式编程FPFP是编程范式之一，除此之外，还有面向过程编程，面向对象编程.面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象。通过封装，继承和多态来演示事务事件的联系。函数式编程的思维方式：把现实世界的事物和事物之间联系抽象倒程序世界，对运算过程进行抽象本质：根据输入通过某种计算获的相应的输出。x->f (联系，映射) =>y ,即 y=>f(x)函数式编程中的函数不是指程序中的函数或者方法，而是数据中的映射关系，如y=sin(x)，x和y的关系。相同
2022-04-12 13:17:26
790
原创 react源码debugger-各种fiber的completeWork阶段
原生div p标签等的bieginWorkclass DD extends Component { render() { return <div>123</div>; }}上面调式了DD类组件的fiber，接着看类组件返回的子fiber，div标签的fiber是怎样的。对于原生html的fiber，fiber.tag是5export const HostComponent = 5; //原生标签hostComponent的fiber{altern
2022-04-10 23:16:59
182
原创 从零实现XMLhttpRequest
HTTP/IPHTTP/IP协议被称为传输控制协议/互联网协议，又称为网络通讯协议创建服务器const http = require("http");const fs = require("fs");const path = require("path");const { Buffer } = require("buffer");const url = require("url");const server = http.createServer((req, res) => {
2022-04-10 16:22:43
3210
2
原创 Reflect，IOC，DI
ReflectReflect对象与proxy对象一样，也是ES6为了操作对象而提供的新的API。JS的装饰器更多的是存在于对函数或者属性进行一些操作，比如修改他们的值，代理变量，自动绑定this等功能。但是却无法实现通过反射来获取究竟有哪些装饰器添加到这个类/方法上，Reflect Metadata就是做这个事情的。Reflect Metadata可以通过装饰器给类添加一些自定义的信息然后通过反射将这些信息提取出来。import "reflect-metadata";const
2022-04-07 10:37:02
255
原创 react源码解析-debugger阶段-类组件mount阶段的beginWork
类组件的beginWork。Appfiber执行完递阶段之后，轮到DDfiber执行递解端。对于类组件，在beginWork的时候，会调用updateClassComponent方法。类组件的fiber如：{alternate: nullchild: nullelementType: ƒ DD()key: nulllanes: 16mode: 1pendingProps: {}ref: nullreturn: FiberNode {tag: 0, key: null, stateN
2022-04-05 20:15:00
995
原创 编译原理2-语法分析-支持减除小括号
语法分析-支持减法除法小括号语法规则 加上减法除法规则就变了add -> minus | minus + add // 加法被 减法 | 减法+加法替换minus -> multiple | mulitple +|- add 减法被 乘法 或者 乘法加减加法multiple -> primary | primary *|/ multiple 乘法 被 Number 或者 Number 乘除 乘法primary -> NUMBER | (add) primar
2022-04-01 23:11:32
241
原创 ast编译原理-2-语法分析-简单的加乘分析
经过上一篇，通过有限状态机的概念编写了tokenzier，实现了简单的jsx语法分词。接着需要进行语法分析阶段。语法分析了解语法分析的原理和递归下降算法递归下降算法
2022-03-31 23:52:05
455
原创 react18初识
react18以于2020年3月29日发布正式版本。变更日志看看怎么使用react18。启动react18只支持并发模式，也就是不支持ReactDOM.render启动项目需要这样启动ReactDOM.createRoot( document.getElementById('root')).render(<App/>)批量更新在Councurrent模式中，更新是以优先级为依据进行合并的。18之前的批量更新，setTimeout或者Promise.then的更新，react无
2022-03-30 23:51:36
1376
原创 ast编译原理-1-词法分析
编译原理实现jsx语法转成js语法的编译器。如将<h1 id=“title”><span>hello</span>world</h1>转成React.createElement("h1", {id: title}, React.createElement("span", null, hello),"world")步骤差不多就是，jsx代码->ast -> 处理转换ast -> ast生成js代码 -> js代码
2022-03-29 23:43:56
1751
原创 vite实战
Pnpm很好的文章pnpm相对比npm和yarn有很大速度的提升。因为：对于每个项目的依赖，yanr和npm会根据package.json每次都去下载依赖，导致项目越多，依赖就代码就越多。而对于pnpm，他会通过hard link的模式，在计算机的虚拟硬盘目录下创建一个store目录，将依赖存放到里面去，下次另一个项目需要某些依赖的时候，pnpm会直接来这store目录获取到代码，就不用重复下载。对于版本不同的依赖，版本之间不同的文件会被存储起来。例子：在项目中安装express依赖。在项
2022-03-28 22:00:14
604
原创 浏览器渲染原理
进程当启动一个程序时，操作系统会为该程序分配内存，用来存放代码，运行过程中的数据，这样的环境叫做进程。一个进程可以启动和管理多个线程，线程之间可以共享进行数据，任何一个线程出错，都可能导致进程崩溃。Chrome的进程架构浏览器进程： 负责界面显示，用户交互，子进程管理，提供存储等渲染进程：排版引擎和V8引擎主要运行在该进程中，负责把html, css, js转变成网页等等。网络进程：主要处理网络资源加载（HTML, CSS ,JS等）GPU进程：3d绘制，提高性能。插件进程：chrom
2022-03-28 19:37:47
1413
3
原创 react源码解析-debugger阶段-函数组件App的beginWork阶段
各种类型fiber的beginWork函数组件的beginWork接第一章，我们走完了createRoot到rootFiber执行完beginWork阶段，workInprogress.child也就是App函数的fiber被创建完毕之后的阶段。rootFiber执行完递阶段之后，返回了App fiber,将App fiber赋值给workINprogress.当performUnitOfWork执行完毕之后，当前浏览器无多余时间，等待下次调度执行performConcurrentWorkOnRo
2022-03-27 18:00:37
1199
原创 rollup打包工具
Rollupwebpack的打包比较繁琐，打包体积比较大。rollup主要是用来打包js库的。vue/react等都在用rollup作为打包工具。使用安装依赖yarn add @babel/core @babel/preset-env @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript loadsh rollup rollup-plugin-babel postcss rollup-plu
2022-03-27 14:16:13
2932
原创 webpack模块联邦
模块联邦weback的模块联邦原理和import（）相似，也是promise的原理。，通过webpackjsonp加载异步代码，只不过，获取异步代码变成发请求去其他项目获取代码而已。动机模块联邦得动机是为了不同开发小组间开发一个或者多个应用。应用将被划分为更小的应用快，一个应用快，可以是比如头部导航或者侧边栏得前端组件。也可以是数据获取逻辑得逻辑组件每隔应用块由不同得组开发应用或应用块共享其他应用块或库。过程每个应用亏块都是一个独立得构建，这些构建都将编译成容器。容器可以被其他应用或
2022-03-26 23:01:32
1891
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人