- 博客(53)
- 收藏
- 关注
原创 通俗易懂的 Nginx 反向代理 配置
说明:当客户端访问服务器的 192.168.31.115 地址时,需要通过端口 8088 来访问这个服务。当请求的 Host 头部与这里指定的 server_name 匹配时,Nginx 会使用这个服务器块来处理请求。整个配置被包裹在一个 server 块内,这意味着以下所有配置都是针对这个特定的服务器实例的。当请求 /i/top.gif ,/data/w3/images/top.gif 会被返回。当请求 /i/top.gif ,/data/w3/i/top.gif 会被返回。
2024-12-12 10:27:57
485
原创 React 中 为什么多个 JSX 标签需要被一个父元素包裹?
虚拟 DOM 是对实际 DOM 树的一个轻量级表示,每次组件更新时,React 会先通过虚拟 DOM 对比(称为 “reconciliation”)找出实际 DOM 需要变动的地方,之后只更新需要改变的部分。如果返回多个不被包裹的元素,React 无法确定它们如何在虚拟 DOM 树中嵌套和排序,从而无法进行高效的 diff 算法对比。React 的虚拟 DOM 对比是基于组件的结构化树进行的。如果没有一个父元素,React 在更新和渲染多个兄弟元素时将需要进行更多的操作,可能会影响性能。
2024-11-13 15:20:25
656
原创 深入理解 pnpm(Performant NPM) 的实现原理及其与 npm 的区别
在 JavaScript 生态系统中,包管理器是开发者日常工作中不可或缺的工具。npm(Node Package Manager)作为 Node.js 的默认包管理器,已经广泛应用于各种项目中。然而,随着项目规模的扩大和依赖管理需求的增加,pnpm作为一个高效、节省磁盘空间的包管理器,逐渐受到开发者的关注。本文将深入探讨pnpm的具体实现原理,并详细比较其与npm的区别,帮助你更好地理解和选择适合你项目的包管理器。
2024-10-09 11:39:04
1345
原创 npm 和 npx 的区别和使用场景
自动下载和缓存:如果本地未安装所需包,npx会自动下载并执行,执行完毕后可以选择保留或删除。脚本运行:通过package.json中的scripts字段定义和运行自定义脚本。依赖管理:管理项目的dependencies和devDependencies。简化命令行工具的使用:临时执行命令,避免全局安装带来的版本冲突或污染。npm 全称:Node Package Manager。发布包:将自己的包发布到npm注册表供他人使用。:无需全局安装即可运行npm包中的可执行文件。
2024-10-09 11:19:11
3259
原创 npm的实现原理
npm(Node Package Manager)是Node.js的默认包管理器,用于管理JavaScript项目的依赖关系、脚本运行和包发布。理解npm的实现原理有助于更高效地使用它,优化项目的依赖管理,并在遇到问题时更快地定位和解决。以下将详细介绍npm的实现原理,包括其架构、依赖解析、安装机制、缓存系统、锁文件管理、脚本执行等方面。
2024-10-09 11:12:16
1505
原创 揭开JSX面纱 : jsx代码是如何一步步解析变成最后的html元素的
JSX(JavaScript XML)是一种 JavaScript 的语法扩展,允许在 JavaScript 代码中直接编写类似 HTML 的标签。虽然它看起来像 HTML,但浏览器无法直接理解和执行 JSX。因此,JSX 需要经过编译转换成标准的 JavaScript 代码,然后由 React 库处理生成最终的 DOM 元素。
2024-09-25 14:13:29
636
原创 自定义封装输入框组件时的一些默认样式问题处理、原生input标签样式边线等处理 之 appearance: none 魔法 真的记住了
【代码】自定义封装输入框组件时的一些默认样式问题处理、原生input标签样式边线等处理 之 appearance: none 魔法 真的记住了。
2024-09-14 15:33:48
338
原创 解决 webpack 配置 sass-loader后报错,无法正常build
sass-resources-loader 主要用于将 Sass 变量、混入(mixin) 和 函数 等工具类样式注入到每个 scss 文件的作用域中。这意味着 sass-resources-loader 不会将实际的样式插入到每个 scss 文件中,而是仅仅将变量和混入等工具类代码注入。如果你在全局引入的 scss 文件中包含普通的 CSS 样式(如选择器和样式定义),这些样式会被反复注入到每个 scss 文件中,导致不必要的重复和冲突。变量、混入和函数等工具类样式。
2024-09-12 17:57:15
1239
原创 Vue2中为啥不用 Object.defineProperty 实现响应式数组 ? 不能监听到数组变化吗?
所以,在Vue 3.0 中,尤大把响应式数据部分弃用了 Object.defineProperty,而使用 Proxy 来代替它。难道 Object.defineProperty 真的要背这锅么,下面就来分析一下 Object.defineProperty 真的无法监测数组下标的变化吗?但是有一个问题,就是对于数组的一些常用方法如push/pop等,无法触发监听;可以监听数组的元素的增加和修改,但不能监听数组长度的变化和数组方法的调用。本身是可以监控到数组下标的变化的,只是在 Vue 的实现中,从。
2024-06-26 11:00:45
661
2
原创 国际化项目词条处理方案-拒绝重复性的搜索+复制+粘贴,不然手腕得麻了
【代码】国际化项目词条处理方案-拒绝重复性的搜索+复制+粘贴,不然手腕得麻了。
2024-05-21 10:44:13
454
原创 实现Object.create、实现Object.freeze
Object.seal() 静态方法密封一个对象。密封一个对象会阻止其扩展并且使得现有属性不可配置。密封对象有一组固定的属性:不能添加新属性、不能删除现有属性或更改其可枚举性和可配置性、不能重新分配其原型。只要现有属性的值是可写的,它们仍然可以更改。seal() 返回传入的同一对象。Object.freeze冻结一个对象,让其不能再添加/删除属性,也不能修改该对象已有属性的可枚举性、可配置可写性,也不能修改已有属性的值和它的原型属性,最后返回一个和传入参数相同的对象;
2024-03-14 13:59:21
416
原创 js手写实现 Promise.all
实现 Promise.all 如果参数中有一个promise失败,那么Promise.all返回的promise对象失败。在任何情况下,Promise.all 返回的;传入参数为一个空的可迭代对象,则直接进行resolve。promise 的完成状态的结果都是一个数组;
2024-03-11 18:52:35
425
原创 js手写Promise.prototype.finally
实现 Promise.finally前面的promise不管成功还是失败,都会走到finally中,并且finally之后,还可以继续then(说明它还是一个then方法是关键),并且会将初始的promise值原封不动的传递给后面的then.如果finally函数中有promise等异步任务,会等它们全部执行完毕,再结合之前的成功与否状态,返回值;finally里的函数,无论如何都会执行,并会把前面的值原封不动传递给下一个then方法中;
2024-03-08 18:12:37
775
原创 JS手写Promise.resolve()
实现Promise.resolve() 传参为一个 thenable 对象,返回的 Promise会跟随这个对象,采用它的最终状态作为自己的状态。其他情况,直接返回以该值为成功状态的promise对象。传参为一个 Promise, 则直接返回它。
2024-03-07 14:12:46
625
原创 js手写寄生组合式继承 【面试简版】
寄生组合式继承 类的继承在几年前是重点内容,有n种继承方式各有优劣,es6普及后越来越不重要,那么多种写法有点『回字有四样写法』的意思,如果还想深入理解的去看红宝书即可,我们目前只实现一种最理想的继承方式。
2024-03-07 11:39:32
418
原创 js手写深拷贝 包括【简单版】 和 【完整版】
js深拷贝 会抛弃对象的constructor,所有的构造函数会指向Object。他无法实现对函数 、RegExp等特殊对象的克隆。对象有循环引用,会报错;解决拷贝循环引用问题。解决拷贝对应原型问题。
2024-03-07 10:19:48
2517
原创 js手写实现jsonp
JSONP的实现原理是:客户端通过动态创建 script 标签,将需要跨域请求的 URL 作为 script 标签的 src 属性值,并在 URL 中携带一个回调函数的名称(一般为 callback 或 cb),服务端收到请求后,根据参数进行处理,并将处理结果作为一个参数传递给客户端指定的回调函数,最后返回给客户端的内容为回调函数的调用,并将处理结果作为参数传递进去,这样客户端就可以获取到跨域请求的数据了。跨域指的是在一个域名下的网页去请求另一个域名下的资源。2.处理url中的回调函数。
2024-03-04 10:13:55
470
原创 js手写实现call、apply、bind
手写实现call apply bind改变了 this 指向,让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数,然后在执行完以后删除?
2024-03-01 16:54:31
414
原创 js函数柯里化
在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。:用闭包把参数保存起来,当参数的数量足够执行函数了,就开始执行函数。
2024-02-29 11:17:05
361
原创 js手写防抖 包括立即执行 和 不立即执行两种
防抖(debounce):不管事件触发频率多高,一定在事件触发n秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,就以新的事件的时间为准,n秒后才执行,总之,触发完事件 n 秒内不再触发事件,n秒后再执行。
2024-02-27 09:44:00
646
原创 js实现单例模式
创建对象和管理单例的职责被分布在两个不同的方法中,这两个方法组合起来才具有单例模式的威力。在合适的时候才创建对像,并且只创建唯一的一个。
2024-02-25 21:24:03
421
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人