- 博客(78)
- 收藏
- 关注
RSS订阅原创 数组和数组对象去重
一、双层 for 循环function distinct(arr) { for (let i=0, len=arr.length; i<len; i++) { for (let j=i+1; j<len; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
2022-03-16 17:23:01
461
原创 react小笔记
一、请说一下你对React的理解1、React是一个用于构建用户界面的 JavaScript 库2、可以通过组件化的方式构建 构建快速响应的大型Web应用程序3、 特点：声明式、组件化二、为什么React会引入JSX1、JSX是一个JavaScript的语法扩展,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式2、JSX其实是React.createElement的语法糖三、请说一下你对Virtual DOM的理解React.createElement 函数所返回
2022-01-11 18:24:53
331
原创 webpack小笔记
一、babel主要用于将ES5 + 的语法转换为向后兼容的JS语法，以便能够运行在浏览器或者其他环境中。1、babel转换JSX语法，即React: @babel/preset-react2、babel转换ES5 + 语法：@babel/preset-env3、@babel/polyfill：就是用 es5 实现了 es6 的所有 API 和新的数据结构二、row-loader:将文件作为字符串导入三、使用第三方类库：1、直接引入：（缺点：会把lodash打包到bundle中去,且在
2022-01-07 18:04:47
767
原创 React-Hooks
一、useState：保存状态1、useState接收一个初始状态或者计算函数，这个函数返回初始状态2、每次更新状态，子组件都会自动执行，不管它有没有依赖此状态，这里只是会执行函数式组件和class组件的render函数和useEffect，并不会重新渲染dom节点3、如果新的state依赖以前的state，则可以给setState传递一个函数，这个函数的参数是旧的state,返回新的state4、如果新的state和旧的state一致，则不会去重新渲染，子组件也不会重新渲染，也不会去执行父
2021-12-07 23:53:58
256
原创 React父子组件的渲染执行顺序
import React, { useEffect, useState } from 'react';import './App.css';function A() { console.log('子组件'); useEffect(() => { console.log('子组件useEffect') }) return <div>zheshi</div>}function App() { const [count, setCount] .
2021-12-07 23:29:28
1021
原创 自定义React-Hooks
一、React Hooks1、Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性二、Hooks 优点1、可以抽离公共方法和逻辑，提高代码的可复用性2、函数式组件更简洁，开发效率更高三、自定义 Hook1、通过自定义 Hook，可以将组件逻辑提取到可重用的函数中2、自定义 Hook 是一个函数，其名称以use开头，函数内部可以调用其他的Hook3、初始化项目create-reac...
2021-12-07 11:52:37
1387
原创 React-Redux
一、Redux应用场景1、随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难2、Redux的出现就是为了解决state里的数据问题3、在React中，数据在组件中是单向流动的4、数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（或者称作兄弟组件）之间的通信就比较麻烦二、Redux设计思想1、Redux是将整个应用状态存储到到一个地方，称为store2、里面保存一棵状态树state tree3、组件可.
2021-12-06 12:04:45
845
原创 React-SSR
一、自己写的demoreact-ssr二、什么是服务器端渲染1、服务器端渲染：页面上的内容是由服务器生产的cnpm i express -Slet express=require('express');let app=express();app.get('/',(req,res) => { res.send(` <html> <body> <div id="root">h
2021-12-05 21:24:26
519
原创 postcss-loader和importLoaders
css文件中如果有@import 语句，importLoaders的作用是决定@import模块在使用css-loader前，要使用几个其它的loaders处理。postcss-loader解决css兼容性问题{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, /* 在这之前还需加载几个loader *
2021-12-03 11:44:55
272
原创 Node之异步I/O
Node的基调是：异步I/O、事件驱动和单线程一、为什么要异步I/O？1、用户体验： 1）可以通过异步来消除UI阻塞现象：因为在浏览器中JS在单线程上执行，而且它与UI渲染共用一个线程，这意味着JS在执行的时候UI渲染和响应是处于停滞状态的。所以一个网页通过同步的方式去获取网络资源的话，那么JS需要等待资源下载之后才能执行，这期间UI将停顿，用户体验会很差。而采用异步网络请求，那么下载资源的时候可以继续响应用户的交互。 2）可以通过异步来减少获取多个资源所需时间：采用异步的方...
2021-12-02 23:25:40
262
原创 qiankun的简单实用
一、在主应用注册子应用import Vue from 'vue'import App from './App.vue'import router from './router'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import { registerMicroApps, start } from 'qiankun';Vue.config.productionTip =
2021-12-02 22:36:53
828
原创 微前端（single-spa和qiankun）
一、概念性东西：2018年single-spa诞生了，single-spa是一个用于前端微服务化的js前端解决方案（本身没有处理样式隔离，js执行隔离），实现了路由劫持和应用加载2019年qiankun基于single-spa，提供了更加开箱即用的API（single-spa + sandbox + import-html-entry）做到了与技术栈无关、并且接入简单总结：子应用可以独立构建，运行时动态加载，主子应用完全解耦，与技术栈无关，靠的是协议接入，子应用必须导出bootstrap、mou
2021-11-30 23:29:02
2511
原创 Docker常用命令使用示例
1、基于ubuntu镜像，启动一个容器，然后在容器里面执行/bin/echo 'helloworld‘命令docker container run ubuntu /bin/echo 'helloworld'2、显示当前正在运行的容器docker ps3、显示所有的容器，包括停止的docker ps -a4、显示最新的容器docker ps -l5、启动一个容器并进入到这个容器里面，使用exit退出容器docker run -i -t ubuntu /bin.
2021-10-20 17:46:11
137
原创 浏览器和服务器之间的通信
讲浏览器和服务器之间的通信之前，先讲几个概念一、单工、半双工、全双工的区别： 1、单工：数据只在一个方向上传输，不能实现双方通信。（例子：电视、广播） 2、半双工：允许数据在两个方向上传输，但是同一时间数据只能在一个方向上传输。（例子：对讲机） 3、全双工：允许数据在两个方向上同时传输。（例子：手机通话）二、长短连接和长短轮询的区别： 1、长短连接是说的TCP连接，浏览器使用的http协议是1.1之前的版本的话，那么使...
2021-10-11 18:42:33
1684
原创 鉴权方式/登录方式
一、用法：1、cookie:const Koa = require('koa');const Router = require('@koa/router');const app = new Koa();const router = new Router();app.keys = ['jupeng']; // 提供cookie用于签名的密钥// 默认情况下所有的请求都会发送cookie，默认本次会话结束会清除// domain 域名：默认不设置值为当前网址的域名// path 路径
2021-10-09 17:49:58
183
原创 前端存储方式
前言：前端开发的时候，在页面刷新之后，我们的所有数据都会被清空，这时候就要用到本地存储技术了，前端的存储数据的方式有四种：cookie、localstorage、sessionstorage和indexDB。一、使用方式：1、前端设置和获取cookie的方式:const setCookie = () => { document.cookie = `username=jupeng1; path=/; expires=${new Date(new Date().getTime() +
2021-10-09 17:47:49
1790
原创 算法学习一
1、抽屉原理：n+1 个苹果放在 n 个抽屉里，那么至少有一个抽屉中会放两个苹果。2、分治法： 分解：将原问题分解为若干个规模较小，相互独立，与原问题形式相同的子问题； 解决：若子问题规模较小而容易被解决则直接解，否则递归地解各个子问题； 合并：将各个子问题的解合并为原问题的解。 例子：快速排序就用到了分治法。 1）找一个中间位，所有比他小的放一个数组，所有比他大的放一个数组，然后两个数组再次递归。中间位可以是数...
2020-11-19 15:03:37
142
原创 React如何查看源码
一、进入官网：https://github.com/facebook/react二、源码都在 packages 文件里：https://github.com/facebook/react/tree/master/packages三、可以将文件下载到本地，这样看起来会方便点四、然后进入 pageages/react/index.js 文件里，这个文件就是react源码的入口五、这个网址可以将react代码展示为通过babel转换的代码：https://react.docschina.org/
2020-11-17 14:44:31
1877
转载 React 系统中，在离开编辑页面前做提示
import React from, { useEffect } from 'react';import { Prompt } from 'react-router-dom'export const EditPrompt = (() => { const listener = (e) => { e.preventDefault(); e.returnValue = '离开当前页后，所编辑的数据将不可恢复' } useEffect(.
2020-09-25 17:22:30
1495
转载 理解Babel
本文参考链接：https://mp.weixin.qq.com/s/C-WmM5tjfc3r4sB52C4R0Q一、用途：Babel能够转译ES5+的代码，使它在浏览器里面能运行二、抽象语法树：AST（节点上有type属性，还有若干描述信息对属性）三、Babel工作过程： 1、Parse(解析)：将源代码转换成更加抽象的表示方法（AST） （1）词法分析：对代码进行“分词”，变成一个Tokens数组 ...
2020-05-17 14:17:43
190
转载 理解webpack热更新原理
本文参考链接：https://mp.weixin.qq.com/s/2L9Y0pdwTTmd8U2kXHFlPA一、开启：HotModuleReplacementPlugin/--hot二、webpack编译构建后，控制台出现： 1、新的hash值 // 作为下次热更新的标识 2、新的json文件 // h代表新hash,c代表要热更新的模块 3、新的js文件 // 本次修改后的代码三、热更新实现原理： 1、启动webpack生成...
2020-05-17 13:50:24
2383
原创 函数柯里化
通过把一个多参函数转换成一系列嵌套的函数，每个函数依次接受一个参数，这就是函数柯里化。let _fn = curry(function(a,b,c,d,e){ console.log(a + b + c + d + e)});_fn(1,2,3,4,5); //15_fn(1)(2)(3,4,5); //15_fn(1,2)(3,4)(5); //15_fn(1)(2)(3)(4)(5); //15function curry(fn, len = fn...
2020-05-17 01:05:11
174
转载 节流和防抖
函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。看一个????（栗子）：//模拟一段ajax请求function ajax(content) { console.log('ajax request ' + content)}let inputa = document.getElementById('unDebounce')inputa.addEventListener('keyup', function (e) { ajax(
2020-05-15 22:59:33
166
转载 Set/WeakSet/Map/WeakMap
一、Set:类似于数组，但是没有重复的值 1、set结构中NaN等于自身，两个空对象是不相等的 2、属性：constructor: 构造函数 size: 成员总数 3、方法： add(value): 添加某个值 delete(value)：删除某个值 has(value): 是否是set的成员 ...
2020-05-14 19:05:02
170
原创 React移动端Radio组件
一、组件如图所示：二、使用方法：import Radios from '../../components/Radio/index';import './index.less';const Template = () => { const [value, setValue] = useState(1); const onChange = value => { console.log(value); setValue(value); }; cons
2020-05-12 14:46:54
780
转载 执行上下文
GlobalExectionContext = { // 全局执行上下文 ThisBinding: <Global Object>, // this指向 LexicalEnvironment: { // 词法环境 EnvironmentRecord: { // 环境记录 Type: "Object", // 全局环境 // 标识符绑定在这里 a: < uninitialized >, b: &l...
2020-05-10 18:07:02
218
转载 JS内存泄漏
一、闭包的定义当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。二、闭包的特点①函数嵌套函数②函数内部可以引用函数外部的参数和变量③参数和变量不会被垃圾回收机制回收三、造成内存泄露的方式 1、意外的全局变量引起的内存泄露 例：函数中没有使用var声明的变量 2、闭包引起的内存泄漏 例：function fn1(){ var n=1; function fn2(){//在加一个fn2...
2020-05-10 17:17:52
263
原创 Echarts实现甘特图
一、项目需求如下所示：此项目实现的功能点：1、鼠标滑动可滚动滚动条2、y轴label鼠标滑动可显示tooltip3、y轴label过长换行显示
2020-05-08 19:03:02
2621
转载 webpack小知识点
一、webpack工作流程：初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译； 确定入口：根据配置中的 entry 找出所有的入口文件； 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步...
2020-05-05 14:46:51
307
原创 数据结构
一、数据结构1、逻辑结构：线性结构有: 栈，队列，链表，线性表 非线性结构有 二维数组，树等2、存储结构：存储结构有顺序存储、链式存储、索引存储以及散列存储。3、二叉树 前序遍历：根左右 中序遍历：左根右 后序遍历：左右根 https://www.cnblogs.com/jpfss/p/1...
2020-05-04 14:57:05
212
原创 JS-树的深度优先遍历和广度优先遍历
一、图例：深度优先遍历：[1, 11, 111, 112, 113, 12, 121, 122]广度优先遍历：[1, 11, 12, 111, 112, 113, 121, 122]二、代码：// 深度优先遍历var deepTraversal = function(obj, result){ if(!obj.children){ result.push(obj...
2020-04-04 23:30:50
704
原创 React自定义组件Select
一、使用图例：二、使用方法： importSelectfrom'../../components/Select/index';<Select label="选择器" options={[{key: 1, value: '选项一'},{key: 2, value: '选项二'}]} placeholder="请选择" ...
2020-03-31 19:37:29
2403
1
原创 JS之简单算法题
一、用 JavaScript 写一个函数，输入 int 型，返回整数逆序后的字符串。如：输入整型 1234，返回字符串“4321”。要求必须使用递归函数调用，不能用全局变量，输入函数必须只有一个参数传入，必须返回字符串。function reverseInt(num) { if (num < 10) { return num; } var remainder = n...
2020-03-29 14:49:45
405
原创 React-router之路由跳转导致store中的数据重置
一、遇到问题的原因： 项目中React-router都是一级路由，当路由跳转的时候那个组件会被卸载掉，当返回那个组件的时候组件是重新构建的，componentdidmount会重置store中的数据，但是又不能用嵌套路由，嵌套路由会把路由到的所有组件都渲染出来。如果把加载store的函数放到父级组件的时候，当在本页面刷新浏览器的时候会找不到数据而报错。二、解决办法：...
2020-03-03 17:37:02
1971
3
原创 Echarts-饼状图之外的区域做点击效果
一、默认情况下第二部分的数据是要跟第一部分的图相关联的，当点击饼状图的时候，第二部分的数据要做筛选。但是当取消所有的饼状图的点击效果的时候，需要将第二部分的所有的数据再还原回去，echarts我没有发现可以点击饼状图外面的取消的事件，故做了以下方式来做此效果：（此效果只适用于手机端）二、代码：(第一部分里面的代码是核心，后面的代码为数据附缀）import React, { useEf...
2020-03-03 17:13:41
1667
原创 JS-Reduce使用方法和原理解析
一、使用方法：var arr = [1, 2, 3, 4, 5]var result = arr.reduce(function(prev, curr) { return prev + curr});// result = 15二、实现原理：Array.prototype.myReduce = function(fn, initialValue) { if (...
2020-02-18 11:08:30
826
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人