大刘鸭-优快云博客

2022react面试题整理、react事件机制、如何在React中使用innerHTML、react中的Portal是什么、为何React事件要自己绑定this、类组件和函数组件之间的区别是啥、state 和 props 区别是啥、在构造函数调用 super 并将 props 作为参数传入的作用、React中refs的作用是什么？有哪些应用场景、

2022-05-20 14:21:25 17057 1

原创事件循环机制，宏任务、微任务

浏览器事件循环，node事件循环，浏览器eventloop，node eventloop，setImmediate对比process.nextTick

2022-05-18 14:07:20 3122

原创移动端适配

为什么要做移动端适配，如何适配？

2022-05-17 19:13:33 1979

原创 leetcode 之 54.螺旋矩阵

螺旋矩阵；javascript解决螺旋矩阵问题

2022-05-10 14:12:22 426

原创前端工程化

前端工程化含义、内容、解决问题概述

2022-04-29 16:23:21 3263

原创浏览器cookie描述、属性解决、使用方法、特点总结以及注意事项

浏览器cookie描述、属性解决、使用方法、特点总结以及注意事项

2022-04-15 14:25:04 742

原创 javascript中关于JSON的思考和实验，JSON的性能问题

javascript中，关于JSON的使用、理解、学习，第二个参数，如何将undefined、function和正则转换；JSON的性能问题

2022-04-07 16:05:26 1699

