Ashy- 在这里成长

原创 margin 坍塌问题与 BFC（块级格式化上下文）

属性为 inline-block 或 inline-flex 或 inline-grid。属性为 absolute 或 fixed。两个元素都设置 float（这里单独给第二个。假设有两个 div，其宽高都是 100px。属性（属性值不为 none ）

原创 interface 和 type 的使用场景有什么区别？

interface：适合定义对象结构、类契约、可扩展类型type：适合复杂类型、类型操作和别名

原创 什么是重绘？什么是回流？如何减少回流？

【代码】什么是重绘？什么是回流？如何减少回流？

原创 flex 布局属性有哪些？

设置父容器为 Flex 布局后，子元素自动成为 Flex 布局。

原创 TCP/UDP 简介，三次握手与四次挥手

处于连接状态的客户端和服务端，都可以发起关闭连接请求。A 想主动结束连接，需要向 B 发送一次请求（FIN包），进入终止等待1状态（第一次挥手）B 收到后，返回一个 ACK 包，进入关闭等待状态，A进入终止等待2状态（第二次挥手）AB 此时还可以发送数据，B在数据接收完以后，返回 FIN 包，B进入关闭等待状态（第三次挥手）A 收到关闭信息后返回 ACK 包，并且进入超时等待状态，超时后关闭连接，B收到信息后回立即关闭连接（第四次挥手）

原创 记录一次 vue3 + ele pls 改写 饿了么主题色实践

在自定义的 element-plus.scss 文件中改写 ele pls 的变量。此前我在这里使用自己定义变量去改写主题色的时候就发现了好几处并没有生效的情况。从之前的代码可以看到，我改写了其他几个变量，并重新设置了主题色。在 main.ts 中引入需要改写的 scss 文件。在通过 root 修改的时候，需要注意。但是点进去以后发现并没有生效。

原创 img 图片加载失败后展示本地展示

Vue3 图片预览实现网络图片请求失败后加载本地图片。

原创 ele pls 表格行内样式超出隐藏

使用模板实现表格行内隐藏效果

原创 三、Web3 学习（钱包与共识算法）

在区块链上，你的钱包就是你的身份，对的，没有名字，只有钱包地址。在线钱包就像你口袋里的那个钱包——我们需要它来存钱。本文将着重讲讲如何设置 Metamask 钱包这些钱包要么是软件（例如，CoinbaseMetamask 要么是硬件（例如，Ledger最简单的学习方法就是尝试一些东西。找到可以购买一些加密资产的平台。设置一个像metamask这样的钱包，将钱转移到那个钱包，然后看看你是否可以交换一些 Token。每个钱包都有一个安全密钥，需要保管好以确保你不会丢失它。

原创 二、Web3 学习（区块链）

每个人都可以实时查看正在发生的事情和所有交易。

原创 一、初识 Web3

嘲笑 web3，学习 web3，理解 web3，成为其 developer

原创 前端网络面试：浏览器输入地址后发生了什么？

请求前：TCP、IP 三次握手，连接认证请求过程：发送请求，确定缓存请求后：解析 DOM、CSSOM 并渲染

原创 ES6+ 面试常问题

1. 基本数据类型2. Promise 知识点3. set map 数据结构4. 存储5. 扩展运算符6. Symbol7. asnyc/await8. ...

原创 【笔记】原型和原型链（持续完善）

【代码】【笔记】原型和原型链（持续完善）

原创 前端网络请求知识（一）

【代码】前端网络请求知识（一）

转载 Mac 设置命名行代理（加速安装依赖）

命令行代理安装依赖npm i --force

原创 JavaScript 内存泄漏

所谓内存泄漏就是程序执行完了，本该随着程序执行结束而被释放的内存由于有着引用关系而未得到释放导致的内存占用问题。清除不必要的引用尽量不要定义全局变量（比如减少 var 操作符的使用）提交代码前删除 console。

原创 写一个垂直居中样式

