Double_路-优快云博客

原创 React基础知识总结

引入React：* CDN引入：要引入两个库，一个是react.development一个是react-dom.development* umd引入* webpack引入cjs和umd的区别：* cjs全称CommonJS，是Node.js支持的模块规范* umd是统一模块定义，兼容各种模块规范（含浏览器）* 理论上优先使用umd，同时支持Node.js和浏览器* 最新的模块规范是使用import和export关键字使用react：1. yarn global add create-re

2021-10-26 09:01:46 1203

原创 ES6新增常用语法总结

一、新的变量声明方式先说说之前我们用的var吧，只要声明一个变量，它就会被挂到window上面，很不安全也不方便。const声明时必须初始化,值不能被改变（类似于常量），常用来声明一个值不会被改变的量。当值为基础数据类型时，那么值就是它本身，不可被改变；如果值为引用数据类型时（对象、数组），值就指的是它的引用，只要引用不变即可，仍可改变引用指向的对象里的值。let声明的变量可以重新赋值,但是不能在同一作用域内重新声明,常用来声明一个汇编改变的变量。区别：const不可变，let可变，如果声明

2021-08-02 19:02:58 431

原创我对Promise的理解

1. 什么是Promise异步编程的一种解决方案2. Promise 的用途（可以链式调用）主要是解决地狱回调的问题，比如需要结果请求很多个接口，这些接口的参数依赖另外一个接口返回的数据，这样的话就会一层一层的嵌套，称为回调地狱，嵌套很多层的时候代码就会让人无法理解，但是使用Promise的话就解决了这个问题。3. 创建一个Promise：return new Promise((resolve,reject)=>{})4. 使用 Promise.prototype.then在多个含有异

2021-07-16 19:25:53 169

原创手写jQuery

