- 博客(45)
- 收藏
- 关注
RSS订阅原创 Node.js 的 fs 模块和 path 模块的一些方法，以及第三方库 inquirer 和 ejs
在你的代码片段中，你引入了 Node.js 的fs模块和path模块的一些方法，以及第三方库inquirer和ejs。
2024-05-15 15:53:45
384
原创 tree命令使用
tree 命令是一个非常实用的工具，用于在 Linux 和 macOS 终端中以树状图形式显示目录结构。以下是一些常用的 tree 命令选项和使用场景，可以帮助你更高效地利用这个工具：1. 基本用法显示当前目录的树状结构:tree显示所有文件和目录（包括隐藏文件）:tree -a2. 限制显示深度限制目录树的显示深度（例如，只显示到第二级子目录）:tree -L 23. 排除特定文件或目录排除特定的目录或文件（例如，排除 node_modules）:tree -I
2024-05-06 14:34:52
267
原创 详解网站攻击原理
实施 XSS 防御措施需要前端和后端的共同努力。确保输入的过滤和清理、输出的正确编码以及使用安全的 HTTP 头部设置，都是保护 Web 应用不受 XSS 攻击的重要步骤。同时，保持对项目依赖的持续审查和更新，可以减少因第三方库漏洞带来的安全风险。
2024-04-11 16:39:36
626
原创 超好用的iframe的postMessage穿参
最近在调用公司其他部门的iframe标签的 SDK脚本 出现了问题，在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行路由跳转，这时候两个项目存在了数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
2024-04-11 09:10:42
925
原创 获取开发环境命令 npx envinfo --system --npmPackages vue --binaries --browsers
这个命令是用来获取有关你的系统环境、npm 包、二进制文件和浏览器的信息。执行这个命令后，会输出你系统环境的相关信息以及 Vue.js 包的信息。
2024-03-28 10:09:53
258
原创 babel起手式
Babel是一个 JavaScript 编译器，主要用于将版本的代码转换为向后兼容的 JavaScript 代码，以便能够在旧版本的浏览器或其他环境中运行。但是，Babel 本身是无法转换代码的，它的转换功能是通过不同的插件来实现的，Babel 插件是用于指定转换规则的工具，每个插件都可以处理不同的语法或功能转换。作用将某些低版本容器（主要是浏览器，主要是IE…）不支持的js语法或api，用该容器支持的语法或api重写，使开发者可以使用更前沿的方式愉快的编写代码。
2024-03-25 16:36:07
810
原创 rollup打包起手式
rollup是一款小巧的javascript模块打包工具，更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码，基于ES6 modules,它可以让你的 bundle 最小化，有效减少文件请求大小,vue在开发的时候用的是webpack,但是最后将文件打包在一起的时候用的是 rollup.js。
2024-03-21 18:11:21
1122
转载 pnpm monorepo+vue3+vite组件库搭建
pnpm 是 performant npm（高性能的 npm），它是一款快速的，节省磁盘空间的包管理工具，同时，它也较好地支持了 workspace 和 monorepo，简化开发者在多包组件开发下的复杂度和开发流程。pnpm 为 performant npm 的简称，意为高性能的 npm。
2024-03-21 16:09:18
445
转载 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
82
原创 基于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
535
原创 基于Lerna+Yarn的Monorepo工具库实战
本文是笔者在学习和应用 lerna + yarn workspace 多包工程化管理模式的过程中，记录的一些使用和问题汇总，作为笔记和分享于大家阅读。lerna 管理方式属于 Monorepo 模式，这有别于传统的 Multirepo 单仓库应用模式，下面我们先来了解一下两者的区别。
2024-03-08 17:23:27
940
原创 Yarn Workspace介绍 + 适用场景 + 命令
Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享 全世界开发者的（例如 JavaScript）代码。Yarn 能够快速、安全、 并可靠地完成这些工作，所以你不用有任何担心。通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步。代码通过 包（package） (或者称为 模块（module）) 的方式来共享。一个包里包含所有需要共享的代码，以及描述包信息的文件，称为。
2024-03-07 15:47:11
570
原创 pnpm workspace组件库搭建起手命令
最近工作中涉及到组件库的搭建，所以去学习了一下pnpm workspace，并搭建了一个简单的demo，这里记录一下搭建的过程和一些常用命令，结尾附上源码地址供大家参考。
2024-03-05 16:29:57
561
原创 GitHub 更改主机密钥导致推不上去
GitHub 定期更改主机密钥，以确保安全性，并防止潜在的安全威胁。因此，当您第一次连接到一个新的 GitHub 主机时，可能会收到警告，因为您的计算机不会识别该主机的新密钥。这时，您需要手动将新的主机密钥添加到您的本地计算机中，以便以后的访问。GitHub 更改主机密钥是为了增强其安全性。主机密钥是用于验证远程主机身份的一种机制，因此，如果主机密钥被泄露或被篡改，可能会导致安全问题。这样就可以解决这个问题了。
2023-05-19 10:11:37
176
原创 移动端适配
px才是最佳适配单位，很简单 随便去打开几个顶级网站 比如油管 谷歌 推特 谁用vs vh做适配？ 最标准的做法是 文字大小用em rem px 除文字外 其他容器尺寸 元素尺寸全部用pxup的意思是把设计稿标注的px转成vh vw，这种单位转换是错误的 导致的问题我就不展开讲了，另外自适应也不是用px 而是用弹性布局+媒体查询这个其实也是传统教学的误区，在国外根本就没有响应式和自适应这两个词，本身就只有一个单词叫"responsive" 早些年国内人翻译它出现两个版本也就是“自适应”“响应式” 其实都
2022-10-19 23:32:35
456
原创 mac book pro高清录屏教程（obs录屏+麦克风录制+soundflower电脑声录制）三合一
2、找到软件音频MIDI设置打开进行添加聚集设备和多输出设备。3、系统偏好设置中找到音频设备选择。多输出设备，聚集设备。
2022-07-31 14:21:28
1138
原创 客户端和服务端通信原理
客户端和服务端客户端：可以向服务端发起请求的，并且接受返回的内容的进行处理服务器端：能够接受客户端的请求，并且把相关资源信息返回给客户端的web 服务站点详细url 地址解析DNS 服务器DNS 域名解析再向服务器发起请求和服务器建立 TCP 连接把客户端的信息发送给服务器（发送 HTTP 请求）服务器得到并处理请求（http 响应内容）客户端渲染服务器返回的内容和服务器断开 TCP 连接url 地址解析URL：(Uniform Resource Locator)
2022-05-25 22:09:53
3136
原创 了解响应式布局
响应式布局种类响应式布局开发@media等比缩放布局按照固定的样式写一版*（例如 320），然后根据设备的宽度 让其除以320，计算出缩放比，最后让整个HTML基于transform:scale(比例) 进行缩放rem,等比缩放dpr* 1.响应式布局开发@media2.等比缩放布局按照固定的样式写一版*（例如 320），然后根据设备的宽度 让其除以320，计算出缩放比，最后让整个HTML基于transform:scale(比例) 进行缩放3.rem,等比缩放REM响应式.
2022-05-25 15:24:18
124
原创 柯里化函数
柯里化函数柯里化函数编程思想如何实现柯里化函数以及所要使用的知识点（必包的保护和保存），以及执行的顺序，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
81
原创 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
75
原创 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
690
原创 费曼学习法
费曼学习法这两天看了下费曼学习法，想分享出来，也相当于是一种对新知识的回顾。费曼学习法是一种以教促学的学习思维。想必我们都在不断寻找属于自己的学习方法，不妨尝试一下费曼学习法，个人认为还是比较高效的一种学习方法1.什么是费曼学习法从严格意义上讲,费曼学习法只是一个学习技巧，能够帮助你能够高效学习费曼学习法的主体思想就是以教促学。将自己学会的东西教给别人，如果在教学的过程中出现了卡壳或者自己也摸不准的东西，那么在回头查资料，总结，然后在简化，用自己的语言表述出来费曼学习法的究极技巧就是用.
2021-12-23 17:06:07
158
原创 typora和picgo搭配
PicGo图床图床一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。----百度百科免费图床搭建1.创建gitee仓库进入 gitee ，然后按下面的步骤进行创建。提醒：新手一定记住要初始化项目，即生成 “readme”。再点击右上角的生成私人令牌，然后将生成的秘钥复制保存在一个 txt 文档中，待会需要用到。2.下载 PicGo 并配置PicGo 是一.
2021-12-16 10:44:31
270
原创 初识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
271
原创 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
448
原创 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
108
原创 2021-10-18
使用密码的 App 需要您授权，才能从“钥匙串访问”取回您的密码。App 需要访问密码时，会显示一个对话框，要求您确认对钥匙串的访问。信息可能包含若干选项：拒绝：禁止 App 从您的钥匙串中取回密码。您需要手动输入密码。允许一次：仅授权这次访问您的钥匙串。下次该 App 需要访问密码时将再次询问您。始终允许：允许 App 在任何时候都不要求您输入密码即可取回密码。App 应该允许以后访问密码，且不显示对话框。如果要允许 App（如“邮件”）在任何时候都不要求您输入密码即可访问您的钥匙串，请选择“始终
2021-10-18 14:25:08
122
原创 js底层原理
防抖/* * debounce：实现函数的防抖（目的是频繁触发中只执行一次） * @params * func:需要执行的函数 * wait:检测防抖的间隔频率 * immediate:是否是立即执行（如果为TRUE是控制第一次触发的时候就执行函数，默认FALSE是以最后一次触发为准） * @return * 可被调用执行的函数 */function debounce(func, wait = 100, immediate = false) {
2021-10-08 09:41:09
386
原创 docker
2019mac本，本地用docker快速起来一个nginx代理服务1.首先可以通过brew search nginx命令查看是否安装的nginx，如果安装了就不用安装了，如何想要重新安装可以用brew reinstall nginx安装。如果没有安装使用brew install nginx进行安装。2.安装完可以通过brew list nginx命令查看有哪些目录列表方便下面的修改。下面展示一下指令代码。// An highlighted blockdocker run -itd --nam
2021-09-19 18:07:44
149
翻译 vue2.6.12移动端配置
禁止私自转载。运营公众号、社交账号，请坚持原创。勿做知识剽窃者！vue-cli4 全面配置(持续更新) 细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。 不建议直接拉取此项目作为模板，希望能按照此教程按需配置，或者复制 vue.config.js 增删配置,并自行安装所需依赖。 vue-cli3 配置见 vue-cli3 分支。其他系列★ Blog★ Nuxt.js 全面配置目录√ 配置多环境变量√ 配置基础 vue.config.j
2021-07-04 14:08:50
484
转载 深度和广度遍历
深度和广度遍历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
2021-05-08 11:16:47
102
原创 图片压缩操作
文章目录前言图片压缩操作2. 2.js文件总结前言/*What？前端还需要实现图片压缩？@1 使用FileReader将选择的文件对象转换为base64 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader@2 新建img，使其src指向base64@3 新建canvas，将img画到canvas上 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas
2021-03-24 14:44:56
108
原创 常见面试题
文章目录闭包二、使用步骤1.引入库闭包闭包产生的原因是：函数执行，会产生一个私有的上下文，如果私有上下文中某些内容被当前上下文以外的事物所占用，则当前这个私有上下文，就不能出栈释放。# 一、闭包是什么？闭包产生的原因是：函数执行，会产生一个私有的上下文，如果私有上下文中某些内容被当前上下文以外的事物所占用，则当前这个私有上下文，就不能出栈释放。二、使用步骤1.引入库代码如下（示例）：/* * 切记！闭包不是“大函数执行返回小函数”！ * @1 STACK、HEAP、EC、VO
2021-03-24 13:27:22
141
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人