new操作符解读话说把大象装进冰箱需要三步，那么new一个对象出来，需要多久？创建一个空的简单JavaScript对象（即{}）；为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象；将步骤1新创建的对象作为this的上下文；如果该函数没有返回对象，则返回this。转换成代码，如下：function MyNew (fn){ // 创建新的空对象 var obj = {}; // 将控对象的原型指向构造函数的原型 obj.__p

2022-04-06 17:42:14 220

原创 axios源码阅读

axios源码的阅读和学习，axios拦截器实现原理，axios为什么可以在node中使用，axios实现原理

2022-04-01 10:49:17 2833

原创 javascript中NaN的特点和理解，如何判断一个值是NaN

首先明确一点，NaN不是独立的数据类型，而是一个特殊数值，它的数据类型依然属于Number。typeof NaN // 'number'一、那么NaN有哪些特点？NaN不等于NaNNaN === NaN // false由此，联想到indexOf函数，它内部使用的是===来做比较，如下：[NaN].indexOf(NaN) // -1再次联想，includes函数呢？来看结果[NaN].includes(NaN) // true为什么呢，因为它内部使用的相等机制，是零值相等NaN

2022-03-31 14:51:05 2019

原创 package.json和package-lock.json概述

package.json概述随着前端模块化开发的流行，在使用node和npm来下载管理项目所需的依赖模块的时候，有一个文件必不可少，package.json。它定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。当我们在命令行运行npm install的时候，就是node根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。scripts字段"scripts": { "lint": "./node_modules/standard/bi

2022-03-30 17:29:59 2604

原创 react优化之React.memo

有如下父子组件const Home = (props) => { const [name, setName] = useState('孩子我叫大刘鸭') const [num, setNum] = useState(0) const updateNum = () => { setNum(num + 1) } return <div> <div>我是父亲</div> <div onClick={updateNu

2022-01-19 10:47:21 490

原创 React组件通信

react组件通信有以下几种场景：父子通信父->子：通过props的方式，子组件使用this.props，就可以拿到父组件传递来的参数。子->父：个人理解，是通过回调的方式，父组件通过props传递过来一个回调，子组件调用。// 父组件class Parent extends React.Component { constructor(props) { super(props); this.state = { num: 0 }; } childreCal

2021-10-12 14:22:17 140

原创 React类组件和函数组件之间有什么异同？

说明：以下总结，不算HOOKS先上代码// 函数组件function Welcome (props) { return <h1>Welcome {props.name}</h1>}// 类组件class Welcome extends React.Component { constructor(props) { super(props) this.state = { } } componentDidUpdate() {

2021-10-09 11:10:02 3544 3

原创为什么不建议在vue项目的v-for指令中使用index作为key

原因：在昨日的开发中，遇到如下问题：有个表格，表格会根据不同的条件，渲染出来不同的列，列使用的v-for命令循环出来，使用index作为key值，当切换条件时，发现列的值，错乱。分析如下：vue发现key相同，就不会更新dom例子：有如下组件和子组件：当使用key的时候，执行update，打印 4 created 1destroyed没有key，打印 3次update<template> <div> <Test v-for="item

2021-08-27 10:25:37 657

原创发布一款自己的npm包

1、首先，你需要有个npm账号。点击此处前往注册2、创建项目执行如下命令：mkdir mynpm && cd mynpm3、初始化项目执行如下命令：npm init注：一路回车即可4、组件编写// 模版：<template> <div class="toast"> <div class="msg-content">{{ msg }}</div> </div></template&gt

2021-05-19 17:12:30 177

原创 position为fixed的元素，高度不是满屏；transform对定位元素的影响；绝对定位的元素，高度不是全屏；

今天的开发中，遇到一个问题，div使用绝对定位，但是高度却不是全屏幕。代码如下：div{ position:fixed; top:0; left:0 bottom:0; right:0; width:100vw; height:100vh;}效果图如下：结果：经查证，该元素的父元素，使用了transform，也在网络上查证，并没有找到合适的官方文档，网络上也有码友遇到此类问题，但是没有有力的文档。解决：1、改写父元素的transform，使用其他方式，完成transform

2020-12-20 17:59:53 2197

原创 nvm 管理node版本

背景：日常开发中，会遇到老项目的问题，老得项目，node版本比较低，又不能统一用高版本来解决这个问题，nvm因此而生。常用命令：nvm ls## 列出所有安装的版本 nvm use <version>## 切换使用指定的版本node nvm uninstall <version>## 删除已安装的指定版本，语法与install类似 nvm install <version>## 安装指定版本...

2020-11-25 20:59:03 193 1

原创在微信小程序web-view组件中的h5页面，获取用户信息

注：以下环境，在微信中在小程序的web-view组件中，引用了一个h5的页面，如果想获取到当前用户的信息，有两种方式。1、在web-view组件中，在原声小程序代码中，将用户信息放在url中2、在h5页面中，使用公众号网页授权的方式，获取到用户的code，通过code，再去解析用户的信息。https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号wxid&redirect_uri=重定向到你的地址(重定向回来的时候，回在

2020-11-23 21:21:27 4342

原创 input输入框在移动端点击很多次才能聚焦

环境：vue+fastclick问题：在移动端输入框，需要点着输入框很多次，才能将输入框focus；或者长按输入框、或者双击输入框。网络上，都是定位到fastclick，给出的解决办法是覆盖掉fastclick的focus函数，但是，在我的项目中，fastclick是被公共base.js引入的，不能修改，并且也没有挂载到window，所以无法使用该方法。在此提供另外一种思路：给input的外层元素，添加点击事件，在点击事件中，使用nextTick，在其中执行对应input的focus方法

2020-11-05 20:33:38 1747 2

原创 leetcode 之 2. 两数相加

给出两个非空的链表用来表示两个非负的整数。其中，它们各自的位数是按照逆序的方式存储的，并且它们的每个节点只能存储一位数字。如果，我们将这两个数相加起来，则会返回一个新的链表来表示它们的和。您可以假设除了数字 0 之外，这两个数都不会以 0 开头。示例：输入：(2 -> 4 -> 3) + (5 -> 6 -> 4)输出：7 -> 0 -> 8原因：342 + 465 = 807/** * Definition for singly-linked

2020-08-20 19:54:10 134

原创 javascript继承、js继承实现方式、js继承优缺点

有如下父类function People(name,age){ this.name = name this.age = age this.seelp = function(){ console.log('i am seelp') }}People.prototype.eat = function(){ console.log('i can eat')}原型链继承原理：子类的 prototype = 父类的实例优点：简单不占

2020-07-02 10:50:49 213

原创 async await 学习、原理、优缺点

特点1、难点是错误处理机制。2、await命令只能用在async函数之中，如果用在普通函数，就会报错3、await 的值可能报错，所以最好放在try catch中执行4、async 函数可以保留运行堆栈，暂时保存当前执行栈比起来 Generator ， async函数有什么优缺点优点：1、async函数自带执行器，自动执行，无需next2、yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数

2020-07-02 10:15:04 1221

原创 markdown 常用操作，语法

空格：     标题：使用 # 即可# 从 1 个到 6 个，分别代表 h1，h2，h3，h4，h5，h6列表：使用数字开头，后面跟英文点（.），再加空格，后面才是内容换行：在你需要换行的地方，连续敲两个空格区块引用：用>表示引用，多层引用就用多个>...

2020-04-01 13:58:06 172

原创 javaScript 操作数组 push 、pop 、shift 、 unshift （包含性能测试）

javaScript 操作数组 push 、pop 、shift 、 unshift 表方法名字操作位置操作返回值 push 后添加被操作数组长度（lenght） pop 后删除当前被删除的 item 的值 shift 前删除当前被删除的 item 的值 unshift 前添加被操作数组长度（lenght）附1：性能测试假设存在数组 arr ，arr 长度 ...

2020-01-17 14:54:42 1214

原创 vs code 插件之 REST Client -- 接口测试

TEST Client 文档文件格式 .http 每个文件可以书写多个测试请求，请求之间，用换行 + 三个# （###）表示选中要测试的请求，右击，选择 send request，或者，请求上一行，就有send request，点击以后，就会有结果呈现出来变量：定义： @你的变量名字=变量的值例：@baseUrl=http://dummy.restapiexample...

2020-01-17 09:51:35 1899

原创 ajax 请求回来的二进制文件流，怎么处理下载

ajax 请求回来的二进制文件流，怎么处理下载？1、设置 xmlhttprequest 的 responsetype 为 blob2、bolb 转 url对象3、实现点击事件 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 必须...

2020-01-16 09:18:51 1572

原创 leetcode 之 1.两数之和

给定一个整数数组 nums和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]1、冒泡...

2020-01-07 14:50:20 165

原创 javaScript 原型和原型链

每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为null。根据定义，null没有原型，并作为这个原型链中的最后一个环节。任意一个对象的原型的原型的原型 == null 试图访问一个对象的属性时，...

2019-12-12 16:06:59 542 2

原创 layui 之 esay web 刷新页面时，页面报错路由找不到

在layui 的esay web ，路由是需要注册的使用 index 模块的regRouter 功能，进行路由的注册，如下：index.regRouter([{ name: '用户管理', url: '#/system/user' }]);未注册的路由，可以再系统中跳转过去，但是当你直接刷新的时候，却会报错提示用户路由不存在，...

2019-12-05 10:47:39 557

原创 webpack 知识点

什么是 webpack、webpack常见 loader、webpack常见 plugin、webpack loader 和 plugin 不同、如何利用webpack来优化前端性能、什么是bundle,什么是chunk，什么是module、如何提高webpack的构建速度

2019-11-15 16:48:40 640

空空如也

空空如也