- 博客(25)
- 收藏
- 关注
RSS订阅原创 项目中遇到的难点，如何解决的？
RSA：使用非对称加密的方式进行传输，前端用公钥进行加密，服务端使用密钥进行解密。用iframe嵌入，使用postMassage()通信。Web Component 组件化开发，如何拆分组件？新框架如何嵌入到老框架中？
2023-04-26 17:31:12
193
原创 react相关问题
在React要加载或更新一颗组件树之前，会调用各组件的生命周期函数 --> 计算和对比Virtual DOM --> 更新真实的DOM树。是从React v16开始引入的新协调引擎，用来解决主线程长时间被 JS 运算占用的问题，实现Virtual DOM的增量渲染。利用分片的思想，把耗时长的更新任务拆解成一个个小的任务分片，每执行完一个小的任务分片，都归还一次主线程。就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state。过程会调用到这几个生命周期函数，但是如果是函数组件的时候不影响。
2023-04-26 13:28:44
106
原创 谈谈你对 vue 的理解
vue 是一套用于构建用户界面的渐进式框架，vue 的核心库只关注视图层。vue 的渐进式表现在刚开始不会一股脑的把一些概念全抛给你，而是让你根据自己的需求来不断扩充。vue 操作的是虚拟 DOM，采用 diff 算法更新 DOM，比传统的 DOM 操作更加的高效；vue 提供数据响应式、基于配置的组件系统以及大量的指令等，这些让开发者只需关心核心业务；vue比较灵活，可以根据需要引入 vue-router、vuex、vue-cli 等工具；不支持IE8及以下版本。
2023-04-23 10:44:22
905
原创 Vue双向数据绑定和Vue响应式
当属性的值发生改变时，会自动地检测到变化并更新对应的视图。双向数据绑定和响应式都是 Vue 中非常重要的概念，但是它们的区别在于前者是一种数据流动的方式，后者是实现数据绑定的机制。Vue 首先对 data 对象中的每个属性都创建了一个观察者对象，即一个 Dep 对象，这个对象会收集所有订阅该属性变化的观察者对象（即 Watcher 对象）。当用户输入时，事件监听器会调用该元素的 updateModelValue() 方法，该方法会将输入框的值赋给对应的 data 属性，并通知该属性的 Dep 对象。
2023-04-19 15:10:59
490
原创 遇到的兼容性问题
在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置。解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；解决方案:加入-webkit-overflow-scrolling:touch;解决方案：内容列表框也是fixed定位，这样不会出现fixed错位的问题。解决方案：统一使用 cursor:pointer。解决方案：css增加cursor:pointer。碰到频率: 100%
2023-04-18 22:22:32
195
原创 输入 URL 到页面渲染的整个流程
script src="script.js"> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。服务端收到连接请求报文段后，如果同意连接，则会发送一个应答。
2023-04-03 16:20:33
217
原创 webpack的构建原理
解析入口文件：Webpack 通过配置文件中的入口文件（entry）来确定构建的入口，Webpack 会从入口文件开始递归地解析依赖关系，将所有依赖的模块都加入到构建过程中。生成输出文件：Webpack 将打包后的代码生成指定的输出文件，可以是单个文件或多个文件。生成依赖图和 Chunk：Webpack 根据模块之间的依赖关系，生成依赖图，并将相互依赖的模块打包成一个 Chunk（代码块）。以上就是 Webpack 的构建原理，它的核心是依赖关系图和代码打包，同时也涉及到模块的解析、转换和编译等过程。
2023-04-02 21:29:16
161
原创 js面向对象的理解
类：在 JavaScript 中，你可以使用类来定义对象的类型。你可以在类中定义属性和方法，然后使用该类创建多个对象。构造函数是一个普通的函数，只不过使用 new 运算符来调用它时，它将返回一个新的对象实例。对象：JavaScript 中的对象是一种数据结构，它包含一些属性和方法。属性是对象的特征，而方法是对象的行为。这是创建对象最简单的方式之一，可以直接使用花括号 {} 来创建一个对象，并在其中定义属性和方法。可以使用 ES6 中引入的 class 关键字来创建对象，它本质上也是一种构造函数的语法糖。
2023-03-31 15:04:05
354
原创 原型和原型链
在 JavaScript 中，每个对象都有一个称为“原型”（Prototype）的内部链接，它指向另一个对象，即该对象的原型。在原型链中，当访问一个对象的属性或方法时，如果该对象本身不存在该属性或方法，则会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶部为止。可以使用 Object.create() 方法来创建一个具有指定原型的对象，也可以通过设置对象的 prototype 属性来指定它的原型。通过以上方式，可以创建具有原型和原型链的对象，进而实现对象之间的继承和属性的共享。
2023-03-31 11:39:08
55
原创 qiankun微前端原理
Qiankun 是一个基于 single-spa 的微前端框架，通过将不同的子应用打包成独立的 JavaScript 包，并通过路由或者菜单等方式进行集成，来实现多个子应用在同一页面内无缝协同工作的目的。使用 Proxy 对全局变量进行代理。为了防止子应用修改全局变量导致其他子应用受影响，Qiankun 会使用 Proxy 对全局变量进行代理，防止子应用直接修改全局变量。通过以上的技术原理，Qiankun 实现了多个子应用的协同工作，可以根据需要进行灵活的组合和拆分，从而提高开发效率和系统可维护性。
2023-03-31 11:10:54
2554
原创 关于前端性能优化
优化加载速度：减少资源体积：压缩代码；减少访问次数：合并代码、缓存；使用CDN；优化渲染速度：CSS放在head，script 放在 body 底部；尽早开始执行js，用 DOMContentLoaded 触发；图片懒加载；对DOM 查询进行缓存；频繁的 DOM 操作，合并到一起插入 DOM 结构；使用防抖和节流；安全方面：XSS 跨站请求攻击和预防；XSRF 跨站请求伪造和预防；输入 url 到页面加载的过程：1.DNS解析，通过域名
2022-02-03 15:34:52
1255
原创 防抖和节流
防抖：使用场景：频繁输入或操作，最后才触发如：1.监听输入框，用户输入完成或暂停后，才触发 change 事件2.防止按钮重复点击/** * @desc 函数防抖 * @param fn 函数 * @param delay 延迟执行毫秒数 */ function debounce(fn, delay = 300) { // timer 是闭包中的 let timer = null; return function () {
2022-02-03 14:18:30
624
原创 Linux常用命令
ls 查看文件，平铺ls -a 查看所有文件（包括隐藏文件）ll 查看文件，列表clear 清屏mkdir xxx 创建文件夹rm -rf xxx 删除文件夹 -rf 代表强制递归删除，删除单个文件可以不加 -rfmv index1.html index2.html 修改文件名mv index.js ../index.js 把index.js移动到上级目录cd a.js a1.js 拷贝touch a.js 新建文件vim a.js 新建文件并且打开打开文件后，i
2022-02-02 21:47:50
1033
原创 http 总结
目录一、常见状态码二、http headers1.常见的 Request Headers2.常见的 Response Headers三、http 缓存1.缓存的作用2.哪些资源可以被缓存？3.缓存策略（强制缓存 + 协商缓存）强制缓存协商缓存（对比缓存）缓存流程图4.刷新的方式对缓存的影响一、常见状态码1xx 服务器收到请求 2xx 请求成功 3xx 重定向 3...
2022-02-02 16:10:13
2538
原创 封装事件监听函数
利用事件冒泡的机制，把事件绑定到父元素上，适用于瀑布流场景，可以减少浏览器的内存占用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件</title></head><body> <div> <button id="btn">按钮</button>
2022-01-26 21:02:43
930
原创 微任务和宏任务
事件循环micro task 和 macro task 表示异步任务的两种分类。js语言为单线程，同一个时间只能做一件事，为了防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于Browsing Context，一种是基于Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。任务队列同步任务..
2022-01-25 22:12:51
44
原创 JS几种遍历方式
for、for...in、forEach ，都是常规的同步遍历for...of 常用于异步的遍历使用场景：function multiple(num, n) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(num * n); }, 1000); })}let n = 5;let arr = [1, 2, 3, 4];// 同步循环。一瞬间执行
2022-01-25 19:36:29
2401
原创 async / await 和 Promise 的关系
背景：1.异步回调地狱 callback hell;2.Promise 是基于 then catch 的链式调用，但也是基于回调函数；3. async / await 是同步语法去编写异步代码，彻底消灭回调函数，但它也只是一个语法糖，从语法层面去解决 回调地狱；关系：async / await 和 Promise 并不互斥，二者相辅相成。async / await 并不能改变异步的本质（ js是单线程的，异步需要回调，都是要基于 event loop 来实现）。await 后面的
2022-01-25 19:01:42
2058
2
原创 Promise 的理解
1.三种状态：pending：初始状态 fulfilled: 意味着操作成功完成 rejected: 意味着操作失败2.状态变化：pending ---> fulfilled 或 pending --> rejected （变化不可逆）3.then 和 catch 对状态的影响：then 和 catch 正常状态都会返回 resolved，里面有报错则返回 rejected4.链式调用// 例一Promise.resolve.th...
2022-01-25 14:15:52
489
原创 JS实现深拷贝
/** * 深拷贝 * 1.注意判断类型 * 2.注意判断是数组还是对象 * 3.递归 */ let obj1 = { name: 'zhangsan', address: { city: '杭州', }, friends: ['a', 'b'],}// let obj2 = obj1; // 浅拷贝let obj2 = deepClone(obj1); // 深拷贝obj2.address.city = '上海';obj2.friends[1] = 'c';cons.
2022-01-24 22:53:55
238
原创 CSS总结
一、HTML1 如何理解 HTML 语义化？增加代码可读性有利于SEO2 默认情况下 哪些标签是 块级 / 内联是否独占一行display: block/table; div h1 p ul ol li tabledisplay: inline/inline-block; span img input button二、CSS1 布局1.1 盒子模型的宽高如何计算？offsetWidth = width + padding + borderbox-siz...
2022-01-24 22:45:36
27
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人