不过能实现功能就好，这本身也没什么，不是吗？以上就是垂直居中了，主要是分享一下。（实在不好依稀，没忍住吐槽一下：）

原创 前端存储二：indexedDB

对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。

原创 前端存储 Cookie、Web Storage（localStorage 与 sessionStorage）

localStorage 存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据；数据是直接挂在域名下的，重新打开当前浏览器的该域名下依然可以找到已存储的数据。sessionStorage 数据在当前浏览器窗口关闭后自动删除。sessionStorage 与 localStorage。cookie 的局限性：不建议用于存储值。共同点：都保存在浏览器端，遵循。Html5 中增加的。Q：什么叫持久化方案？

原创 移动端适配之动态 rem 方案

在使用时，1rem 即 1px，然后在不同窗口尺寸下的内容也是自适应的。另外有一个好处是，文字大小不会随着屏幕变的非常小。这里因为是动态 rem，文字在小屏中不会出现绝对的按比例放大缩小的情况，可以从效果图中看出文字基本都是适配的。就是设置浏览器字体，从而实现根据屏幕动态计算大小。

原创 html 文字超出隐藏

html 文字超出隐藏 实现，父级设定宽度

原创 前端 http 协议相关

计算机网络中有关 HTTP 相关知识学习，万字长文。

原创 对象的赋值表达式（组件传值，简写 props）

结构赋值不要求变量必须在结构表达式中声明，如果是给事先声明的变量赋值，则赋值表达式必须包含在一对括号中 ：

原创 ES6 中 rest 剩余参数介绍（...args）

ES6 中 rest 剩余参数介绍（…args）简单介绍Rest就是为解决传入的参数数量不一定， rest parameter(Rest 参数) 本身就是数组，数组的相关的方法都可以用。在这之前，参数我们会读取到 arguments, 但是 arguments 是一个类数组；1. arguments 类素组对象：function s() { console.log(arguments)}s(1, 2, 2, 3) // [1, 2, 3, callee: ƒ, Symbol(Symb

原创 ECharts 实现渐变色

原创 React + antd 中 的 CheckBox 实现限制复选框可选的个数

React + antd 中 的 CheckBox 实现限制复选框可选的个数一、React + antd 中 的 CheckBox 实现限制复选框可选的个数1.优化后的代码 3行 实现：代码如下（示例）：import React, { useState, useEffect } from "react";import { Checkbox } from "antd-mobile"; // 这里使用的是 antd-mobile，antd本质上原理一样const CheckboxItem = Che

原创 使用 JS 来写css

JS是真的强js可以写前端，可以写后端，可以写服务端，还可以写数据库没想到吧，js还可以写css// package.json{ "styled-components": "^5.2.3",}// ----import { HomePage } from './style';// ---return ( <HomePage> <div> 内容 </div> {/* 略 */} </Ho

原创 Hooks学习2

一、useContext使用useContext可以访问全局状态，可以避免状态的层层传递。符合Redux的规则：状态全局化，并能统一管理。用来共享状态。二、useReduceraction：通过action 可以更新复杂的状态，相当于实现Redux当中的Reducer（更改复杂的业务状态）部分。用来控制业务逻辑。三、useContext + useReducer 实现一个 Redux 效果：1. 整个效果如图：默认效果：红色：绿色：粉色：。。。。。。2. 组件结构：

原创 Hooks学习

useState（hooks最基础）数组解构 useState const [count, setCount] = useState(0); // ES6的数组解构的方法 // 即 全等于 === let _userState(0); let count = useState(0); let setCount = _userState[1];useState 不能存在于 条件 判断语句当中React Hook "useState" is called conditio

原创 数组与类数组以及在类数组对象使用数组的方法

如何在类数组中使用数组的方法？这里记点笔记，仅供学习参考。文章目录判定数组1. Array.isArray( )2. instanceof 操作符3. 检测类属性数组类数组类数组对象使用数组方法总结判定数组1. Array.isArray( )给定一个未知的对象，判断它是否为数组？我们通常用数组的一些特性来进行判断。在ES5中，可以使用 Array.isArray()函数来做这件事： Array.isArray([]); // true Array.isArray({}); //

