- 博客(237)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 关于Mac系统Go安装过程中出现提示zsh: command not found: go的问题
由于想要学习 go 语言，笔者这里使用的系统是（MacBook Pro (13-inch, M1, 2020)）mac 系统安装完go后，在终端输入：go version出现：关于Mac配置提示zsh: command not found: go 报错。检查 存在go安装包。执行再执行go version:即可解决问题。...
2022-07-04 16:51:13
3371
1
原创 elementui 表单 el-form 的那些使用小技巧
去掉原先 el-form-item 上的 label，使用 slot= label 自定义即可。<el-form-item prop="任务名称" required> <span slot="label"> <i class="el-icon-connection"></i> <span style="color: #46a0fc;"> 任务名称 </span> </span></el-fo
2022-04-08 15:32:16
2583
原创 HTTP 的成长史（HTTP1.0，HTTP2.0， HTTP3.0，HTTPS）
HTTP 1.0 之前的历史 HTTP 1.1 的是什么，好处，坏处 HTTP 2.0 是什么，好处，坏处 HTTP 3.0 是什么 HTTPSHTTP/0.9HTTP 于 1990 年问世。那时的 HTTP 并没有作为正式的标准被建立。 现在的 HTTP 其实含有 HTTP1.0 之前版本的意思。1990 年 11 月，CERN 成功研发了世界上第一台 Web 服务器和 Web 浏 览器。两年后的 1992 年 9 月，日本第一个网站的主页上线了。http://www.ibara...
2022-01-03 09:01:47
2226
原创 React Hooks 详解（2022的第一篇文章，献给 React Hooks）
什么是 React Hooks，React 一直提倡使用函数组件，但是有一些功能只有类组件具备，比如函数组件没有实例，没有生命周期函数，而 React 16.8 提出的 Hooks 概念可以在不编写 Class 的情况下，使用 React 特性。凡是 use 开头的 React API 都是 Hooks。Hooks 解决的问题：类组件的状态逻辑难复用，层级冗余，复杂难以维护。比如在 componenDidMount中注册的事件或者其他逻辑，需要在componentWillUnmount 中卸载，编..
2022-01-02 10:09:19
2803
原创 react-native 开发之使用 formik + Yup 搭建Login(登录)页面
formikReact中的表单非常冗长。更糟糕的是，大多数表单助手都使用了太多的魔法，并且通常有显著的性能成本。YupYup是一个用于值解析和验证的JavaScript模式生成器import * as yup from 'yup';// 编写自己需要的规则let schema = yup.object().shape({ name: yup.string().required(), age: yup.number().required().positive().integer()}.
2021-12-19 16:53:35
761
原创 我希望我可以给你讲明白---中间件
Koa 的中间件就是函数，可以是 async 函数，或是普通函数，通过app.use来进行调用。// async 函数app.use(async (ctx, next) => { const start = Date.now(); await next(); const ms = Date.now() - start; console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);});// 普通函数app.use((ctx, nex.
2021-12-18 16:39:01
382
原创 推荐前端知识点好文
This《2w字大章 38道面试题》彻底理清JS中this指向问题 Promise/async/Generator9k字 | Promise/async/Generator实现原理解析 【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)
2021-12-05 07:58:03
553
原创 JavaScript设计模式 ---- 从买房子看(发布-订阅者)模式
不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常之广泛。举个例子????：玛卡巴卡在网上看上一个小推车，但联系到卖家后，发现小推车卖光了，但是玛卡巴卡对这个小推又非常喜欢，所以就联系卖家，问卖家什么时候有货，卖家告诉她，要等一个星期后才有货，卖家告诉玛卡巴卡，要是你喜欢的话，你可以收藏我们的店铺，等有货的时候再通知你，所以玛卡巴卡收藏了此店铺。唔西迪西和依古比古看了图片之后，也喜欢这个小推车，也收藏了该店铺；等来货的时候就依次会通知他们。你看这是一个典型的发布订阅模式，卖家是属于发布者，玛
2021-11-28 11:12:30
271
原创 forEach中return有效果吗？如何中断forEach循环？
在forEach中用return不会返回，函数会继续执行。arr.forEach(callback[, thisArg])，callback会接收到三个参数：currentValue、index、array。var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"];ary.forEach(function (value, index, _ary) { console.log(value); return value ===
2021-11-27 18:25:08
2388
原创 React 动效 Framer motion，给你的页面添加一点动感
Framer motion的核心API是motion的组件。每个HTML和SVG标签都有对应的motion组件。他们渲染的结果与对应的原生组件完全一致，并在其之上增加了一些动画和手势相关的props。比如：<motion.div /><motion.span /><motion.h1 /><motion.svg />使用与平常的插件相差无几。npm install framer-motion当然，这里还是有一点不一样的，如果直接在页面中.
2021-11-27 14:54:35
2808
原创 CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局（左列定宽, 右列自适应）DOM结构<div class="box"> <div class="box-left"></div> <div class="box-right"></div></div>float + margin.box { height: 200px;}.box > div { height: 100%;}.box-left { width: 200px; .
2021-11-17 23:25:29
437
原创 Vue 项目中配置 service worker
使用 vue-cli 创建项目，在配置项中选择 PWA。脚手架就会搭好基本的框架。这个时候不做任何的额外配置也是正常使用。当然，只有打包之后在线上，猜可以看到效果。根目录下新建 server.jsvar express = require('express');var app = express();const hostname = 'localhost';const port = 3838;app.use(express.static('./dist'));app.listen(por.
2021-11-14 15:42:08
2278
原创 CSS 的 Position
定位类型相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。大多数情况下，height和width 被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通.
2021-11-13 20:20:14
622
原创 DNS（Domain Name System，域名系统）
域名和 IP 是多对一的关系，一个 IP 可以有多个域名，但一个域名只能有一个 IP。DNS 是应用层协议，运行UDP协议之上，使用端口43为什么需要 DNS ？用户与互联网上某台主机通信时，必须要知道对方的 IP 地址。但是用户难以记住长达32位的二进制地址。域名系统就是将互联网上的主机名字转换为 IP 地址。端口需要DNS解析吗 ？不需要，有默认端口，http(80)、https(443)，如果要指定端口直接在URL里面写。DNS 查询过程一般而言，「本地服务器查询是递归查询」，而**「.
2021-11-13 14:59:12
1108
原创 koa2 CORS 跨域问题
简介它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。但在实现上，跟AJAX完全一致，需要的是浏览器和服务器的配合。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，具体来说，就是在头信息之中，增加一个Origin字段。而服务器端需要处理的字段也是与 CORS 相关的字段，都以 Access-Control- 开头。服务器收到请求以后，检查了 Origin、Access-Control-Request-Method和Access-C.
2021-11-09 00:08:08
1105
原创 Vue 和 React 的对比
React 和 Vue 有许多相似之处：使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时.
2021-11-08 08:03:39
640
原创 Mac下安装 Mongodb
进入 /usr/localcd /usr/local下载sudo wget https://fastdl.mongodb.org/osx/mongodb-macos-x86_64-5.0.2.tgz解压sudo tar -zxvf mongodb-macos-x86_64-5.0.2.tgz重命名sudo mv mongodb-macos-x86_64-5.0.2 mongodb设置PATH为了方便运行，设置path还是要好一点： 打开bash配置文件vi ~/.bash_pro
2021-11-06 12:26:39
132
原创 元素居中的方式总结大全
水平居中父元素是块级元素，子元素是行内元素，给其父元素设置text-align:center.father { width: 200px; height: 200px; background-color: antiquewhite; text-align: center;}.son { background-color: aqua;}<div class="father"> <span class="son">son</span>&
2021-11-04 23:09:40
62
原创 mac安装 MySql
安装安装地址：https://dev.mysql.com/downloads/mysql/点击 Download安装时选择传统密码设置密码，比如（12345678）这种。系统设置偏好中出现海豚，表明安装成功。配置环境变量vim .bash_profile加上：PATH=$PATH:/usr/local/mysql/bin使配置生效：source .bash_profile测试能否连上mysql： mysql -uroot -p配置 .zshrc 来防止电脑重启后mysql命令
2021-10-31 08:59:48
88
原创 视区单位vw, vh简介以及可实际应用场景
基本概念vw和vh：视口单位中的“视口”，桌面端指的是浏览器的可视区域，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。vmin和vmax：vmin为当前vw 和vh中较小的一个值；vmax为较大的一个值。怎么证明你猜是浏览器内部宽度大小(window.innerWidth)？是整个浏览器的宽度大小(window.outerWidth)？还是显示器的宽度大小(screen.width)？上代码<!DOCTYPE html>.
2021-10-26 22:27:18
853
原创 Mac上搭建直播服务器 nginx + rtmp
直播技术介绍直播技术涵盖很广，现如今广泛了解的有视频网站的个人直播、手机直播、安防方面的摄像头监控等会使用到直播的技术。绍直播流程中的各个技术环节。可以理解分为采集端、流媒体服务器以及播放端；还需要了解什么是推流，什么是拉流。采集端：顾名思义是视频的源头，视频的采集一般都是从真实的摄像头中得到的。例如移动端设别、PC端设备的摄像头以及一些摄像头设备流媒体服务器：流媒体服务器是整个直播技术框架的非常重要的一环，它需要接收从采集端推上来的视频流，然后将该视频流再推送到播放端播放端：播放端就是各种.
2021-10-24 12:25:22
4491
原创 前端如何获取数据，从 ajax 到 websocket
ajax 是什么可以在不重新加载整个网页的情况下，对网页的某部分进行更新。（重新拍照理解为重新加载网页）直白地说，就是没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。AJAX只是一种技术，不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。手写 ajax创建 ajax 对象等待数据响应调用 open调用 sendlet xhr = nul.
2021-10-21 11:21:07
1746
原创 Vue 的自定义选项合并策略，我觉得你一定需要
optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合并后.
2021-10-19 10:19:46
827
原创 vite 开发入门
Vite 意思是轻快的意思。它和我们以前使用Vue-cli的作用基本相同，都是项目初始化构建工具，相当于Vue项目构建的第二代产品，当然它也包含了项目的编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的，Rollup是JavaScriptd的模块bundler(打包器)，可以将一小段代码编译为更大或更复杂的内容，例如库或应用程序。Vite 提供的是开发环境中的编译，打包工作是依靠的 Rollup。Vite特性介绍轻快冷服务启动。冷服务的意思是，在开发预览中，它是不进行打.
2021-10-15 09:32:18
98
原创 setTimeout() 和 setIntervale() 小结
setTimeout() JavaScript语言是单线程语言，它有一个叫做执行队列的东西来决定代码的执行顺序，而定时器的作用是：在特定的时间后将代码插入到执行队列。这里要特别理解：定时器setTimeout(function, Interval)这里的Interval是指当Interval个单位时间过去之后将代码function插入到执行队列中，而不是过去Interval个单位时间之后执行function代码。也就说明代码的执行的时间将大于等于Interval。使用 setTimeo
2021-10-13 17:03:35
116
原创 浏览硬核知识点
1. 常见的浏览器内核浏览器/RunTime内核（渲染引擎）JavaScript 引擎Chromewebkit->blinkV8FireFoxGeckoSpiderMonkeySafariWebkitJavaScriptCoreEdgeEdgeHTMLChakra(for JavaScript)IETridentJScript（IE3.0-IE8.0）OperaPresto->blinkLinear A（4.0-6.1
2021-10-12 08:57:54
150
原创 如何将多个动画应用于一个元素上，今天让我来告诉你
场景：一个三角形从透明到实体，持续一秒，然后匀速前进五秒，然后变大持续两秒第一种：CSS + JS这一种比较麻烦，而且不好控制，写起来也费劲。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
2021-10-10 15:26:33
139
原创 CSS 小知识点之伪元素的应用
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)...
2021-10-08 14:21:31
146
原创 React 中 setState 的异步操作
在使用state的时候， 如果我们企图直接修改state中的某一个值之后直接打印（使用）他，就会发现，他其实并没有改变。就像下面的例子，企图通过点击事件之后就使用修改之后的state的值，但是会发state中的并没有被立即修改，还是原先的值，我们都知道那是因为 setState就相当于是一个异步操作，不能立即被修改。import React, { Component } from 'react';export default class App extends Component { con.
2021-10-07 15:29:39
1009
原创 useEffect 中 return 函数的作用和执行时机
官网的代码import React, { useState, useEffect } from 'react';function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } Chat
2021-10-06 22:15:09
16077
原创 给我五分钟，我把 keep-alive 的用法和原理跟你说明白
keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。主要是有include、exclude、max三个属性；前两个属性允许keep-alive有条件的进行缓存；max可以定义组件最大的缓存个数，如果超过了这个个数的话，在下一个新实例创建之前，就会将以缓存组件中最久没有被访问到的实例销毁掉。两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。Home.vue<template> <div class="hello"&.
2021-10-06 20:50:23
563
原创 3万字总结 HTML + CSS，还不赶紧学起来✔️
HMTL + CSS1. DIV+CSS布局的好处代码精简，且结构与样式分离，易于维护代码量减少，减少了大量的带宽，页面加载更快，提升了用户的体验对SEO搜索引擎更加友好，H5新增了许多语义化标签允许更多炫酷的页面效果，丰富了页面符合W3C标准，保证网站不会因为网络应用的升级而被淘汰缺点: 不同浏览器对web标准默认值不同，所以更容易出现对浏览器的兼容性问题。2. HTML 标签语义化2.1 HTML语义化背景介绍HTML结构语义化，是最近几年才提出来的，以前的html结构，一打开.
2021-10-06 09:06:14
329
原创 JavaScript 中的集合
对于任何 JavaScript 程序来说，对数据的结构化组合和访问都是一个关键部分。这个语言从一开始到现在，创建数据结构的主要机制一直都是数组和对象。当然，基于它们已经建立了很多作为用户库的高级数据结构。1.TypedArrayTypedArray 对象描述底层的二进制数据缓冲的阵列状的图。没有命名的TypedArray全局属性，也没有直接可见的TypedArray构造函数。相反，有许多不同的全局属性，其值是特定元素类型的类型化数组构造函数。new TypedArray(); // new in
2021-10-05 16:35:19
295
原创 回溯算法经典题目汇总
代码模板let BFS = function (start, target) { let queue = []; // 核心数据结构 let visited = new Set(); // 避免走回头路 queue.push(start); // 将起点加入队列 visited.add(start); let step = 0; // 记录扩散的步数 while (queue.length !== 0) { let length = queue.length; .
2021-10-02 18:21:37
232
原创 来一个前端闭包知识点
什么是闭包MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。自由变量：是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。闭包共有两部分组成：闭包 = 函数 + 函数能够访问的自由变量。闭包是指有权访问另外一个函数作用域中的变量的函数。闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。fu.
2021-09-27 10:32:08
111
原创 OJ输入练习（JS 版）
OJ 练习写这一篇的目的是因为我没有参加算法比赛的经验，平常练习也是在 LeetCode 上，使用都是核心代码模式。其实现在想想还挺简单的。系统输入的是一个字符串，那我们需要的可能是其中的数字，所以第一步就是需要对字符串进行切割成为字符串数组，第二步就是对其中的每一个元素使用 parseInt 做数字转换处理。最好的是我们封装一个函数，这样将取到的参数传入其中。如何，就可以像使用核心代码模式一样编写了。https://ac.nowcoder.com/acm/contest/5657/Alet l
2021-09-21 16:18:56
277
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人