- 博客(40)
- 收藏
- 关注
RSS订阅原创 Node 网络详解
1、 OSI & TCP/IP模型设计1.1 OSI七层模型应用层：（Application Layer）表示层：（Presentation Layer）会话层：（Session Layer）传输层：（Transport Layer）网络层：（Network Layer）数据链路层：（Data Link Layer）物理层：（Physical Layer）1.2 TCP/IP协议应用层传输层网络层网络接口层1.3 OSI与TCP/IP协议间的关系1.3 每层间的合作与加工2、
2024-08-21 14:46:30
756
原创 Node 基础
1、什么是Node.js2、CommonJS模块化2.1 CommonJS规范2.2 CommonJS示例3、Node.js核心模块使用3.1 HTTP模块(常用)3.2 URL模块(常用)3.3 Query String模块(常用)3.4 Path模块(常用)3.5 File System模块(常用)3.6 Modules:CommonJS模块3.7 Modules:ECMAScript模块3.8 Modules:node:module API3.9 OS模块
2024-08-19 17:58:26
871
原创 TypeScript
Typescript 基础语法类型定义类型联合与交叉类型断言Typescript 泛型与类型体操泛型的概念和使用 interface 接口extends 的重要性Infer 推断Typescript 综合
2024-08-18 18:33:48
829
原创 ES6 & ESNext 规范及编译工具简介
变量定义新形式（let、const）解构语法模板字符串箭头函数ES6新增的数组方法Set和Map面向对象编程——class 语法生成器 generator异步处理——callback、Promis
2024-08-18 14:18:24
883
原创 Vue 状态管理 & Vue CLI
1、状态管理2、集中状态管理2.1 Vuex2.1.1 Vuex核心概念2.1.2 Vuex Store实例2.1.3 Vuex Getter2.1.4 Vuex Mutation2.1.4 Vuex Actions2.1.4 Vuex Module2.2 Pinia2.2.1功能增强3、Vuex 实现原理4、Pinia 实现原理5、CLI5.1 实现
2024-07-24 13:53:49
1018
原创 7、 函数式编程（纯函数的好处、柯里化使用和实现、代码组合compose、pipe）
我们追求的是那种可靠的，每次都能返回同样结果的函数，而不是像 splice 这样每次调用后都把数据弄得一团糟的函数，这不是我们想要的。4、curried的if分支判断，参数个数3，小于4，继续返回一个函数Fn2(函数名字不重要，没有名字也可以)，Fn2的函数体是一个执行。柯里化是一种函数的转换，它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)©。纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用（不会影响别人）。我们把它们重命名一下。
2024-06-19 17:41:58
869
原创 5、JavaScript 模块化详解
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信；CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅；
2024-06-17 15:42:32
576
原创 4.2、浏览器请求详解（ajax、fetch、axios使用，手写ajax）
Ajax 是Async Javascript And Xml的简称，它是原生JavaScript的一种请求方案，利用 XMLHttpRequest 进行异步请求数据，实现无感刷新数据；Fetch 是 ES6 新推出的一套异步请求方案，它天生自带 Promise，同时也是原生的，如果在较小项目中为了项目大小着想和兼容性不是那么高的前提下不妨可以用它来进行异步请求也是不错的；Axios 是基于 Ajax 和 Promise 封装的一个库，可以利用Promise来更好的管控请求回调嵌套造成的回调地狱；
2024-06-16 22:10:34
1021
原创 4.1、浏览器事件详解（DOM事件、事件捕获&事件冒泡、事件对象、事件委托；浏览器事件兼容写法）
在 testUl捕获事件上使用 event.stopPropagation()，事件执行到testUl捕获，不会往下执行testIi捕获->testIi冒泡->testUl冒泡->testDiv冒泡->document冒泡->window冒泡，阻止事件向后传播。在 testIi冒泡事件上使用 event.stopPropagation()，事件执行到testIi冒泡，不会往下执行estUl冒泡->testDiv冒泡->document冒泡->window冒泡，阻止事件向后传播。最先触发 click 事件。
2024-06-15 10:29:03
930
原创 3.3、实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有N个。
实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有N个。3、add返回的是一个Promise，因为后面有then调用，所以需要用resolve返回结果。2、执行完一个任务后，加入新任务进行执行。1、判断任务是执行还是进入等待。
2024-06-15 10:23:15
256
原创 3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）
超详细手写Promise；实现all，race，allSettled，any；async/await和Promise关系；async/await使用
2024-06-13 12:14:13
1342
原创 2、面向对象编程/原型及原型链(手写call，apply，bind，new；创建对象的多种方式&优缺点；继承的多种方式&优缺点)
根据作者的意思，构造函数和普通函数的区别在于：当使用new+构造函数创建对象时，如果构造函数内部没有return语句，那么默认情况下构造函数将返回一个该类型的实例，但如果构造函数内部通过return语句返回了一个其它类型的对象实例，那么这种默认的设置将被打破，构造函数最终返回的实例类型将以return语句中对象实例的类型为准。原型链继承思路：让子类的原型等于父类的实例，如下图，原型链的关键在于子类的原型等于父类的实例Student.prototype=new Person()，形成原型链。
2024-06-06 21:02:49
891
原创 1、this指针/闭包/作用域
前景，ECStack = [ globalContext ];压入全局上下文函数checkscope被创建，保存父级作用域链到函数内部属性 [[scope]]2.创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈3.函数checkscope开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链checkscopeContext = {//执行上下文添加作用域链。
2024-06-04 15:17:34
970
原创 手写防抖debounce
防抖debounce例子多使用内存、缓存或其他方法减少cpu计算量，减少网络加载耗时（空间换时间）从何入手让加载更快减少资源体积，压缩代码，压缩图片减少访问次数：合并代码，ssr服务器端渲染，缓存，合并图片雪碧图使用更快的网络：CDN让渲染更快（没有等待，没有无用功，没有重复渲染）css放在head，js放在body最下面尽早开始执行JS，用DOMContentLoaded触发懒加载（图片懒加载）对dom查询进行缓存频繁dom的操
2023-02-06 14:59:13
150
原创 前端性能优化
前端性能优化性能优化原则从何入手性能优化原则多使用内存、缓存或其他方法减少cpu计算量，减少网络加载耗时（空间换时间）从何入手让加载更快减少资源体积，压缩代码，压缩图片减少访问次数：合并代码，ssr服务器端渲染，缓存，合并图片雪碧图使用更快的网络：CDN让渲染更快（没有等待，没有无用功，没有重复渲染）css放在head，js放在body最下面尽早开始执行JS，用DOMContentLoaded触发懒加载（图片懒加载）对dom查询进行缓存频繁dom操作，合并到一起插
2021-11-08 15:55:02
122
原创 页面加载过程
页面加载过程JS上线之后在哪里运行页面加载过程JS上线之后在哪里运行运行环境即浏览器(server端有nodejs)下载网页代码，渲染出页面，期间会执行若干JS要保证代码在浏览器中：稳定且高效页面加载过程Q:从输入url到渲染出页面的整个过程?Q:从输入url到渲染出页面的整个过程?...
2021-11-08 13:37:29
436
原创 https加密方式和过程解析
https加密方式和过程解析http 和 httpshttps加密方式https证书总结解析过过程http 和 httpshttp是明文传输，敏感信息容易被中间劫持https=http+加密，劫持了也无法解密现代浏览器已开始强制https协议https加密方式对称加密：一个key同负责加密、解密服务器端传输key给客户端，服务器和客户端都有key用同一个key进行加密不安全，劫持内容是没办法解密，但是key也是传输过来的，也可能被劫持，可以用劫持的key解密传输内容非对称加
2021-11-08 10:19:31
137
原创 BOM操作
浏览器相关操作如何识别浏览器的类型 navigator（常用）屏幕宽高 screen分析拆解url location （常用）history 页面访问记录
2021-11-07 17:50:16
67
原创 ajax和跨域
JS Web API-ajaxXMLHttpRequest状态码跨域：同源策略，跨域解决方案XMLHttpRequest状态码跨域：同源策略，跨域解决方案//getconst xhr = new XMLHttpRequest()xhr.open('GET','/api',false)xhr.onreadystatechange=function(){//img.onlad=function(){} if(xhr.readyState===4){ if(xhr.status===200){
2021-11-07 16:11:56
65
原创 JS Web API-事件
JS Web API-事件事件绑定和事件冒泡事件代理描述事件冒泡的流程无线下拉图片列表，如何监听每个图片的点击事件绑定和事件冒泡function bindEvent(elem,type,fn){ elem.addEventListener(type,fn)}const a=document.getElementById('link1')bindEvent(a,'click',e=>{ // console.log(e) e.preventDefault()//阻止默认行
2021-11-07 14:04:01
84
原创 宏任务和微任务
宏任务和微任务介绍event loop 和 DOM 渲染宏任务和微任务的区别介绍宏任务（macro task）和微任务（micro task）宏任务：setTimeout setInterval DOM 事件 ajax微任务：Promise（对于前端来说）awiat，async微任务比宏任务执行的更早console.log(100)setTimeout(() => { console.log(200)})Promise.resolve().then(() => {
2021-11-06 18:55:46
252
原创 for...of的应用场景
async/await和Promise的关系async/await 是消灭异步回调的终极武器但是和Promise互不相斥两者相辅相成相辅相成：执行async函数，返回的是Promise对象await相当于Promise的thentry…catch 可捕获异常，代替了Promise的catch执行async函数，返回的是Promise对象async function fn1(){ return 100 //相当于return Promise.resolve(100)
2021-11-06 17:54:28
396
原创 async/await和Promise的关系
async/await和Promise的关系async/await 是消灭异步回调的终极武器但是和Promise互不相斥两者相辅相成相辅相成：执行async函数，返回的是Promise对象await相当于Promise的thentry…catch 可捕获异常，代替了Promise的catch执行async函数，返回的是Promise对象async function fn1(){ return 100 //相当于return Promise.resolve(100)
2021-11-06 17:09:03
2255
原创 async/await的使用
Promise的三种状态async/awaitasync/await异步回调callback hellPromise then catch 链式调用，但是也是基于回调函数async/await是同步语法，彻底消灭回调函数定义 function loadImg(src){ return new Promise((resolve,reject)=>{ const img =document.cteateElement('img') img.onload=()=>
2021-11-06 16:05:10
826
原创 Promise的三种状态
Promise的三种状态三种状态状态的表现和变化then和catch对状态的影响三种状态pending 过程中，还没有结果，resolved 已经成功解决了rejected 被拒绝了，失败pending->resolved或 pending->rejected 变化不可逆const p2=new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve() })})conso
2021-11-06 14:47:52
307
原创 event loop（事件循环/事件轮询）
event loop详解什么是event loopevent loop的执行过程DOM事件和event loop的关系什么是event loopJS是单线程运行的异步要基于回调来实现event loop 就是异步回调的实现原理event loop是事件轮询，一直去回调队列里查询有没有可以执行的异步函数，有的话，就放回主线程的栈里执行event loop的执行过程js 如何执行从前到后，一行一行执行如果某一行执行报错，则停止下面代码的执行先把同步代码执行完，再执行异步co
2021-11-06 11:21:41
271
原创 JS基础-异步
前端基础知识typeof能判断的类型何时使用=== 何时使用==window.onload 和 DOMContentLoaded 区别js创建10个标签，点击弹出对应的序号手写节流throttle 和防抖 debouncePromise解决什么问题typeof能判断的类型你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。何时使用=== 何时使用==去博客设置页面，选择一款你
2021-11-06 09:40:54
138
原创 JS基础-作用域和闭包
JS基础-作用域和闭包闭包this的赋值 （在函数执行的确定的）手写bind函数闭包 作用域应用的俩种特殊应用：函数作为参数为传递 传递的函数调用原函数的变量函数作为返回值被返回 返回的函数调用外面函数的变量第一个打印100，第二个打印100闭包：自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方所以自由变量的查找都是在函数定义的地方this的赋值 （在函数执行的确定的）作为普通函数 指向window使用call apply bind
2021-11-05 23:29:29
80
原创 JS基础-原型和原型链
JS基础-原型和原型链如何用class实现继承如何理解JS原型（隐式原型和显示原型）如何用class实现继承创建类class Student{ constructor(name,number){ this.name=name this.number=number } sayHi(){ console.log(`姓名 ${this.name} ,学号 ${this.number} `) }}//通过类 new 声明对象/实例const x
2021-11-05 15:45:35
491
原创 JS基础-变量
前端基础知识2-JS基础-变量JS值类型和引用类型的区别typeof运算符手写JS深拷贝变量计算-类型转换JS值类型和引用类型的区别基本数据类型：数值，布尔，string，null，undefind，symbol（存在栈里）引用类型：Object、Function 、Array、RegExp、Date （存在堆里，栈存地址）typeof运算符typeof 数组，对象和null都会被判断成obj，这是因为null是000000二进制，以000开头的二进制会被判断成obj补充Object
2021-11-04 17:12:21
107
原创 前端面试基础知识-html&css
前端基础知识1如何理解HTML语义化默认情况下，哪些HTML标签是块级元素、哪些是内联元素？盒模型宽度计算margin 纵向重叠问题margin 负值问题BFC理解与应用如何理解HTML语义化html语义化对人友好，易读。标签带有语义对搜索引擎也易读默认情况下，哪些HTML标签是块级元素、哪些是内联元素？display：block/table; 有div h1 h2 table ul ol p等display：inline/inline-block；有span img input
2021-11-04 14:59:54
316
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人