- 博客(118)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 仿网易云音乐PC
仿网易云音乐PC使用到的技术页面全部通过函数组件实现使用styled-components解决组件间样式编写冲突的问题使用axios发送网络请求使用react-router，借助react-router-config完成路由的集中映射管理使用redux进行数据的集中管理通过redux-thunk在```redux````进行异步请求通过pm2对后台服务进行进程守护后台服务借助：NeteaseCloudMusicApi完成功能推荐页面搜索功能搜索对应歌曲会出现相应的搜索结果。
2021-02-01 10:15:35
948
原创 数组push、pop、shift、unshift的模拟实现
Array.prototype.myPush = function (val) { const arr = this; arr[arr.length] = val; return arr.length;};Array.prototype.myPop = function() { if (!this.length) { return undefined; } const val = this[this.length - 1]; this.length -= 1;
2020-12-22 19:43:20
306
2
原创 事件模型
文章目录事件模型事件流dom0事件模型（原始事件模型）事件的绑定与取消优点缺点IE事件模型绑定事件和取消事件dom2事件模型（w3c）绑定事件和取消事件事件对象dom事件模型常用属性IE事件模型常用的书信事件委托（代理）封装一个事件侦听器函数事件模型事件模型分为dom0事件模型、dom2 事件模型和 IE 事件模型三种事件流事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。dom0事件模型（原始事件模型）在该模型中，事件不会传播
2020-12-20 15:22:13
469
1
原创 pm2部署服务
常见命令首先需要的是先安装 pm2npm pm2 i -g启动项目：pm2 start 脚本 --name 自定义名称查看运行项目：pm2 ls重启项目：pm2 restart 自定义名称停止项目：pm2 stop 自定义名称删除项目：pm2 delete 自定义名称举例以在云服务器部署 node服务为例远程连接服务器可以使用 xshell，向服务器上传文件可以使用 xftp部署，输入pm2 start node app.js --name jianshu_server
2020-12-02 01:20:55
699
原创 multer 的使用
index.js 文件const express = require('express');const bodyParser = require('body-parser');const path = require('path');const { multer } = require('./model/multer');const app = express();app.use(express.static('static'));app.use(bodyParser.urlencode
2020-11-28 20:52:11
1211
原创 三栏布局实现的几种方式
文章目录说明1、利用浮动2、利用绝对定位3、利用 flex 布局圣杯布局方式一：利用浮动和定位实现方式二：利用 flex 实现双飞翼布局完整代码说明三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有如下五种方式实现left 为300px，right 为200px1、利用浮动原理：浮动元素脱离文档流html结构<div class="wrapper"> <div class="left"></div> <div class
2020-11-27 22:52:27
1076
2
原创 css常见隐藏元素的方法
1、使用 display：none隐藏元素，隐藏后该元素不会在页面中占据位置，也不会响应绑定的监听事件2、使用visibility:hidden隐藏元素，隐藏后该元素会在页面中占据位置，但是不会响应绑定的监听事件3、使用 optaicy：0隐藏元素，隐藏后该元素会在页面中占据位置，会响应绑定的监听事件4、通过绝对定位将元素移除到可视区域外5、通过 translate: scale(0, 0)，来缩放该元素，以实现隐藏。元素会在页面中占据位置，但是不会响应绑定事件<!DOCTYPE htm.
2020-11-27 18:12:22
265
原创 TypeError: Cannot call a class as a function
在引入 thunk 时报的错纠结了一晚上，蓦然间，才发现，我把包导错了。。（心态直接炸了）import thunk from ‘react-thunk’应该改为import thunk from ‘redux-thunk’
2020-11-19 11:42:54
2375
原创 promise详解
什么是 promisePromise 是一种异步编程解决的新方案（旧的方案回调函数和事件）。简单来说，Promise 就是一个构造函数，promise对象主要是保存了异步操作的结果，promise 的状态Promise 有pending（进行中）、fulfilled（成功）和 rejected（失败）三种状态fulfilled 有时也称之为 resolvedPromise状态的改变是由内部异步操作的结果决定的，也就是说不管外界发生了什么变化，都不会影响到 Promise 状态的改变Promis
2020-11-02 22:57:54
494
原创 防抖和节流
文章目录防抖 debounce应用场景实现基础实现事件第一次发生时会自动的触发一次请求函数取消请求函数节流 throttle应用场景实现基础实现最后一次触发事件，还执行一次请求函数总结防抖 debounce当事件触发时，相应的请求函数并不会被立即触发，而是会先等待一定的时间当事件频繁触发时，请求函数的触犯会被频繁的推迟只有等待了一段时间也没有事件触发，才执行请求函数应用场景输入框中频繁的输入内容，搜索或者替换提交信息频繁的点击按钮，触发某个事件监听浏览器滚动事件，完成某些特定操作用户
2020-10-29 19:35:12
208
3
原创 call、apply和bind的简单实现
call、apply 和 bindcall 和 apply： 会调用原来的函数并改变其 this 的指向，this指向的是传递过来的第一个参数bind：返回一个新的函数，在新的函数内部会调用用原来的函数；并改变其 this 的指向，this 为传递的第一个参数call、apply、bind 的第一个参数若为 null 或 undefined 的话，那么 this 的指向将变为 windowcall 和 apply 的区别就是传递的参数不同call可以接受多个参数apply 只能传入两个参数，
2020-10-27 22:28:12
241
原创 手动配置 webpack（三） 之性能优化
webpack 性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR（热模块替换）当我们修改某一个文件，但其它的文件都没有修改时，用 webpack 进行打包，会发现所有的 文件都会被重新打包。但是只修改某一个文件，却将所有的文件都打包，这样做反而是没有必要的。所以，我们就要做的是，那个文件进行了修改，再打包的时候只打印这个文件即可，所以我们就需要使用到 HMR（热模块替换）常见的文件有三种：html、js 和 csscss文件，可以使用 HMR，因为 s
2020-10-26 21:33:24
121
原创 手动配置webpack（二）之生成环境配置
生产环境配置文章目录生产环境配置1、提取 css 成单独文件2、css 兼容性处理3、压缩 css4、js 语法检查5、js 兼容性处理6、js 压缩处理7、html 压缩处理1、提取 css 成单独文件下载安装相关插件npm install --save-dev mini-css-extract-plugin修改配置文件const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports =
2020-10-24 21:47:12
125
原创 手动配置webpack（一）之开发环境配置
开发环境的基本配置1、初始化配置初始化 package.json文件npm init -y下载安装 webpack 和 webpack-cil：npm i [email protected] [email protected] --sava-dev2、创建配置文件创建 webpack.config.js文件为这个文件进行简单的配置const { resolve } = require('path');module.exports = { extry: './src
2020-10-24 21:42:52
344
原创 用两个栈实队列
题目链接前提js数组中，可以用数组模拟栈或队列栈：push 和 pop队列：push，unshift分析用两个栈模拟队列也就是通过两个栈，实现队列的 push 和 shift 方法代码实现var CQueue = function() { this.stack1 = []; this.stack2 = [];};CQueue.prototype.appendTail = function(value) { this.stack1.push(value);};CQueu
2020-10-18 15:45:36
96
原创 从上到下打印二叉树
题目描述：从上到下打印出二叉树的每个节点，同一层的节点按照从左到右的顺序打印。从上到下打印二叉树 I题目链接分析：主要利用的是队列先进先出的特点，首先将根节点放入到队列中，然后每次的取出队首（front）的节点，对队首节点进行取值、判断是否有字节点的操作具体步骤判断所给的二叉树是否为空若为空，则直接返回空数组若不为空，则首先初始化一个存放节点的队列（其实是数组）和一个存放结果的数组，另外将根节点放入到队列中当对列不为空时，反复执行以下操作从队列中取出队首节点，并将其值放入结果.
2020-10-12 13:10:20
603
原创 二叉搜索树
文章目录二叉搜索树的常见操作插入数据查找数据查找最小值 min查找某个值是否存在 search(key)遍历数据（递归便利）先序遍历中序遍历后序遍历先序遍历（非递归）中序遍历（非递归）后序遍历（非递归）层次遍历删除数据二叉搜索树的常见操作insert：向树中插入一个新的键；search：在树中查找一个键，如果节点存在，则返回true；如果不存在，则返回false；preOrderTraverse：通过先序遍历方式遍历所有节点（递归）；inOrderTraverse：通过中序遍历方式遍历所有节点（
2020-10-11 20:38:20
158
原创 数组常见方法总结
数组数组的特点默认值是 undefined，当访问数组中不存在的索引时，会返回 undefined，而不是报错数组的大小不固定，会自动的进行扩容可以存储不同类型的数据分配给数组的存储空间是不连续的，哈希映射或链表传送门数组也是一个特殊的对象，对象有的方法数组也具有数组的创建字面量var arr = [1, 2, 3, 4];构造器构造var arr1 = new Array(1, 2, 3, 4); // [1, 2, 3, 4]var arr2 = new Array(10)
2020-10-04 10:43:57
171
原创 react-router 的使用
文章目录单页面富应用（SPA）前端路由url 的 hashhtml5 的 historyreact-router路由的基本使用常见的一些 APIBrowserRouter或HashRouterLink和NavLinkRouteSwitchRedirect路由的嵌套路由传递参数动态路由search 传递参数to传入对象react-router-config单页面富应用（SPA）单页面富应用：single-page application，简称SPA；单页面富应用是指整个Web应用有一个页面，当 url
2020-08-13 13:25:39
311
原创 react-redux的使用
文章目录认识 react-reduxreact-redux 的使用react-redux 相关 APIProviderconnect()mapStateToprops()mapDispatchToProps()redux-thunk的使用reducer 的合并redux 调试工具的使用举例不使用 redux使用 redux使用 react-redux认识 react-reduxreact-redux 是一个 react 的插件库，它是专门用来简化 react 应用中使用 redux的传送门react
2020-08-11 17:10:04
169
1
原创 redux的简单使用
文章目录redux 简介为什么需要 reduxredux 核心理念storeactionreducerredux 三大原则单一数据源State 是只读的使用纯函数来执行修改redux 的基本使用redux 简介redux 是一个帮助我们管理State的容器：redux是JavaScript的状态容器，提供了可预测的状态管理redux 不是只能用于 react 中的，它还可以用在 vue 等其它框架中redux 的主要作用就是：集中式管理（读/写）react 应用中多个组件共享状态为什么需要 red
2020-08-11 10:16:32
886
原创 node 对 es6 模块化的支持
node v13.2.0之前node v13.2.0之前，是不支持 ES6 模块化的，如果还想使用 ES6 的模块化，需要在 package.json 里做这样的配置在package.json中添加属性："type": "module"在执行命令中添加如下选项：node --experimental-modules src/index.js{ "type": "module", "scripts": { "start": "node --experimental-modules
2020-08-11 10:11:32
2865
2
原创 React高阶组件
文章目录什么是高阶组件高阶函数高阶组件的使用props 的增强不修改原有代码的情况下，添加新的props利用高阶组件来共享Context属性渲染判断鉴权生命周期劫持什么是高阶组件高阶组件（HOC）就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件高阶函数高阶组件其实有点类似与高阶函数，高阶函数是接收一个或多个函数作为参数，并返回一个函数举例有两个函数 login 和 exit，一个welcome，一个goodbye。两个函数先从localStorage 读取了username，然后对
2020-08-05 20:44:30
181
原创 Fragment和StrictMode的使用
Fragment由于 render 函数的返回值中只能有有一个根节点，所以每次返回内容时都需要包裹一个div元素这个div元素对于某些场景是需要的（比如我们就希望放到一个div元素中，再针对性设置样式）某些场景下这个div是没有必要的，比如当前这里我可能希望所有的内容直接渲染到root中，而不是所有的内容外面还需要包裹一个 div此时，就可以使用 Fragmentclass Title extends PureComponent { render() { return (
2020-08-03 22:06:12
206
原创 ref的使用
文章目录ref的作用如何使用传入字符串传入一个对象传入一个函数举例ref 的节点类型ref的作用react 中，很少直接的操作dom 元素，如果需要操作 dom 元素的话，那么就需要使用到 ref常见的应用场景管理焦点，文本选择或媒体播放触发强制动画集成第三方 DOM 库如何使用传入字符串使用时通过 this.refs.传入的字符串格式获取对应的元素传入一个对象对象是通过 React.createRef() 方式创建出来的使用时获取到创建的对象其中有一个current属性就是对
2020-08-03 21:26:35
1524
原创 react 事件总线
react 事件总线解决的问题：跨组件之间的事件传递如何实现借助第三方库 events来实现 传送门常见的 api创建EventEmitter对象：eventBus对象发出事件：eventBus.emit(“事件名称”, 参数列表)监听事件：eventBus.addListener(“事件名称”, 监听函数)移除事件：eventBus.removeListener(“事件名称”, 监听函数)使用前需要先安装，下面两种方式任选一个npm install events yarn ad.
2020-08-03 20:58:37
709
原创 如何避免组件没有必要的重新 render
文章目录render什么时候被调用组件没有必要的重新 render如何避免组件没有必要的重新 rendershouldComponentUpdatePureComponentmemorender什么时候被调用如图所示当 props 或 state 发生改变时， render 函数会被重新调用组件没有必要的重新 render在 App 中，有一个计数器的代码，当点击 +1 时，由于 state 发生了改变，那么就会重新执行App 中的 render 函数，而当 App 中的 render 函数被调
2020-08-02 22:18:26
804
原创 详解setState 方法
文章目录为什么要是用 setStatesetState 异步更新为什么要异步更新如何获取更新后的值同步 or 异步setState的合并数据的合并多个setState合并setState性能优化react 更新机制diff算法的作用传统 diff算法react diff算法对比不同类型的元素对比同一类型的元素对子节点进行递归keys的优化在最后位置插入数据在前面插入数据为什么要是用 setState当我们希望通过点击一个按钮从而改变一个文本时，就需要使用到 setState方法，比如：import R
2020-08-02 21:47:31
7640
原创 react 组件化开发
分而治之的思想将一个复杂的问题拆分成许多小的问题，通过解决每一个小问题进而解决复杂的问题。比如：在求解大数问题上就用到了分而治之的思想。组件化开发组件：组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个具体功能。而每一个组件还可以根据具体需求进行具体的划分，另外有的组件也可以在不同的页面进行复用常见的组件常见的组件有两种类组件，也叫做有状态组件函数组件，也叫做无状态组件区别：有状态组件：拥有状态、拥有
2020-08-01 20:21:54
641
原创 jsx的用法
什么是 jsxjsx 是一种 JavaScript 的语法扩展（eXtension），有时候也叫做 JavaScript XML，它能让我们可以在 js 中编写 htmljsx 的使用书写规范jsx的顶层只能有一个根元素，即就是最外层需要包括一个 div 标签或者 Fragment在 jsx 最外面包裹一个 () ，就可以进行换行书写jsx 中单、双标签都可以注释的使用render() { return ( <div> {/* 注释 */}
2020-07-31 23:14:13
1128
原创 初始react
react 简介react 是用于构建用户界面的 JavaScript 库 官网特点声明式编程：我们只需要维护自己的状态（数据），当状态（数据）改变时，React可以根据最新的状态（数据）去渲染我们的UI界面组件化开发多平台适配：可以开发移动端跨平台或 web 应用程序开发依赖react：react开发所必须的核心代码react-dom：渲染在不同平台所需的核心代码babel：将 jsx 转换成 react 代码的工具<script src="https://unpkg.c
2020-07-31 22:14:38
150
原创 声明式编程和命令式编程
声明式编程声明式编程是一种编程范式，，它关注的是你要做什么（what），而不是 如何做（how）也就是你只需要告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)举例：// 想要显示一个p标签<p>This is a text</p>查询学生中年龄大于18对的学生的信息select * from students where age > 18;命令式编程告诉“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命
2020-07-31 21:08:24
185
原创 字典（map）
字典的简单封装，key 为对象时暂时没有做处理，后续会处理class Dictionay { constructor() { this.items = {}; } set(key, value) { this.items[key] = value; } has(key) { return this.items.hasOwnProperty(key); } remove(key) { if (!this.has(key)) {
2020-07-25 21:49:19
146
原创 集合（set）
简介集合是由一组无序的、不能重复的元素构成，和数学中的集合相比，计算机中的集合是要求元素是不能重复的，但是在数学中的集合趋势可以的。集合其实也是特殊的数组，和数组最大的区别就是：集合里面的元素是没有顺序且不能重复的没有顺序意味着不能通过下标值进行访问不能重复意味着相同的对象在集合中只会存在一份因为集合中的元素是不能重复的，我们正好可以利用对象的属性是不能重服的这一特点，进行集合的封装集合的常见操作由于 es6 中 Set常见的操作自己封装的操作add(value)：向集合添加一个
2020-07-13 15:46:08
192
原创 单向链表、双向链表
单向链表链表和数组一样，都可以用于存储一系列的元素。链表的每个结点（最后一个结点除外）由一个存储元素本身的结点的数据和一个指向下一个元素的引用（指针）组成。这有点类似于一个火车，火车的每节车厢都装着自己的东西并连接着下一节车厢（最后一节车厢除外）。链表通常有一个head 属性（头指针）一直指向第一个结点，最后一个结点指向 null数组与链表的对比数组内存中是一块连续的空间，一般需要提前分配固定的空间大小，空间利用率不高在数组的起始位置插入和删除数据效率低，改变一个数据需要移动后续所有的数据
2020-07-12 20:51:54
558
原创 队列（Queue）、优先队列、双端队列
队列的简介队列和栈一样，也是一种运算受限的线性表（线性结构），它只允许在表的前端（front）进行删除操作，在表的后端（rear）进行插入操作。它的特点是先进先出（FIFO）队列的具体表现生活中学校餐厅中，先来排队的人先买饭，后来的人排在先来的人的前面计算机中打印队列：当打印多个文件时，就需要排队打印线程队列：开启多线程时，当新开启的线程所需要额资源不足的时候就会放入线程队列，等待CPU的处理另外还有消息缓冲器、邮件缓冲器、操作系统资源管理等普通队列只允许在表的前端进行删除操作，在
2020-07-08 11:53:04
1275
1
原创 栈
栈的简介栈是一种运算受限的线性表（线性结构），它只允许在表的一端（栈顶）进行进行插入和删除运算，另一端是栈底，栈它的特点是后进先出（LIFO）一个栈如图所示入栈出栈栈的具体表现生活中生活中，餐厅里面叠放在一起的盘子，刚放上去的，往往会被最先拿走程序中函数调用栈：假设函数A中调用函数B，函数B中又调用了函数C，函数C中还调用了函数D；在函数A执行的过程中会将函数A压入栈；随后轮到函数B执行时，也会将函数B压入栈。另外函数C和D执行时也都会被压入栈。所以当前栈的顺序为：A->B
2020-07-07 15:10:01
167
原创 let 和 const
文章目录变量声明：varvar 声明变量的特点变量的声明提升可重复定义变量被挂载到 window 上变量声明：letlet 变量声明的特点没有变量的声明提升、不能重复的定义、也不能被挂载到 window 上和 {} 一起使用会产生块级作用域临时死区（TDZ）变量声明：constconst 与 let 声明变量的相同之处const 与 let 声明变量的不同之处for循环中的 var 和 let变量声明：var在看 let、const 声明变量之前，先来看一下 var 声明变量的特点var 声明变量的特
2020-07-06 18:34:32
236
原创 输入输出与中断（微机第七章简单总结）
文章目录I/O接口的作用CPU 与外设交换信息I/O端口的编址统一编址独立编址8086CPU组成的微机系统都采用独立编址的方式CPU 与外设之间数据传送的方式程序传送的方式中断传送的方式直接存储器存取（DMA）方式中断名词中断优先级中断优先级的确定8086/8088中断源类型8086/8088中断优先级（高到低）中断向量表I/O接口的作用接口是介于 CPU 和外设之间的一种缓冲电路在 CPU 和外设之间起到了速度匹配、信号转换的作用CPU 与外设交换信息交换的信息分为数据信息：可分为数字量、模
2020-06-21 16:56:15
1014
原创 求字符串的字节长度
前提一个中文占两个字节，一个英文占一个字节charCodeAt()方法返回指定位置的字符 Unicode 编码 （0 - 65535之间的整数）返回值 <= 255 时，为英文返回值 >255时 ，为中文实现默认全部是英文，即该字符串的字节长度即为字符串的长度，然后判断 Unicode 编码，大于255则加一，最后求出的结果变为字符串自己的长度function getBytesLength(str) { var result = str.length; for (var
2020-06-18 21:24:12
1525
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人