window.jQuery = function (selectorOrArray) {//selectorOrArray是接受的选择器或者数组 let elements if(typeof selectorOrArray === 'string'){ elements = document.querySelectorAll(selectorOrArray) }else if(selectorOrArray instanceof Array){ ele

2021-06-10 20:12:47 216

原创在React中，echarts点击事件中不能调用函数

在React中，echarts点击事件中不能调用函数那你是不是遇见了这样的问题，echarts的chart.on中想要调用一个函数一直显示not a function或者undefined，甚至更可恶的是连this.state的内容都拿不到后来弄了好久，发现改成箭头函数就可以了，基础不扎实，坑是天天跳不了解原因的去看看箭头函数和普通函数的this指向就可以了...

2022-03-21 17:43:53 1396

原创绝对定位引起react的onClick失效

绝对定位引起react的onClick失效我从未想过有一天我会遇见这么奇葩的问题，一个点击事件两个小时前还好好的，突然怎么点击都没反应，后来原因让我想像不到按钮点击就是没反应，如果不是单词拼写问题，那肯定是其它属性影响了他，果不其然，删掉className后就正常了，那就肯定是它的问题我原来的className长这样改成这样就正常了：是因为点击的时候点击的是上面的一层（虽然我能看到我的按钮），按钮没有被点到，所以点击事件无效，解决方法就是将按钮放在最上面的那一层。...

2022-03-21 17:35:40 1960

原创正则表达式

正则表达式的?=和?!和?<=和?<!

2021-11-16 10:17:54 228

原创（五）、利用connect减少render

利用connect减少render情景：App中的setState会在只要一调用setState的时候就重新渲染App这个组件，但是里面的小儿子组件并没有发生任何的改变，但还是被重新渲染了，如果这样的组件积累很多个的时候也是非常浪费新能的，要是可以把setState移到外面就可以了import React, {useState,useContext,useEffect} from 'react';const connect = (Component) => { return (props)

2021-09-28 15:36:29 191

原创（四）、connect的来历，自己封装connect

connect的来历，自己封装connectconnect就是使组件和全局状态连接起来，要点就是接收一个组件返回一个新的组件import React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',a

2021-09-28 14:47:21 139

原创 React的Hooks3——上下文useContext

React的Hooks3——上下文useContext上下文全局变量是全局的上下文上下文是局部的全局变量（Provider包着的地方可以访问）使用方法使用C = createContext(intial)创建上下文使<C.Provider>圈定作用域在作用域内使用useContext©来使用上下文代码示例：const Context = createContext(null)function App(){ const [n,setN] = useState

2021-09-24 11:19:26 296

原创 React的Hooks2——useReducer

React的Hooks2——useReducer是用来规范创建state的创建流程的。文档中其实是这么说的：是useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。代码要分四步走：1. 创建初始值initialState2. 创建所有操作reducer(state,action)3. 传给useReducer，得到读和写API4. 调用写({type:"操

2021-09-24 10:15:53 219

原创（三）、使用dispatch规范setState的流程

标题使用dispatch规范setState的流程自己实现dispatch：import React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',age:18} }) const cont

2021-09-23 17:47:15 570

原创（二）、自己实现reducer

自己实现reducer并使用import React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',age:18} }) const contextValue = {appState,setA

2021-09-23 17:30:00 160

原创（一）、使用useContext实现内容的读写state

使用useContext实现内容的读写stateimport React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',age:18} }) const contextValue = {app

2021-09-23 17:05:40 372

原创 React的Hooks1——状态useState

React的Hooks1——状态useState1. 使用状态const [n,setN] = React.useState(0)const [user,setUser] = React.useState({name:'F'})2. 注意事项不可局部更新如果state是一个对象，不能部分setState，因为setState不会帮我们合并属性useReducer也不会合并属性地址会发生改变： setState(obj)如果obj地址不变，那么React就认为数据没有变化可以使用…user将

2021-09-18 10:44:13 390

原创 useReducer代替Redux

useReducer代替Redux步骤：将数据几种在一个store对象将所有操作集中在reducer创建一个Context创建对数据的读写API将第四步的内容放到第三步的Context用Context.Provider将Context提供给所有组件各个组件用useContext获取读写API代码实例：import React, { createContext,useReducer,useContext,useEffect } from 'react';import ReactDOM

2021-09-15 11:34:05 250

原创前端最全面经（2022校招），持续更新...

URL和URI的区别：1. URL是一种具体的URI，它是URI的一个子集1. URI和URL都定义了资源是什么2. URL不仅唯一标识资源，而且还提供了定位该资源的信息。3. URI 是一种语义上的抽象概念，可以是绝对的，也可以是相对的，而URL则必须提供足够的信息来定位，是绝对的a标签的target：1. _blank:在新窗口打开被链接的文档2. _self:默认，在当前页面打开3. parent: 在父框架集中打开被链接文档（会在父窗口或者包含来超链接引用的框架的框架集中打开链

2021-09-11 09:54:58 2921

原创字节一面代码题2021/9/6

题目：给一个promise，它如果十秒内可以执行出结果就打印出结果，如果十秒内解决不出来就会直接返回失败let p = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') }, Math.random()*20000) setTimeout(() => { reject('fail') }, 10000)})p.then((data) => {

2021-09-07 08:56:43 166

原创实现事件委托

事件委托就是把本该自己做的事情交给别人帮我做function delegate(element, eventType, selector, fn) { // 对传过来的元素添加事件监听 element.addEventListener(eventType, e => { // el是想要被监听的对象 let el = e.target // 用来判断当前DOM节点是否能完全匹配对应的CSS选择器规则，返回值是Boolean

2021-09-03 09:47:47 240

原创解决Vue中provide没有双向的绑定问题

问题描述：子组件调用父组件的方法修改了父组件的某个值，将这个值通过provide传递给子组件，但是子组件拿到的这个值是未被修改的值，原来provide并不会在数据变化后将新的值传递解决办法：将想要传递的值外面再套一层，让它变成一个对象父组件：<template> <div> <Toolbar v-model="theme"></Toolbar> <button @click="changeTheme">切换{{ thi

2021-08-31 10:33:39 729

原创 Promise.all的实现

Promise.prototype.all = function (promises) { let result = [], promiseCount = 0, promisesLength = promises.length return new Promise(function (resolve, reject) { for (let val of promises) { Promise.resolve(val).t

2021-08-26 15:39:58 228

原创代码实现一个Promise

function Promise(executor){ let self = this self.status = 'pending' self.value = undefined self.reason = undefined function resolve(value){ if(self.status==='pending'){ self.status = 'resolved' self.value

2021-08-26 15:03:32 134

原创进程和线程

进程进程是系统进行资源分配和调度的一个独立单位。每个进程都有自己的独立内存空间，不同进程通过进程间通信来通信。由于进程比较重量，占据独立的内存，所以上下文进程间的切换开销（栈、寄存器、虚拟内存、文件句柄等）比较大，但相对比较稳定安全。线程线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈),但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源。线程间通信主要通过共.

2021-08-23 14:40:27 181

原创前端库和框架的区别

库是一个封装了一些东西的集合，提供给开发者使用，比如说jQuery对难以使用的API进行了封装，让我们更方便的操作DOM；库没有控制权，控制权在使用者手中。关键在于封装框架是一套完整的解决方案，会控制整个流程，控制权不在使用者手中。帮助我们减少DOM操作，提高渲染效率，让我们将更多的精力放在业务逻辑上。...

2021-08-23 11:21:04 194

原创创建对象的几种方式

创建对象的几种方式：1. new Object()2. 字面式创建：let person = {name:‘kaku’}3. 工厂模式：上面两种方法在使用同一个接口创建多个对象的时候，会产生大量的重复代码function createPerson(name,age,family) {var o = new Object();o.name = name;o.age = age;o.family = family;o.say = function(){alert(this.name);}

2021-08-17 10:35:07 175

原创 new一个对象的时候发生了什么

new一个对象的时候发生了什么：1. 新生成一个对象2. 链接到原型obj.proto= Object.prototype3. 绑定this4. 返回新对象实现一个简单的new:function newGenerater(fn, ...args) { const result = new Object(); result.__proto__ = fn.prototype; const res = fn.call(result, ...args); return (

2021-08-17 10:09:17 119

原创 Vue中v-if和v-show的区别

v-show和v-if的区别：v-if是真正的条件渲染，切换过程中条件块内的事件监听和子组件适当的被销毁和重建v-if是惰性的，初始条件为假时什么也不做，直到第一次变为真的时候才会开始渲染条件块v-show使用的是display，总是被渲染，只是是否被显示的问题v-if有切换开销，v-show有渲染开销...

2021-08-16 13:51:37 106

原创 js中数字字符串相加减的问题

let a = 100; let b = "100"; console.log(b- a); //0 console.log(typeof (b- a)); //number console.log(a*b);//10000 console.log(typeof(a*b));//number console.log(a + b - a); //100000 console.log(b*b);//10000 console.log(typeo.

2021-08-14 16:46:47 1330

原创函数防抖与函数节流

函数防抖简单点来说就是带着一起做，一段时间内会等，然后带着一起做function debounce(fn,delay){ let timerId = null return function(){ if(timerId){window.clearTimeout(timerId)} timerId = setTimeout(()=>{ fn.apply(this,arguments) timerId = null },delay) }}函数节流就是一段时间执行完

2021-08-10 15:29:12 130

原创 Vue3属性绑定

Vue3属性绑定小结：默认所有属性都绑定到根元素使用inheritAttrs: false可以取消默认绑定使用$attrs或者context.attrs获取所有属性使用v-bind="$attrs"批量绑定属性使用const {size,...rest} = context.attrs将属性分开，...rest是ES6的剩余操作符...

2021-07-21 21:16:34 707

原创 Vue2到Vue3的一个很大的变动

Vue2到Vue3的一个很大的变动就是父子组件之间的通信，在Vue2时我们是这样的：在父组件中定义一个变量，子组件通过props获取到这个变量的值，通常情况下我们是想要修改这个值的，但是子组件是没有权限修改父组件变量的值，这就产生了emit和$event，emit用在子组件中，常用的有两个参数，第一个参数是事件名，第二个参数是事件参数，当然事件名是可以自己随便定义的，在父组件中使用$event取到修改后的内容，然后将这个值修改代码实例：父组件：<template> <Switch

2021-07-21 19:24:54 259

原创 webpack中的loader和plugin

基础用法给webpack一个js文件，它通过一个内置的babel-loader的东西将这个js文件放到webpack中，然后webpack就会输出一个另外的js文件同样也会引入一个css，它通过style-loader和css-loader两个loader将css文件变成一个style标签（这个标签也是JS生成的，所以在某种程度上来讲它也是一个JS），还有一种情况，它可以通过一个插件MIniCssExtractPlugin将n个CSS文件变成一个CSS文件loader: ["style-loade

2021-07-16 19:20:30 241

原创浅析 MVC

一、MVC的三个对象Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。View（视图） - 视图代表模型包含的数据的可视化。Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。Model代码，所有和数据相关的都放在这里class Model={ data(){} //保存数据 //管理数据的用法 crea

2021-07-15 14:37:42 219 1

原创 JSONP实现方式

前端通过构造 src 形如 xxx.com/friends.json?callback=xxxx 的 script 标签请求；后端通过约定的查询参数（这里是 callback）取出值（这里是 xxxx）然后把数据作为参数传给取出的值（这个值得在前端作为全局作用域下的一个函数），返回形如 xxxx(data) 的 JS 响应体；前端解析执行返回的 JS 代码（处理 data 的逻辑封装成 xxxx 全局函数）。...

2021-07-03 15:04:13 151

原创 Vue 中的 .sync 修饰符

Vue官网上对.sync是这么说的，:name.sync就是:name="name" @update:name="name = $event"的缩写。它的使用场景是这样的：在Vue中，子父组件(就是两个.vue的文件)最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但在某些时候，就是需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。例如，在父

2021-06-29 10:37:10 248

原创 computed 和 watch 的区别前端面试题

首先，computed是计算属性的意思，watch是监听的意思之后各自描述一下：computed是用来计算出一个值的，这个值在调用的时候不需要加括号，可以把它当成一个属性一样的用。它也会根据依赖自动缓存，依赖不变时值不会重新计算。watch用来在监听的东西发生改变后去执行一个函数，它有两个选项：一个是immediate表示是否在第一次渲染时就执行这个函数，是的话就是true，默认是false。第二个是deep，表示如果监听一个对象，是否要看这个对象里面的属性的变化，是的话就是true，默认是fa.

2021-06-28 10:33:55 823

我的博客.rar里面有HTML文件和css文件

空空如也