笔记
文章平均质量分 85
coderlin_
幸运=99%的努力+1%的运气
展开
-
从零实现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 · 3434 阅读 · 2 评论 -
Reflect,IOC,DI
ReflectReflect对象与proxy对象一样,也是ES6为了操作对象而提供的新的API。JS的装饰器更多的是存在于对函数或者属性进行一些操作,比如修改他们的值,代理变量,自动绑定this等功能。但是却无法实现通过反射来获取究竟有哪些装饰器添加到这个类/方法上,Reflect Metadata就是做这个事情的。Reflect Metadata可以通过装饰器给类添加一些自定义的信息然后通过反射将这些信息提取出来。import "reflect-metadata";const原创 2022-04-07 10:37:02 · 403 阅读 · 0 评论 -
浏览器渲染原理
进程当启动一个程序时,操作系统会为该程序分配内存,用来存放代码,运行过程中的数据,这样的环境叫做进程。一个进程可以启动和管理多个线程,线程之间可以共享进行数据,任何一个线程出错,都可能导致进程崩溃。Chrome的进程架构浏览器进程: 负责界面显示,用户交互,子进程管理,提供存储等渲染进程:排版引擎和V8引擎主要运行在该进程中,负责把html, css, js转变成网页等等。网络进程:主要处理网络资源加载(HTML, CSS ,JS等)GPU进程:3d绘制,提高性能。插件进程:chrom原创 2022-03-28 19:37:47 · 1564 阅读 · 3 评论 -
axios实现
类型定义 import { AxopsInterceptroManager } from './AxiosINterceptoManager' interface AxiosInstace<T = any> { // request方法 (config: AxiosRequestConfig):Promise<AxiosResponse<T>> //T是resolve(v)的v值的定义, interceptors: { re原创 2022-03-05 21:16:31 · 683 阅读 · 0 评论 -
前端自动化测试-BDD-集成测试
何为BDD(Behavior Driven Development)行为驱动的开发,是一种敏捷软件开发的技术,他鼓励软件项目中的开发者,QA和非技术人员或商业参与者之间的协作。以上节TDD的代码为例子,将测试文件全部删除。从BDD的角度出发,开发人员不需要先写测试用例,直接编写代码即可。编写完代码之后,第二步就是需要站在用户的角度,怎么去测试,测试的重点是什么?从用户的行为角度出发,编写我们的测试用例。因为用户行为是连续的,比如toDOList案例,用户希望在输入框输入内容按下回车后,l原创 2022-03-05 14:07:13 · 1275 阅读 · 0 评论 -
前端-自动化测试react项目-TDD
TDD何为tdd (测试驱动的开发)流程: 1 编写测试用例 2 运行测试,测试用力无法通过测试 3 编写代码,使测试用例通过测试 4 优化代码,完成开发。 5 新增功能,重复以上步骤。以测试为驱动流程的开发好处: 1 长期减少回归bug 2 代码指令更好(组织,可维护性) 3 测试覆盖率高 4 错误测试代码不高基本环境配置脚手架create-react-app已经内置了jest。自己搭配的项目需要安装,yarn add jest ts-jest babel-jest @type原创 2022-03-05 10:03:36 · 927 阅读 · 0 评论 -
前端二进制-实战
二进制对象ArrayBufferTypedArrayDataViewBlobObject UrlArrayBufferArrayBuffer对象用来表示通用的,固定长度的原始二进制缓冲区。他是一个字节数组,通常在其它语言中称为byte array不能直接操作ArrayBuffer的内容,而是要通过类型数组对象(TypedArray)或者DataView对象来操作。他们会将缓区中的数据表示为特定的格式,并通过这些格式来读取内容。const buffer = new ArrayBuffe原创 2022-03-04 21:38:50 · 422 阅读 · 0 评论 -
前端二进制
计算机中的数值表示进位计数值:基数R+位权w基数RR代表基本数码的个数,二进制就是0和1这2个数。R进制的主要特点是逢R进1.原创 2022-03-03 22:59:59 · 421 阅读 · 0 评论 -
xss,csrf,xsrf
Xss跨站脚本攻击(Cross Site Scripting)原理: HTML是一种超文本标记语言,通过将一些字符特殊地对待来区别文本和标记,例如,小于符号(<)被看作是HTML标签的开始,与之间的字符是页面的标题等等。当动态页面中插入的内容含有这些特殊字符(如<)时,用户浏览器会将其误认为是插入了HTML标签,当这些HTML标签引入了一段JavaScript脚本时,这些脚本程序就将会在用户浏览器中执行所以,当这些特殊字符不能被动态页面检查或检查出现失误时,就将会产生XSS漏洞。案例原创 2022-03-03 08:48:54 · 465 阅读 · 0 评论 -
V8引擎学习
计算机模型寄存器中央处理器的组成部分寄存器是有限存储容量额高速存储部件可以用来暂存指令,数据和地址存储器内的数据可以用来执行算术和逻辑运算。寄存器内的地址可用于指向内存的某个位置内存随机存取存储器也叫内存,英文缩写RAMRAM是与CPU直接交换数据的内部存储器RAM工作时可以从任何一个指定地址写入或者读出信息RAM在计算机中用来暂时存储程序,数据和中间结果。32位操作系统支持的内存最多为2的32次方,也就是4g。0x00000001 => … => 0xF原创 2022-03-03 08:41:03 · 1737 阅读 · 0 评论 -
前端优化策略
网络优化策略减少http请求,合并js,css,合理内嵌css,js。合理设置服务端缓存,提高服务器处理速度// 强缓存 Cache-Control/Expires 协商缓存 服务器设置Etag/Last-Modified,请求携带验证体:if-none-match/if-modified-since(304)避免重定向,重定向会降低响应速度(301, 302)使用dns-prefetch,进行dns预解析采用域名分片技术,将资源放到不同的域名之中,解决同一个域名最多处原创 2022-02-24 09:20:43 · 799 阅读 · 0 评论 -
浏览器渲染原理 1
进程与线程进程是操作系统资源分配的基本单位,进程种包含线程。线程是由进程所管理的,为了提升浏览器的稳定性和安全性,浏览器采用了多进程模型。浏览器进程: 负责界面显示,用户交互,子进程管理,提供存储等渲染进程:每个页面都有单独的渲染进程,核心用于渲染页面网络进程:主要处理网络资源加载(HTML, CSS ,JS等)GPU进程:3d绘制,提高性能。插件进程:chrome种安装的一些插件。从输入url到浏览器显示,发生了什么?从浏览器进程看:输入url或者关键字。如果是关键字,根据原创 2022-02-24 09:18:45 · 789 阅读 · 0 评论 -
记录一次需要删除某个commit的代码。
前言:我的代码不能上线,但是我合并到了clone上去,此次merge clone的comit我们称之为"AAA"。clone上去有别人正在开发要上线的代码。原本我以为回退一下就行,结果发现有其他人拉了clone合并,导致我不能上线的代码在其他人的分支上也存在了,而且还push到clone更新了。解决办法:第一步:先让我们的代码消失基于clone建一个clone-test分支, 执行git revert “合并分支id” -m ;“合并分支id”,指的是我merge 到c lone的那一次原创 2022-01-14 11:36:29 · 168 阅读 · 0 评论 -
Vue源码 模拟Vue 3 实现数据的双向绑定
主要是输入框,这时候我们需要创建于给setVal方法实时修改数据。这里如果我们绑定的是一个对象,那我们需要遍历到最底层去修改这个数据,所以取数组长度并且做一个判断,就是遍历到底的时候我给他赋值。这样就实现数据双向绑定了,数据双向绑定总结 主要是v-model,当数据影响视图可以直接利用watcher的回调函数来更新视图,当视图影响数据时,定义一个setVal方法,将最新的值与keys传进去,在里面通过修改vm.$data来修改数据,从而达到视图影响数据效果。实现代理,就是每次不用写this.$原创 2020-12-06 16:56:03 · 1082 阅读 · 0 评论 -
Vue 源码 模拟Vue2 实现数据劫持Observer 以及数据修改更新视图
定义一个Observer类,将数据传进去监听一个个取出来,给data里面的每个之进行监听创建一个Wathcer类,用来创建监听者每个watcher都有一个update方法,方便调用取修改数据。创建一个Dep类 收集所有依赖者,创建Observer与Watcher的联系。一开始Complie更新视图的时候,我们就必须相对应的创建一个watcher,接着,通过watcher里面调用data的值,去调用了get函数,这时候我们在get函数里面,通过Dep.target去获取这个watc原创 2020-12-06 15:40:58 · 352 阅读 · 0 评论 -
Vue源码 模拟Vue1(模板编译Complie的完成)
双向数据绑定个人笔记,如有错误请见谅。Vue.js的做法是采用数据劫持加发布者订阅模式,通过object.defineproperty()来劫持各个属性的getter与setter方法,setter监听值改变,getter返回改变后的值,在数据变动的时候,object.property()的set方法监听数据,通过get方法返回修改后的数据,通过Dep.notify方法通知订阅者(watcher),让订阅者去攻击视图更新数据。模拟vue代码主要实现三件事实现一个指令解析器Complie实现一个数原创 2020-12-05 19:47:20 · 202 阅读 · 0 评论