原创 React中的界面中使用map函数的情况

列表渲染使用map函数来遍历实现列表渲染。简单的例子：let list = { "列表1", "列表2", "列表3", // .....}ReactDOM.render( <ul> { list.map(item=><li>{item}</li>) } </ul>);输出的结果为：<ul> <li>列表1</li> <li>列表2</li> <li&

原创 前端报错：Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origi

项目场景：前端报错：Access to XMLHttpRequest at ’ http:// — ?id=5’ from origin ‘http:// —’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resou

原创 vue实现一个点击显示再点击关闭功能（即实现动态更换绑定函数）

项目场景：例如：用vue实现一个动态更换绑定函数的功能项目场景：实现一个支付宝类似于实现支付宝的金额的显示与隐藏。执行描述：提示：这里我用@click来实现该功能，这里为了方便理解，做判断条件为a == 1；当然有更合理的判断方法，这里欢迎大家留言讨论。先写出按钮的方法：<el-button @click="a == 1 ? hide() : show()" type="text"> 个人信息<i class="el-icon-view"></i&g

原创 this.$refs.formRef.validate(）数据提交验证时，ref所绑定的表单数据4种解决方案 外加一个欺骗 this.$refs.formRef 验证的方法

四种场景：在提交表单结果的时候出现报错1. 找不到ref值的情况：Error in v-on handler: “TypeError: Cannot read property ‘validate’ of undefined”解决方法看看中的 formRef 与 <el-form ref="formRef"></el-form>中的 formRef是否一致，改为相同。2. 模型没有验证时的情况：[Element Warn][Form]model is requ

原创 v-for深度遍历数据的表单实战应用

项目场景：在项目中用到v-for来遍历表单，简单的用法就不介绍了。如何解决在项目中嵌套数据的问题？如何做深度的遍历？如何实现一个调查问卷？类似于这种数据（要实现一个调查问卷，要做深度遍历的情况）：根据不同id遍历 question 题目，然后再二次遍历 resource 中的选项用法：在这里我用到了bootstrap4.5中的组件样式（当然elementUI的样式相对代码少一些）v-for="item in sleepForm" :key="item.id" 这里v-for循环遍历，

原创 渲染时的报错[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.

[Vue warn]: Duplicate keys detected: ‘1’. This may cause an update error.：vue项目中遇到的报错问题描述： 原因分析：在这里keys值绑定问题我的问题是我在做项目绑定的时候的问题：在这里我的页面渲染是根据id来渲染的解决方案：在做数据的时候，复制粘贴导致的id重复所致：改变重复数据即可。希望对你有所帮助...

原创 JavaScript面试题121-130

JavaScript面试题121-130每日坚持学10道题121. 求一个字符串的字节长度[问答题]编写一个方法 求一个字符串的字节长度。来自：前端工程师练习卷参考：// 假设：一个英文字符占用一个字节，一个中文字符占用两个字节。function GetBytes(str) { var len = str.length; var bytes = len; for (var i = 0; i < len; i++) { if (str.charCodeAt(i) >

原创 JavaScript面试题111-120

JavaScript面试题111-120每日坚持学10道题111. 数组去重[问答题]用 JavaScript 脚本为 Array 对象添加一个去除重复项的方法。来自：百度参考：let array = [1,5,2,6,2,1,3];let arr = array.set();console.log(arr);prototype.name12. js中的Object属性[填空题]javascript 语言特性中，有很多方面和我们接触的其他编程语言不太一样，比如说，java

原创 JavaScript面试题101-110

JavaScript面试题101-110每日坚持学10道题101. 设计盒模型[问答题]画图描述 CSS 盒模型，用 JS 实现获取元素宽和位置，注意兼容性。来自：去哪儿参考：var element = document.getElementById("div");function getWeizhi(element) { var top = document.documentElement.clientTop; var left = document.documentE