- 博客(143)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端科举八股文-CSS篇
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
2024-04-25 22:42:04
396
原创 前端科举八股文-HTML篇
http 是超文本传输协议,它是一个浏览器和服务器之间必须遵守的一个标准. 它是一个无状态的应用层协议所谓的无状态就是协议对于事物处理没有缓存, 在一次请求和返回数据的过程中不会缓存任何信息. 也就是说对于第二次请求获取同样的数据也需要重新发起请求,重新获取数据.由于js是单线程的特性，在执行一些高开销或者搞延迟的任务时容易造成页面渲染阻塞，webworker是一种独立于主线程的之外的独立运行js线程。可以单独去执行一些高开销的任务然后将结果传回主线程。
2024-04-23 22:07:10
1171
原创 useEffect和useLayoutEffect的区别
首先 贴上一个我觉得效果最直观的一个🌰！如果但以此🌰来看的话，1、如果我们放开的是useEffect的代码注释，页面表现会3S后变成0，然后再3S后变成一个随机数。2、如果我们放开的是useLayoutEffect的代码注释，页面的表现则会是6S后直接变成一个随机数。结合这个🌰我们再来理解useEffect和useLayoutEffect的定义差别1、useEffect是异步的，不会阻塞页面渲染，在dom挂载到页面之后执行。
2024-02-29 22:27:29
370
原创 Vue3响应式原理初探
各位看官稍安勿躁，全部代码算上css才100行，当然，vue内部实现肯定比我这个要复杂，比如它内部存更新函数是用的set等等，但是对于响应式原理而言，我们只需要拿出最精华的部分即可。那么剩下的就是需要完成vue组件的更新工作了（其实也就是说，在响应式数据更新的时候，重新执行一下mount里的代码完成页面刷新）所谓的建立链接，也就是通过effect执行的函数中如果包含了响应式对象，如果响应式对象发生改变，函数就会重新执行。在vue2中，底层会通过definproperty来响应式data返回的对象，也就是。
2023-10-18 23:48:56
602
1
原创 react性能优化之shouldComponentUpdate的原理剖析
同样的，我也不会对这个函数的语法进行分析，主要功能就是页面展示1，2，3，点击之后数字+1。如果组件的props和state没有变化，但是它的父组件render执行了，那么也一并会触发子组件的执行！此时渲染1和2的两个son组件，它们的props是没有变化的，它们的states也是没有变化的，但是它们的render函数还是执行了。其实在图中可以看出，由于使用的是引用对象而且指向的是同一个内存区域，所以在数据更新的时候，所以在作比较的时候永远是“自己等于自己”。如果你的答案是“NO”，那么看下面这个例子。
2023-04-14 14:02:35
1735
1
原创 androidstudio虚拟机运行react-native项目踩坑指南
本文详细的记录了照react-native官网文档运行项目踩到的所有坑，诚然，官网只介绍了每一步，最后确实是可以正常运行项目，但是并没有涉及到每一步会出现的问题。此篇文章就每一步可能出现的问题做进一步展开。
2023-04-12 07:41:35
1544
原创 useCallback和useMemo一点通
useCallback和useMemouseCallback和useMemo的区别useMemouseCallback首先从简单的讲一下两者的区别useCallback和useMemo的区别基本使用 // 贴上代码片利于复制 import { React, useState, useMemo, useCallback } from "react"; export default function TestPage() { const callBack = useCallback(() =&
2022-04-12 00:28:53
763
原创 node连接MongoDB及常见操作记录一下
MongoDB常见操作记录准备工作安装mongoDB库连接数据库个人用于全栈项目后端做接口用的准备工作安装mongoDB库 npm i mongodb安装一个mongodb库连接数据库 // 数据库地址 不更改的话都是这个默认地址 const url = "mongodb://localhost:27017"; // 连接数据库 const client = new MongoClient(url); // 数据库名字 const dbName = "admin"; async
2022-03-31 15:55:13
1405
原创 express鉴权从入门到入境
express鉴权之路token图示一点通(图是我自己画的，虽丑勿怪)express鉴权下载加密/解密包加密基本使用（生成token）传递Token查看token验证token讲在前面的话：一个成熟的全栈工程师开发的前后端项目鉴权是必不可少的，接下来我们就用一篇文章来介绍一下express鉴权之路。本文主要目的是介绍鉴权，那么默认读者已经配置完成了express的跨域基本配置以及options请求处理以及post请求参数接收token图示一点通(图是我自己画的，虽丑勿怪)看这个示意图就知道校验过程
2022-03-24 18:13:25
1998
原创 Node.js从入门到入土
Node.js从入门到入土Node.js系统模块fs模块读取文件(readFile)写入文件(writeFile)path模块路径拼接 (path.join)获取路径中的文件名字（path.basename）http模块创建基本的web服务器request对象response响应对象node.js中的模块化Node.js系统模块fs模块使用fs模块（导入） const fs = require("fs");读取文件(readFile)目录结构如下基本使用方法如下 fs.readFile(
2022-03-23 10:39:02
1420
原创 react-router6
react-router6搭建router项目react-router版本目前已经升级到最新的6.x版本，所以react入门指南中关于路由部分的使用某些用法已经淘汰。这里用一篇简短的文章来概括和复习一下react-router的基本用法。搭建router项目第一步，首先需要创建一个react项目 creat-react-app router6...
2022-03-06 20:36:58
1460
原创 react扩展
react扩展setState对象式的setState函数式的setState组件懒加载HooksuseState基本使用effectHook的基本使用refHookscontextcontext传递值context接受值pureComponentErrorBoundarysetState对象式的setState在我的另一篇文章react入门到入魔中，只用到了setState最简单的用法 this.setState({xxx:'新值'});由于setState是一个异步更新方法，所以以下写法是拿
2022-03-03 22:49:33
555
原创 react从入门到入魔
react从入门到入迷React的基本使用创建虚拟dom的两种方式使用jsx创建虚拟dom使用原生js创建虚拟domReact的基本使用直接上hello word案例 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
2022-03-02 20:06:08
3244
3
原创 koa使用setCookies不生效
koa使用setCookies不生效问题具体情况如标题，最近在跟着视频课程学习KOA，在学习到koa中cookies的使用时踩了一个巨坑！具体表现如下服务器端代码 ctx.set("Access-Control-Allow-Origin", "*"); ctx.set( "Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With ,
2021-11-16 16:25:58
1791
原创 数据库初探之windows如何使用Mysql
Mysql从入门到入土如何安装并使用Mysql下载Mysql安装Mysql如何安装并使用Mysql笔者作为一个前端想了解并使用Mysql还是走了不少的弯路。所以在此写一篇傻瓜教程。下载Mysql话不多说 挂上传送门由于最近的8.x版本不太稳定，所以我们切换到目前最稳定的5.x版本下载点击图示链接切换到5.X版本安装Mysql1、不要选择默认开发项，由于我们只需要Mysql服务，我们只选择server only即可2、第二步直接点excute执行...
2021-09-28 00:21:15
227
原创 Vue全家桶原理剖析之VueX篇
有了Vue-router的基础之后，这一篇我们直奔主题，实现自己的Vuex。安装VueX第一步，使用Vuex之前必须先下载。使用vue add vuex来安装Vuex，安装完成之后，项目的目录结构中会自动多出Vuex的文件夹，且在main.js中会多出对Vuex文件的引用。VueX的简单使用编辑store下的index.js文件夹如下所示。import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default
2021-05-28 16:09:53
184
1
原创 Vue全家桶原理剖析之Vue-router篇
Vue-router原理剖析从入门到放弃第一个问题由于此文主要为介绍Vue-router的原理，就不赘述router的基本用法啦。第一个问题vue-router是一个插件，包括在使用Vue-cli创建一个Vue项目的过程中，都可以选择当前项目使用或者不使用Vue-router，但是在任何一个使用l路由管理的Vue项目中，在main.js都可以看到如下代码。new Vue({ router, render: h => h(App)}).$mount('#app')那么问题来了，为
2021-05-26 15:24:30
316
原创 three.js textureLoader加载图片失败
textureLoader无法加载图片three.js的坑真的不是一般的多，关键是使用者还少，面向百度谷歌编程根本搜不到类似案例。博主在使用three.js中的textureloader，加载本地图片失败，加载网络图片跨域错误。基本无解。搜索之后发现一篇神文解决方案注：源码行数因版本不同会有不同，尽量搜索有关textureloader的关键字来查找，比如 THREE.TextureLoader.prototype修改图示中标记的行...
2021-05-11 10:28:47
5165
5
原创 angular覆盖第三方组件样式无法生效
原因：angular会给引用的样式打上自定义的后缀，按照dom元素嵌套来定级。比如有一个这样的结构 <div class='div-class'> <span class='span-class'></span> </div>此时如果在div所在的组件修改span元素的样式 .div-class .span-class{ color：red }往往是无法生效的加上ng深层查找css样式标识即可::ng-deep .div-clas
2021-04-15 19:09:09
1198
4
原创 微前端之qiankun初体验
什么是qiankun官方记载：qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。随着实际生产项目需求越来越多，项目体积也会越来越壮大，而每次初加载项目时需要加载全部的功能。效率比较低下。qiankun的使用场景之一就是在实际项目的开发过程中，将一个项目分解成多个子应用，（只有到访问到该模块时）再按需加载子应用。还有一种使用场景是，如果你的公司先前维护了一个项目，项目的功能模块都是前人写的（可能之前的技术栈比较旧），可能使用的
2021-04-05 14:09:16
1594
6
原创 Angular快速上手指南
angular快速上手指南angular脚手架下载以及angular项目的新建angular脚手架安装命令angular创建项目命令启动angular项目angular中的目录结构以及核心文件目录结构核心文件如何在angular中创建组件如何使用组件angular中的数据绑定angular脚手架下载以及angular项目的新建angular脚手架安装命令npm install -g @angular/cliangular创建项目命令npm new XXXX(项目名)执行过程中会让用户自己定
2021-03-02 21:37:53
2992
原创 TypeScript入门学习指南
TS的安装以及初步使用typescript的安装命令npm install -g typescript 我们新建一个TS文件夹，拖入vscode中打开后在终端输入以上命令以全局安装TS。之后可以用以下命令来检测TS是否安装成功 tsc v如果成功出现版本号则说明安装成功运行ts文件首先我们可以新建一个TS后缀的文件。文件中可以先随便写一些简单的JS代码。此时vs中的目录结构如下所示在命令行中手动输入以下命令来编译TS文件。tsc index.ts这里有一个坑，有一个设置会导致即
2021-02-28 23:07:48
386
2
原创 前端性能优化之虚拟列表的理解与实现
虚拟列表什么是虚拟列表?为什么要使用虚拟列表虚拟列表如何实现什么是虚拟列表?首先给出定义，什么是虚拟列表。虚拟列表在开发者眼中并不能是一个真正的列表，它可以看作是可视区域中的几条数据，并且可以监听到用户的滚动事件来动态渲染可视区域的显示数据。但是这个可滚动的可视区域在用户眼中，就是一个列表。为什么要使用虚拟列表如果有一个长达20w的数据需要渲染。可能由于业务需求或者是万恶的产品经理列表还不能做分页显示。此时我写了个小demo来看看页面的表现<div id='app'>
2021-01-21 14:56:15
3384
11
原创 CSS之如何正确处理文本溢出
很多大佬估计看到标题会觉得此事简直轻而易举。不妨实际操作一番。我在实际工作中遇到了如此的业务需求。文本最长显示五个字，超出使用...代替话不多说，直接开肝。html<div class="overflow-deal">这是五个字</div>css.overflow-deal{ overflow: hidden; width: fit-content; max-width: 5em; text-o.
2020-11-29 15:41:29
292
原创 v-if和v-for的优先级带来的性能优化问题
如果我们想根据用户的权限来设置一个列表是否渲染。代码如下<div v-for='(item) in arrList' :key='item.id' v-if='userRank'>操作和实现起来都没有什么问题。但是会带来不必要的性能消耗。Vue官方文档如是写道。这句话代表着，当v-if和v-for同时出现。渲染函数会先执行到v-for。我们的本意是根据用户权限来控制是否显示一个列表。但是如果代码如上的话v-if实际上是执行到了列表渲染的每一项。如果列表项较少的话，带来的性能
2020-11-06 12:55:35
4623
原创 如何在window电脑和Ipad之间互传文件之优雅的解放Ipad生产力
本文回顾了在实现Ipad和windows10之间互通文件时踩过的所有坑。前几部都是和某乎上按部就班的来。吃水不忘挖井人附上链接https://www.zhihu.com/question/20330664首先新建一个文件夹依次执行以下步骤。右键===>属性===>共享===>高级共享===>共享此文件夹===>权限===>勾选全部权限完成之后回到这一步点击共享下拉选择Everyone===>共享===>完成。到..
2020-11-05 17:32:29
10045
4
原创 leetcode 3、无重复字符的最长子串
基本思路。从第一个字符开始遍历。一直遍历到重复字符位置，然后判断当前遍历到的字符串和之前遍历到的字符串。取大值保存。var lengthOfLongestSubstring = function(s) { if (s=='') return 0 let maxlength = 1 for(let i=0;i<s.length;i++){ let targetArr = [s[i]] .
2020-11-03 14:52:44
125
原创 GIT 常用命令（个人工作记载）
新建本地分支追踪远程分支git checkout -b 本地分支名x origin/远程分支名x回滚到某一次版本git log 查找版本号git reset
2020-10-31 09:43:30
154
原创 关于addEventListener选项对象参数passive的理解
很久很久之前的addEventListener基本语法addEventListener(type, listener, useCapture)目前现行最新的addEventListener基本语法addEventListener(type, listener[, useCapture ])addEventListener最常见的用法（直接举栗子）<!DOCTYPE html><html lang="en"><head> <me
2020-09-04 21:16:38
1968
原创 如何使position:fixed相对于父元素定位
在父元素css上加上transform: scale(1);好像是为了生成一个什么堆叠上下文，亲测有效
2020-08-05 16:49:22
2146
2
原创 一句话弄懂target和currentTarget
xxx.addEventListener("click",function(e){console.log(e.target,e.currentTarget)})xxx就是currentTarget,实际点击的地方就是target。currentTarget不会变，target随着点击的地方变化而变化
2020-08-03 14:45:04
452
原创 Vs code如何设置在新建标签页打开文件
vs code打开文件时会替换当前文件，使得开发极为不便。两种方法。第一种 ctrl+t搜索到文件后双击打开。第二种 在settings.json文件中设置如下字段"workbench.editor.enablePreview": falsectrl+t搜索settings.json打开配置文件。...
2020-07-31 09:46:41
1071
原创 jQuery datatable踩坑之使用API报错XX.draw() is not a function
众所周之datatable的使用方法，这里不做赘述js代码that.table = $('#departmentListTable').dataTable(configData);html代码 <div> <table id="departmentListTable" border="0" cellpadding="0" cellspacing="0" class="kt-datatable ellipsis" width="100%"
2020-07-24 11:37:25
1683
原创 LeetCode 101 对称二叉树
var isSymmetric = function (root) { if (!root) return false function check(leftTree, RightTree) { if (leftTree == null && RightTree == null) return true else if (leftTree != null .
2020-06-12 21:34:01
108
原创 LeetCode 2、两数相加
先设计两个函数第一个数组转链表第二个链表转数组整体思路为先把传入的两个链表转成数组，执行加法运算之后将结果转成链表输出。AC代码var addTwoNumbers = function(l1, l2) { function node2arr(listNode) { let arr = [] do { arr.push(listNode.val) listNod
2020-06-12 17:03:27
94
原创 LeettCode 1、两数之和
给定一个整数数组 nums和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]暴力法：var twoSum = function(nums, target) { for(let i=...
2020-06-11 01:04:20
266
转载 深入理解浏览器内核------我！值得拥有！
浏览器进程？线程？傻傻分不清楚！在生活中，浏览器和我们的工作和生活息息相关。做为前端开发，我们代码的应用场景往往是在浏览器上。浏览器对前端的重要性不可一日而语。那么我们对浏览器是否有比较清晰的了解呢？什么是多进程架构浏览器？为什么浏览器内核是多线程？Javascript是单线程又是什么鬼？进程和线程是否分得清楚呢？进程（process）和线程（thread）进程和线程是操作系统的基本概念，许多人会有所了解，但不能较为清晰的分辨。 这里我们需要了解下面几个点。CPUCPU是计算机的
2020-06-09 18:09:25
262
原创 nextTick的理解
大家都听过vue是异步更新dom的。但是我们应该如何理解vue异步更新dom这句话。来看看下面这个栗子<div id="app" @click = "change" ref="div"> {{ message }}</div>data:{ message:1},methods:{ change(){ let vm = this for(let i=0;i<10;i++) vm.mess
2020-05-23 21:32:48
340
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人