- 博客(34)
- 问答 (2)
- 收藏
- 关注
RSS订阅
原创 打开vscode好像打开了原神？vscode原神背景推荐，比博燃
1.首先我们在vscode扩展商店里搜索：background2.安装好以后我们打开vscode设置搜索background3.打开settings.json文件"background.style": { "content":"''", "pointer-events":"none", "position":"absolute",//图片位置 "width":"100%", "height":"100
2021-08-25 15:25:30
982
原创 React前端面试每日一试 8.什么是React Portals？
React Portals 是一种强大的工具，尤其在处理UI组件时，使你能够灵活地管理DOM节点的渲染位置，而不受限于React组件树的嵌套关系。通过合理使用Portals，你可以更轻松地构建复杂的UI组件，提高应用的用户体验.PS:但事件冒泡仍然会遵循React的组件树结构.
2024-08-15 14:22:43
543
原创 React前端面试每日一试 7.什么是React的Context API？如何使用它？
React的Context API是一种用于共享组件树中全局数据的方法，而无需通过props逐层传递。它对于需要在应用中许多不同层次上访问数据的情况非常有用，例如当前的主题、用户信息或首选语言。1.创建Context：使用React.createContext创建一个Context对象。2.提供Context：使用Context Provider组件来使Context的值在组件树中可用3.消费Context：使用Context Consumer组件或useContext钩子来访问Context的值首先，
2024-08-08 14:46:48
554
原创 React前端面试每日一试 6.空标签(Fragment)＜＞＜/＞是什么？它有什么作用？
空标签是React中的一个非常有用的特性，允许开发者在不引入额外DOM节点的情况下返回多个元素。它使得代码更加简洁，减少了不必要的嵌套，并且有助于提升渲染性能。通过理解和使用Fragment，可以编写更高效、可维护的React代码。
2024-08-05 11:39:09
535
原创 React前端面试每日一试 5.什么是受控组件和非受控组件？
受控组件和非受控组件是两种处理React表单数据的不同方式。受控组件使用React状态来管理表单数据，提供更高的控制性和一致性，但代码相对复杂。非受控组件则依赖于DOM本身来管理表单数据，代码简单，但数据流可能不如受控组件明确。选择哪种方式取决于具体的使用场景和需求。通过合理选择和使用受控组件和非受控组件，可以构建高效、可维护的React表单组件，满足各种复杂的表单处理需求。还可以把组件写成双控组件.提高灵活性
2024-07-31 16:16:05
497
原创 React前端面试每日一试 4.什么是React的状态提升（State Lifting）
状态提升是React中常用的一种模式，用于在多个组件之间共享状态。通过将状态提升到这些组件的共同父组件中，可以确保状态的一致性和同步性，简化状态管理，提高代码的可维护性。在构建复杂的React应用时，理解和合理使用状态提升，可以有效地解决状态共享问题，构建高效、可维护的用户界面。
2024-07-25 06:00:00
352
原创 React前端面试每日一试 3.状态（State）和属性（Props）的区别是什么？
特性PropsState数据流向从父组件传递给子组件组件内部管理可变性只读，不可修改可变，组件内部可以修改作用配置组件，使组件复用管理组件内部的动态数据触发渲染变化会触发组件重新渲染变化会触发组件重新渲染初始化由父组件通过JSX属性传递由组件自身通过构造函数或useState初始化。
2024-07-24 21:46:04
504
原创 React前端面试每日一试 2.JSX是什么?JSX如何工作?
JSX是React中用于描述UI结构的一种语法糖,通过编译器转换为React.createElement方法调用,然后创建对应的虚拟DOM,通过生成或更新最终生成真实DOM.它的优势在于简洁、直观和强大的表达能力，使得构建复杂的用户界面变得更加容易和高效。
2024-07-23 10:28:12
594
原创 React前端面试每日一试 1.虚拟DOM是什么?
虚拟DOM是React实现高效UI更新的关键,只更新真正变动的DOM,我们只需要关注UI的状态变化,简化了我们的工作。
2024-07-22 16:58:59
355
原创 【React进步系列】 前端图片全屏放大缩小功能推荐 react-photo-view
公司业务需要对图片点击全屏显示,并且支持图片左右切换,滚轮放大缩小.还要有放大缩小按钮.让做个和飞书文档里差不多的图片预览功能.其实之前我自己写了一个全屏的蒙层去全屏显示图片.宽高都给图片拉大了.但是当图片很高时,依旧看不清,而且也无法满足新的业务需求.于是我看了下飞书的功能,手写一个也可以,但是时间紧任务重啊.于是我去github上找了找开源的库,找了半天终于发现一个轻量,好用,又满足我需求的开源库。
2024-04-10 18:39:33
930
1
原创 探秘前后端编程世界：七宝文与你一起走向未知街区,解开你心中迷雾
前端:你需要根据需求还有ui写出满足需求的前端页面(包括一切前端交互,界面可能会需要精确到1px),以及与后端提供的接口对接.后端:通常需要掌握至少一门服务器端编程语言,对服务器进行管理、数据库维护、可以写出提供给前端调用的API 开发等.全栈开发:前端后端会的你都要会.....
2023-10-07 15:14:03
101
原创 【React进步系列】初步接触交互性界面-React DnD
在现代Web应用程序中，用户界面的互动性变得越来越重要。用户希望能够以直观的方式拖放元素，重新排列列表项，或者在应用程序中进行其他交互操作。React DnD是一个强大的工具，旨在帮助React开发人员轻松实现这些交互功能。
2023-09-22 18:57:34
184
原创 【React进步系列】万能通信之发布订阅
发布-订阅模式是一种软件设计模式，其中发布者和订阅者之间存在一种松散的耦合关系。发布者负责发布（或广播）事件或消息，而订阅者则负责订阅并接收这些事件或消息。这样，发布者和订阅者之间不直接进行通信，而是通过一个称为事件总线（Event Bus）或消息队列（Message Queue）的中介来进行通信发布-订阅模式为React应用程序中的组件通信提供了一种灵活且解耦的机制。通过事件或消息队列，组件可以在不直接耦合的情况下进行通信。这种模式在处理复杂的应用程序结构或多个组件之间的交互时非常有用。
2023-07-10 15:37:05
802
1
原创 Apipost协作功能使用场景详解
Apipost是一款基于协作，更懂中国程序员的接口调试工具。它不仅包含接口调试、自动生成API文档、Mock服务、流程测试等功能，还可以做到真正意义上的实时协作，最大程度缩短沟通交流上的时间成本，也减少了因数据层层传递产生的丢失风险。......
2022-07-12 16:17:18
549
原创 堪称“卷王神器”的Apipost亮点盘点
我们平时在做接⼝测试的时候，对于⼀些常⽤的接⼝测试⼯具的使⽤应该都⾮常熟悉了：接⼝⽂档：Swagger、Yapi接⼝测试：Postman、PostwomanMock：EasyMock、Mockito、mock.js性能测试：Jmeter、Locust……做接⼝测试，需要在电脑上安装那么多软件，你会不会感到很蛋疼？⽼⼦就是不想装那么多软件，有没有⼀款接⼝测试软件，能够把以上所有的功能都集成到⼀块？给⼤家推荐⼀款丧心病狂的API调试⼯具：Apipost。如果你不了解它，你都不知道它的内涵有多深
2022-06-07 12:27:57
494
转载 API管理工具Apipost部分特色功能详解，好用，推荐
目前市面上有不少API相关的工具，比如 Postman、Apipost 等。最近我也尝试了下 Apipost ，简单说下我的一些使用体验。总体来说，Apipost 还是比较香的，功能比较多，我个人比较喜欢的有以下几个功能。一、客户端支持不登录使用痛点：很多用户处于局域网环境（或者公司对网络限制严格），未登录无法使用旧版或者市面上大部分的API管理工具。解决方案：Apipost 6 客户端支持不登录使用。功能原则是在未登录状态下，完全满足个人开发者的需求： 接口：接口的新建、发送
2022-04-22 16:14:04
533
原创 2分钟玩转中文接口测试工具-ApiPost
2分钟玩转APIPOST本文通过简单介绍如何利用ApiPost调试接口和快速的生成接口文档，让您初步体验ApiPost的魅力！1. API写完想要测试？试试模拟发送一次请求新建接口，我想模拟发送请求如下curl --location --request POST 'https://echo.apipost.cn/get.php?c=Course&id=1000' \--header 'User-Agent: Apipost client Runtime/+https://www.apip.
2021-08-10 16:07:28
2533
3
原创 Node-got请求发送不了formData数据的坑
今天使用node got模块遇到了content-type=form-data 发送不了数据到后端的问题，看看我原来的代码。var gotSend = require('got').var FormData = require('form-data'); try { let form = new FormData(); form.append('my_file', fs.createReadStream('/foo/bar.jpg')); form.append('
2021-04-26 15:56:51
895
原创 Got(node.js)请求 初探深浅
经常用node的小伙伴肯定经常需要用到http库。在介绍got前，给大家看看got官方做的对比图。应该会看到自己熟悉的http库。可以看到got对很多方面都是支持的，技术迭代也都比较新。顺带提一下我之前用的是request。（但已经不更新了）。简单的请求我就不介绍了，大家可以自己去https://github.com/sindresorhus/got看看。给大家看看copy即可满足大部分需求的模板。 var gotSend = require('got') //使用import也可以 import
2021-04-23 19:17:53
9110
1
原创 js websocket自动重连机制（心跳后续）
window.webSocket = {};var heartCheck = { lockReconnect: false, //避免ws重复连接 maxReconnectionDelay: 30 * AP.MINUTE, //最大重连时间 minReconnectionDelay: 10 * AP.SECOND, //最小重连时间 reconnectionDelayGrowFactor: 1.5, //自动重连失败后重连时间倍数增长 connectionTimeo
2021-04-22 10:40:39
3790
原创 js 判断字符串内容为数组或对象
类似“{name:‘小猪’}”,"[1,2,3]"这种字符串里面是对象格式或者数组如何判断呢。下面是数组的例子。//需要判断的字符串let stringData="[1,2,3]"; try {//为对象和数组的时候stringData为对象或者数组。无法转换时会走catch，但是不影响stringData原来的数据。 stringData = JSON.parse(stringData)return true; } catch (error) {return false;
2021-04-19 10:58:54
2115
原创 js 正则表达式中一个\和二个的区别
js 正则表达式中有时候需要用\来转义，有时候需要用\来转义，那么什么时候该用\什么时候该用\呢。Code up:let regExp1 = new RegExp("^\\[");let regExp2=/^\[/;regExp1 .test("[123") //trueregExp2 .test("[123") //true那么问题来了。为什么regExp1和regExp2一个用了\一个用了\都能验证开头符号为[的字符串呢？我们改下代码看看结果。//相比
2021-04-19 10:57:47
475
原创 使用art-template循环进行html代码拼接
我这边需要做的是把上次生成的html代码插入到下一次模板渲染中，那么要实现这个需求，我用的是模板的拓展方法(过滤器)template.defaults.imports.+（方法名/变量名） =变量值/方法那么具体如何实现呢 接下来 Code up://上一次产生的html代码template.defaults.imports.lastHtml = "";arrayList=[{name:"爸爸"},{name:"儿子"},{name:"孙子"}]; arrayList.forEach(it
2021-04-19 10:55:44
239
原创 jQuery为什么要弃用type()方法，以及用什么替代？
这是官方弃用type的通知 https://api.jquery.com/jQuery.type/但没有说为什么弃用这个方法，而且也没有明确开发者可以替代的方法，那么问题来了，你用就这横线你能受得了？不用的话就自己封装一个方法，那和jQuery封装的type方法有啥区别，下面是我自己封装的方法var class2type = {};// 利用replace减少使用for循环，同时可以简化代码'Boolean Number String Function Undefined Null Arr
2021-04-19 10:54:16
336
原创 浅谈indexedDB/indexedDB数据实际储存的位置
这里写了一个简单的数据库插入的测试。<body> <button onclick="dbTest()">db测试</button></body><script> var db; var dbVersion = 1; // 全局的indexedDB数据库实例。 // 2\. 通过IDBFactory接口的open方法打开一个indexedDB的数据库实例 // 第一个参数： 数据库的名字，第二个参数：
2021-04-19 10:52:41
6142
原创 localforage indexedDB如何使用索引
简单介绍下localForage。localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。 内部有一个优雅降级策略。默认情况下，localForage 按照以下顺序选择数据仓库的后端驱动：IndexedDBWebSQLlocalStorage扯远了。那么言归正传。localForage这个库可以说功能很强大也很齐全了。但是对于indexedDB这个数据仓库。
2021-04-19 10:49:43
460
原创 node fs读写文件（Promise封装）
//写文件apiPost.writeFile = function (src, fileName, data) { return new Promise((resolve, reject) => { try { //判断路径文件夹是否存在 fs.accessSync(src); } catch (err) { try { //不存在创建文件夹
2021-04-19 10:43:15
640
原创 node path.resolve()和path.join()
一：path.resolve作用：把一个路径或路径片段的序列解析为一个绝对路径。相当于执行cd操作。let myPath = path.resolve(__dirname,'/img/so');let myPath1=path.resolve('/foo/bar', './baz'); console.log(__dirname); // E:\test console.log(myPath); // E:\test\img\soconsole.log(m
2021-04-19 10:42:09
218
原创 js websocket心跳
var heartCheck = { pongTime: 30 * AP.SECOND, //30秒接收心跳 pingTime: (30 * AP.SECOND / 10) * 8, timeoutObj: null, serverTimeoutObj: null, reset: function () { // clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeout
2021-04-19 10:38:58
2678
原创 eventBus实现原理,你知道什么是类就懂
eventBus是组件消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。1为消息中心，2为订阅消息，3为发布消息。show code1.Event.js 封装代码class Event{ constructor(){ this.callbacks = {} } //解除监听 用的比较少 $off(name){ this.callbacks[name] = null } //提交通信封装 $em
2021-04-19 10:36:42
900
原创 ES6的Proxy代理多层结构数据 触发set方法的坑
Proxy代理多层结构Demo//需要被代理的数据var data=[{name:“小明”,age:12},{name:“小红”,age:15},{name:“小蓝”,age:17}];//代理后的数据对象 操作proxyData会影响data数据，但直接更改data不会触发get和set方法const proxyData=new Proxy(data,{get(obj, index) {return obj[index];},set: function (target, key, va
2020-09-23 18:35:36
1885
空空如也
electron-builder打包后项目报错
2021-08-12
js 提取http请求 url字符串里的特定规则的name和password
2021-05-31
TA创建的收藏夹 TA关注的收藏夹
TA关注的人