2020年12月_Mr.Groooooooot

原创 React事件绑定的方法

React事件绑定的方法前言React事件绑定即将事件函数中的this与类实例对象的this绑定。法一：在构造器中绑定thisexport default class Test extends Component { constructor(props){ super(props) this.handleClick = this.handleClick.bind(this) } handleClick(){ console.

2020-12-29 19:59:47 130

原创后代和兄弟选择器选择器

通用兄弟选择器通用兄弟选择器即 ~：兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。相邻兄弟选择器相邻兄弟选择器即 + 当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。子选择器子选择器 > :当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素.后代选择器匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃"

2020-12-29 19:39:13 229

原创 React Hook

React Hook前言Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）一、State Hook和Effect HookuseState 会

2020-12-28 21:50:18 60

原创函数式编程

函数式编程前言函数式编程是一种不同于面向对象编程（OOP）的编程范式，通过纯函数以及它们的组合、柯里化、Functor （函子）等技术来降低系统复杂度。一、纯函数纯函数的定义是，对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用（不改变全局变量，函数参数），也不依赖外部环境的状态。二、柯里化传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。三、Functor （函子）值被容器化之后具有一条标准协议规范的数据类型或者数据容器。Functor 是一个对于函数调用的抽象

2020-12-28 20:39:27 71

原创 H5，C3和ES6新特性总结

H5，C3和ES6新特性总结一、H5新增语义化标签header、sction、main、sider、footer和nav等。表单新特性：email、url、number、range、Date Pickers、search、color等。拖拽属性：draggable多媒体视频（vedio）和音频（audio）新的通信协议：webSocket二、C3新特性选择器：属性选择器 E[attr]，伪类选择器 E:nth-child(n)颜色：RGBA, HSLA盒模型：box-sizing:

2020-12-24 15:49:52 711

原创 jsonp的简单实现

jsonp的简单实现function jsonp(url, data) { // 1.将data中的数据拼接到url中 let params = ''; for (key in data) { params += key + '=' + data[key] + '&'; } url += '?' + params + 'callback=cbFn'; // 2.在全局环境下创建jasonp要调用的回调函数，挂载到window上 window.cbFn = function(

2020-12-23 20:34:25 180

原创前端笔试总结

前端笔试总结一、给网页添加javascript的方式有？使用script标签，将javascript代码写到之间，例子：<scriptype="text/javascript"> document.write("Hello World!");</script>加外部javascript文件行内js—javascript:return void(null)或javascript:return confirm("……");二、使用步骤1.引入库代码如下

2020-12-21 21:44:29 105

原创 ajax简单封装

ajax简单封装function ajax(options) { // 该对象存储的是默认值 let defaults = { type: 'get', url: '', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: {},

2020-12-21 15:43:24 68 1

原创 domReady和firstPaint

domReady和firstPaint前言domReady是名为DOMContentLoaded事件的别称，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和JS异步请求的完全加载。一、浏览器渲染引擎基本流程浏览器开始解析HTML文档碰到CSS链接开始并行解析CSS文件当碰到<script>脚本就开始加载解析<script>脚本，并阻塞html的解析当DOM树和CSSOM解析完成后，生成renderT

2020-12-18 16:55:33 434 2

原创 Node后台管理系统服务器搭建

Node后台管理系统服务器搭建前言使用express框架结合mongoose搭建后台管理系统服务器。一、中间件// server.js// 声明使用静态中间件app.use(express.static('public'))// 声明使用解析post请求的中间件// 可以使用urlencoded方式来解析表单数据 extended: true ==> 表示使用第三方模块qs来处理app.use(express.urlencoded({ extended: true }))

2020-12-13 21:31:09 480

原创 React知识点总结（二）

React知识点总结（二）一、为什么列表循环渲染的key最好不要用index？举例：变化前数组的值是[1,2,3,4]，key就是对应的下标：0，1，2，3 变化后数组的值是[4,3,2,1]，key对应的下标也是：0，1，2，3由于key相同而值不同会进行删除和添加操作，但是原本可以进行移动操作的，显然删除和添加操作更消耗性能。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplo

2020-12-08 22:15:12 119

原创 HTTP2.0

HTTP2.0HTTP2.0新特性1.新的二进制格式（Binary Format）虽然看上去协议的格式和http1.x完全不同了，实际上http2.0并没有改变http1.x的语义，只是把原来http1.x的header和body部分用frame重新封装了一层而已。2.连接共享http2.0要解决的一大难题就是多路复用（MultiPlexing），即连接共享。上面协议解析中提到的stream id就是用作连接共享机制的。一个request对应一个stream并分配一个id，这样一个连接上可以有多

2020-12-07 17:40:00 594 1

原创 Promise,async和await的面试题

Promise,async和await的面试题一、关于Promise的执行顺序创建Promise是同步的，当执行完resolve();后，状态变为resolved，后面的.then立即放入微队列，第二个.then放入第一个.then返回promise对象的缓存队列中（并不是微队列）。1.new Promise((resolve, reject) => { console.log("外部promise"); resolve();}) .then(() => { con

2020-12-04 10:26:53 3291 2

原创 React知识点总结

React知识点总结（一）文章目录React知识点总结（一）一、React中keys的作用是什么？二、调用 setState 之后发生了什么？三、setState是同步还是异步？四、在连续多次调用异步的setState时，render被执行的情况是怎样的？一、React中keys的作用是什么？React使用key来标识每个组件，相同的key为同一组件建立一一对应的映射关系后，React在更新或者添加组件时就能迅速地找到key对应的组件进行对比更新或者添加组件。二、调用 setState 之后发

2020-12-02 22:19:05 550

wdhxs的博客