- 博客(52)
- 收藏
- 关注
RSS订阅原创 前置(3):npm 和npx异同点
npm（Node Package Manager）和npx（Node Package Execute）是两个密切相关但用途不同的命令行工具，它们都是Node.js生态系统中的重要组成部分。
2024-08-12 16:07:12
486
原创 前置(3):npm 和 pnpm 同时指定 registry=https://registry.npmmirror.com/ 源谁的下载速度快啊，这些依赖安装会在电脑上留下缓存吗
如果你经常需要在多个项目之间安装同样的依赖，pnpm的效率通常会更高，因为它减少了重复的存储和下载。如果你主要关注单个项目或者只偶尔需要跨项目共享依赖，npm和pnpm的表现可能相似，但npm的行为可能更符合你的直观预期，因为每个项目独立管理依赖。选择哪一个更好取决于你的项目需求和个人偏好。如果你在多个项目中共享大量依赖，pnpm可能提供更好的性能优势。如果你喜欢更传统的方法，并且不介意每个项目独立存储依赖，npm也是一个非常好的选择。pnpm.locknpm.lock（通常是）和yarn.lock。
2024-08-12 14:56:34
1445
原创 前置(2): npm、yarn 、pnpm推荐用那个啊
如果你需要一种无需额外配置就能直接使用的、有着广泛支持和稳定性的包管理器，选择npm。如果你的项目需要更快的依赖管理和更严格的依赖控制，尤其是在并行下载和安装时，选择yarn。如果你的环境中有多个项目共享大量依赖，且你希望优化存储空间，选择pnpm。最终的选择应基于项目具体需求和团队的技术栈偏好。在现实中，很多团队基于历史项目和开发者的熟悉程度来选择工具，所以了解团队的工作流和依赖管理需求也很重要。
2024-08-12 14:49:14
459
原创 前置(1):npn 和yarn ，pnpm安装依赖都是从那个源安装的啊，有啥优缺点呢
在使用 npm、yarn 或 pnpm 进行依赖管理和安装时，它们通常默认从 npm 的公共仓库（https://registry.npmjs.org/）获取包。不过，用户可以配置它们以从其他源获取，例如企业内部的私有仓库或镜像站点（如淘宝的 npm 镜像）。
2024-08-12 14:46:12
367
原创 （二）typescript中class类
在 TypeScript 中，你可以使用类（class）来更加精确地定义属性和方法的访问控制。这些包括静态属性/方法、私有属性/方法、公共属性/方法、保护属性/方法，以及继承。下面通过示例来展示这些概念在 TypeScript 中的使用。
2024-08-01 16:59:41
545
原创 （一）javascript中class类
在 JavaScript 中使用class语法可以定义类的结构，其中可以包括静态属性/方法、私有属性/方法、公共属性/方法和受保护属性/方法。这些概念有助于封装和数据隐藏，使得代码更加模块化和安全。下面我会解释这些不同的属性和方法，以及如何在类中使用它们。
2024-08-01 16:55:46
321
原创 掌握position的static relative absolute fixed sticky
不算nested 的 padding值 绝对定位 offsetTop 10+2+30+2+100+20 = 164 *//* 算nested 的 padding值 相对定位 offsetTop 10+10+30+2+20+2+100 =174 */* 获取元素距离BODY的偏移值。
2024-07-04 10:14:43
320
原创 Node.js 的 fs 模块和 path 模块的一些方法，以及第三方库 inquirer 和 ejs
在你的代码片段中，你引入了 Node.js 的fs模块和path模块的一些方法，以及第三方库inquirer和ejs。
2024-05-15 15:53:45
496
1
原创 tree命令使用
tree 命令是一个非常实用的工具，用于在 Linux 和 macOS 终端中以树状图形式显示目录结构。以下是一些常用的 tree 命令选项和使用场景，可以帮助你更高效地利用这个工具：1. 基本用法显示当前目录的树状结构:tree显示所有文件和目录（包括隐藏文件）:tree -a2. 限制显示深度限制目录树的显示深度（例如，只显示到第二级子目录）:tree -L 23. 排除特定文件或目录排除特定的目录或文件（例如，排除 node_modules）:tree -I
2024-05-06 14:34:52
637
原创 详解网站攻击原理
实施 XSS 防御措施需要前端和后端的共同努力。确保输入的过滤和清理、输出的正确编码以及使用安全的 HTTP 头部设置，都是保护 Web 应用不受 XSS 攻击的重要步骤。同时，保持对项目依赖的持续审查和更新，可以减少因第三方库漏洞带来的安全风险。
2024-04-11 16:39:36
783
原创 超好用的iframe的postMessage穿参
最近在调用公司其他部门的iframe标签的 SDK脚本 出现了问题，在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行路由跳转，这时候两个项目存在了数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
2024-04-11 09:10:42
5904
原创 获取开发环境命令 npx envinfo --system --npmPackages vue --binaries --browsers
这个命令是用来获取有关你的系统环境、npm 包、二进制文件和浏览器的信息。执行这个命令后，会输出你系统环境的相关信息以及 Vue.js 包的信息。
2024-03-28 10:09:53
560
原创 babel起手式
Babel是一个 JavaScript 编译器，主要用于将版本的代码转换为向后兼容的 JavaScript 代码，以便能够在旧版本的浏览器或其他环境中运行。但是，Babel 本身是无法转换代码的，它的转换功能是通过不同的插件来实现的，Babel 插件是用于指定转换规则的工具，每个插件都可以处理不同的语法或功能转换。作用将某些低版本容器（主要是浏览器，主要是IE…）不支持的js语法或api，用该容器支持的语法或api重写，使开发者可以使用更前沿的方式愉快的编写代码。
2024-03-25 16:36:07
923
原创 rollup打包起手式
rollup是一款小巧的javascript模块打包工具，更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码，基于ES6 modules,它可以让你的 bundle 最小化，有效减少文件请求大小,vue在开发的时候用的是webpack,但是最后将文件打包在一起的时候用的是 rollup.js。
2024-03-21 18:11:21
1203
转载 pnpm monorepo+vue3+vite组件库搭建
pnpm 是 performant npm（高性能的 npm），它是一款快速的，节省磁盘空间的包管理工具，同时，它也较好地支持了 workspace 和 monorepo，简化开发者在多包组件开发下的复杂度和开发流程。pnpm 为 performant npm 的简称，意为高性能的 npm。
2024-03-21 16:09:18
2332
转载 yarn3 PnP + workspace + typescript 从零开始搭建一个 monorepo
PnPyarn v2 版本起默认开启了 PnP 的功能，这个功能开启后项目将不再存在 node_modules 文件夹，所有的依赖都会被压缩成一个 .zip 文件存放在 .yarn/cache 中。零安装更好的开发体验。你每次使用 git clone git pull 等命令更新完你的代码后无需使用 yarn install 进行依赖的安装，这样可以避免一些问题的出现，例如别人更新了某个依赖的版本后，如果你没有进行对应的更新的话，你的代码可能会报错。
2024-03-18 15:24:24
420
原创 基于Pnpm+Changesets的Monorepo工具库实战
Pnpm 代表（高性能的npm），同 npm 和 Yarn 一样，都属于Javascript包管理安装工具，它较 npm 和 Yarn 在性能上得到很大提升，被称为快速的，节省磁盘空间的包管理工具。Pnpm 还内置支持了 Workspace 功能，能帮助我们更轻松完成包之间的 link 和 build，更好管理Monorepo项目。更多详细了解，可以前往Npm官网 查看。Changesets 是一个用于 Monorepo 项目下版本以及 Changelog 文件管理的工具。
2024-03-14 15:08:46
1235
原创 基于Lerna+Yarn的Monorepo工具库实战
本文是笔者在学习和应用 lerna + yarn workspace 多包工程化管理模式的过程中，记录的一些使用和问题汇总，作为笔记和分享于大家阅读。lerna 管理方式属于 Monorepo 模式，这有别于传统的 Multirepo 单仓库应用模式，下面我们先来了解一下两者的区别。
2024-03-08 17:23:27
1328
原创 Yarn Workspace介绍 + 适用场景 + 命令
Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享 全世界开发者的（例如 JavaScript）代码。Yarn 能够快速、安全、 并可靠地完成这些工作，所以你不用有任何担心。通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步。代码通过 包（package） (或者称为 模块（module）) 的方式来共享。一个包里包含所有需要共享的代码，以及描述包信息的文件，称为。
2024-03-07 15:47:11
1638
原创 pnpm workspace组件库搭建起手命令
最近工作中涉及到组件库的搭建，所以去学习了一下pnpm workspace，并搭建了一个简单的demo，这里记录一下搭建的过程和一些常用命令，结尾附上源码地址供大家参考。
2024-03-05 16:29:57
1509
1
原创 GitHub 更改主机密钥导致推不上去
GitHub 定期更改主机密钥，以确保安全性，并防止潜在的安全威胁。因此，当您第一次连接到一个新的 GitHub 主机时，可能会收到警告，因为您的计算机不会识别该主机的新密钥。这时，您需要手动将新的主机密钥添加到您的本地计算机中，以便以后的访问。GitHub 更改主机密钥是为了增强其安全性。主机密钥是用于验证远程主机身份的一种机制，因此，如果主机密钥被泄露或被篡改，可能会导致安全问题。这样就可以解决这个问题了。
2023-05-19 10:11:37
239
原创 移动端适配
px才是最佳适配单位，很简单 随便去打开几个顶级网站 比如油管 谷歌 推特 谁用vs vh做适配？ 最标准的做法是 文字大小用em rem px 除文字外 其他容器尺寸 元素尺寸全部用pxup的意思是把设计稿标注的px转成vh vw，这种单位转换是错误的 导致的问题我就不展开讲了，另外自适应也不是用px 而是用弹性布局+媒体查询这个其实也是传统教学的误区，在国外根本就没有响应式和自适应这两个词，本身就只有一个单词叫"responsive" 早些年国内人翻译它出现两个版本也就是“自适应”“响应式” 其实都
2022-10-19 23:32:35
530
原创 mac book pro高清录屏教程（obs录屏+麦克风录制+soundflower电脑声录制）三合一
2、找到软件音频MIDI设置打开进行添加聚集设备和多输出设备。3、系统偏好设置中找到音频设备选择。多输出设备，聚集设备。
2022-07-31 14:21:28
1306
原创 客户端和服务端通信原理
客户端和服务端客户端：可以向服务端发起请求的，并且接受返回的内容的进行处理服务器端：能够接受客户端的请求，并且把相关资源信息返回给客户端的web 服务站点详细url 地址解析DNS 服务器DNS 域名解析再向服务器发起请求和服务器建立 TCP 连接把客户端的信息发送给服务器（发送 HTTP 请求）服务器得到并处理请求（http 响应内容）客户端渲染服务器返回的内容和服务器断开 TCP 连接url 地址解析URL：(Uniform Resource Locator)
2022-05-25 22:09:53
4313
原创 了解响应式布局
响应式布局种类响应式布局开发@media等比缩放布局按照固定的样式写一版*（例如 320），然后根据设备的宽度 让其除以320，计算出缩放比，最后让整个HTML基于transform:scale(比例) 进行缩放rem,等比缩放dpr* 1.响应式布局开发@media2.等比缩放布局按照固定的样式写一版*（例如 320），然后根据设备的宽度 让其除以320，计算出缩放比，最后让整个HTML基于transform:scale(比例) 进行缩放3.rem,等比缩放REM响应式.
2022-05-25 15:24:18
188
原创 柯里化函数
柯里化函数柯里化函数编程思想如何实现柯里化函数以及所要使用的知识点（必包的保护和保存），以及执行的顺序，bind方法的体会废话不多说上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
2022-05-25 15:12:52
128
原创 jQuery
//1.获取Dom元素const { $getCache } = require("sence/modules/storage");//jQ选择器（根据选择器类型快速获取需要的类型）$([selector], [context]);$("#box");// 获取子集$("#box a");$("a", box);/* JQ支持的选择器、传统的css3中大部分都是支持的还支持自己独有的* :eq(n) 获取集合中的索引为n* :gt(n) 获取集合中的大于索引为n* :lt(n
2022-05-02 10:30:56
118
原创 js实现抖音话题发布
抖音话题发布实现//jsonp(function () { const isPlainObject = function isPlainObject(obj) { let proto, Ctor; if (!obj || Object.prototype.toString.call(obj) !== "[object Object]") return false; proto = Object.getPrototypeOf(obj); if (!proto) r.
2022-04-08 10:11:27
873
原创 费曼学习法
费曼学习法这两天看了下费曼学习法，想分享出来，也相当于是一种对新知识的回顾。费曼学习法是一种以教促学的学习思维。想必我们都在不断寻找属于自己的学习方法，不妨尝试一下费曼学习法，个人认为还是比较高效的一种学习方法1.什么是费曼学习法从严格意义上讲,费曼学习法只是一个学习技巧，能够帮助你能够高效学习费曼学习法的主体思想就是以教促学。将自己学会的东西教给别人，如果在教学的过程中出现了卡壳或者自己也摸不准的东西，那么在回头查资料，总结，然后在简化，用自己的语言表述出来费曼学习法的究极技巧就是用.
2021-12-23 17:06:07
211
原创 typora和picgo搭配
PicGo图床图床一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。----百度百科免费图床搭建1.创建gitee仓库进入 gitee ，然后按下面的步骤进行创建。提醒：新手一定记住要初始化项目，即生成 “readme”。再点击右上角的生成私人令牌，然后将生成的秘钥复制保存在一个 txt 文档中，待会需要用到。2.下载 PicGo 并配置PicGo 是一.
2021-12-16 10:44:31
310
原创 初识gird布局
项目上用grid时候先查询一下can i use浏览器 要求是否掌握要点盒子居中对齐文字居中对齐九宫格均分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten.
2021-11-28 20:11:59
312
原创 promise大厂面试
分享几道大厂面试题1.使用Promise实现每隔1秒输出打印1，2，3这道题比较简单的一种做法是可以用Promise配合着reduce不停的在promise后面叠加.then，请看下面的代码const arr=[1,2,3]arr.reduce((p, x) => p.then(() =>new Promise(r => setTimeout(() => r(console.log(x)), 1000))), Promise.resolve())2. 使用Prom.
2021-10-29 16:22:27
635
原创 reduce使用法则
reduce作为ES5新增的常规数组方法之一，对比forEach 、filter和map，在实际使用上好像有些被忽略，发现身边的人极少用它，导致这个如此强大的方法被逐渐埋没。如果经常使用reduce，怎么可能放过如此好用的它呢！我还是得把他从尘土中取出来擦干净，奉上它的高级用法给大家。一个如此好用的方法不应该被大众埋没。下面对reduce的语法进行简单说明，详情可查看MDN的reduce()的相关说明。01:代替map和filterconst arr = [0, 1, 2, 3];// 代替m.
2021-10-29 15:06:11
151
原创 2021-10-18
使用密码的 App 需要您授权，才能从“钥匙串访问”取回您的密码。App 需要访问密码时，会显示一个对话框，要求您确认对钥匙串的访问。信息可能包含若干选项：拒绝：禁止 App 从您的钥匙串中取回密码。您需要手动输入密码。允许一次：仅授权这次访问您的钥匙串。下次该 App 需要访问密码时将再次询问您。始终允许：允许 App 在任何时候都不要求您输入密码即可取回密码。App 应该允许以后访问密码，且不显示对话框。如果要允许 App（如“邮件”）在任何时候都不要求您输入密码即可访问您的钥匙串，请选择“始终
2021-10-18 14:25:08
226
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人