ma33xiao的博客

EventBus javascript简单实现

npm scripts的钩子功能

一、使用扩展运算符使用扩展运算符可以实现部分对象的深复制，若对象中有数组或其他引用类型，则扩展运算符不能实现深复制。成功案例：let obj1 = { name: "rain", age: 18}let obj2 = { ...obj1 }obj2.name = "snow"console.log(obj1)// {name:'rain',age:18}console.log(obj2)// {name:'snow',age:18}失败案例：let obj1 = { n

一、使用扩展运算符使用扩展运算符可以实现部分对象的深复制，若对象中有数组或其他引用类型，则扩展运算符不能实现深复制。成功案例：let obj1 = { name: "rain", age: 18}let obj2 = { ...obj1 }obj2.name = "snow"console.log(obj1)// {name:'rain',age:18}console.log(obj2)// {name:'snow',age:18}失败案例：let obj1 = { n

介绍更多信息immutable中文：不变的，不可改变的每次修改一个Immutable对象时都会创建一个新的不可变的对象，在新对象上操作并不会影响到原对象的数据。安装npm i immutable一、Immutable优化性能的方式Immutable实现的原理是持久化数据结构，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，Immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的

介绍Flux是一种架构思想，专门解决软件的问题。它跟MVC架构是同一类东西，但是更加简单和清晰。Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（state对象）保存着一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers），这样就可以进行数据追踪，实现时光旅行。安装npm i redux一、redux介绍及设计和使用的三大原则state以单一对象存储在state对象中state只读（每次

一、回调地狱示例弊端：data1，data2，data3这三个数据不能重名，调试起来很不方便。需要的操作多时，回调会一直往里塌陷。const fs = require("fs")fs.readFile("./one.txt", (err, data1) => { fs.readFile("./two.txt", (err, data2) => { fs.readFile("./three.txt", (err, data3) => { console.

一、安装npm install http-proxy-middleware --save二、在src目录下创建setupProxy.js文件三、编写setupProxy.js代码**注意：**每次编写完setupProxy.js文件后都要重启服务器const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( '/api

一、React 路由1 什么是路由？路由是根据不同的url地址展示不同的内容或页面。一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URL之间的同步映射关系2 路由安装npm install react-router-dom@53 路由使用<Redirect from="/" to="/home"/>exact 精确匹配（Redirect即使使用了exact，外面还要嵌套Switch来用）Warning：Hash hist

一、使用hooks的理由高阶组件为了复用，导致代码层级复杂生命周期的复杂写成functional组件，无状态组件，因为需要状态，又改成了class，成本高二、useState(保存组件状态) const [name, setName] = useState("rain")//useState 记忆函数，记住状态三、useEffect(处理副作用)和useLayoutEffect(同步执行副作用)Function Component不存在生命周期，所以不要把Class Componen

一、非父子组件通信方式1 状态提升（中间人模式）React中的状态提升概况来说，就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过props分发给子组件import React, { Component } from 'react'export default class Tenth extends Component { state = { title: '' } render() { return ( <div

一、Ref版-表单域组件父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法import React, { Component } from 'react'class Tenth extends React.Component { state = { value: '' } clear() { this.setState({ value: '' }) } render() { return

一、属性验证1 安装npm i prop-types2 使用import React, { Component } from 'react'import PropTypes from 'prop-types'export default class Fifth extends Component { //static 定义类属性，可以在类外Fifth.proTypes直接使用 static propTypes = { title: PropTypes.string,//规定t

一.React 脚手架初始化项目1 初始化项目，命令：npx create-react-app my-app2 启动项目，在根目录执行命令：npm start3 npx 命令介绍npm v5.2.0引入的一条命令目的：提升包内提供的命令工具的使用体验原来：先安装脚手架包，再使用这个包中提供的命令现在：无需安装脚手架包，就可以直接使用这个包提供的命令补充说明推荐使用：npx create-react-app(固定格式) my-app(项目名称)可以使用npm i

arr.sort()默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。为此，sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序。即使数组元素都是数值，也会先把数组转换为字符串再比较、排序。let arr = [0, 1, 5, 10, 15]arr.sort()console.log(arr)//[ 0, 1, 10, 15, 5 ]sort()排列数值方法let arr = [3, 2, 1, 5, 10, 15]arr.

一、正则表达式概述1 什么是正则表达式正则表达（Regular Expression）是用于匹配字符串组合的模式。在JavaScript中，正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。2 正则表达式的特点灵活性、逻辑性和功能性非常强。可以迅速地用极简单的方式达