小北lulu-优快云博客

原创 js的几种常见的算法排序总结

冒泡排序思想：比较相邻的两个元素的大小，顺序如果相反的话则进行交换，这样的话每次循环都可以将最小的或者最大的元素放到后面，最终达到排序的效果（可升序可降序）代码实现var array = [3, 4, 1, 5, 2, 45, 1, 23]function bubbleSort(arr) { // 数组的长度小于或等于1,或不是一个数组时不需要排序，直接返回数组 if (arr.length <= 1 || !Array.isArray(arr)) return arr

2021-02-23 21:28:35 246 1

原创 React 基础知识点总结

1. React 介绍React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。2.1 在 JS

2021-02-01 20:46:49 409

原创由于 git commit 代码校验报错造成的代码丢失的问题

前言今天提交带码的时候造成代码丢失，找了一下午才找到，学到了一个新的知识点记录一下我遇到问题的操作是：git status ，代码正常git add . 代码正常git commit -m"~~" 执行这个操作，出现了代码的校验，然后报了一些错误，之后我发现我的本地的代码就没了，我多次尝试 git commit --no-verify -m"~~" 发现提交的是空的，我的代码找不到了然后各种百度，发现了 git stashgit stashgit stash 用于保存和恢复工作进度

2021-01-25 19:56:16 4791 1

原创服务端渲染

随着前端技术的不断发展，涌现了许多客户端渲染的前端框架，这些框架所构建的单页面应用的优点为：用户体验好开发效率高渲染性能好可维护性好缺点为：单页面应用的首屏渲染时间过长，与服务端渲染好的页面返回前端所不同的是，单页面应用是等待前端js编译完成才渲染页面，所以出现了首屏加载时间过长的问题单页面不利于 SEO解决方案：同构应用通过服务端渲染首屏直出，解决spa页面首屏渲染慢以及不利于seo通过客户端渲染接管页面内容交互得到更好的用户体验这种方式通常被称为现代化的服务端渲染，也

2020-12-17 10:29:43 408 1

原创 Nuxt.js 基本使用

介绍官网介绍：Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染，我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js，Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置，除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。我们相信这个命

2020-12-17 10:21:35 735 2

原创 React 性能优化

说起 react 的性能优化，首先，高效的虚拟 DOM diff 算法和 react 内部的引擎已经做的很完美了，一般项目已经够用了，对性能的需求要求并不大，但是对于复杂的项目，性能优化还是很有必要的，性能到底指的是什么？前端开发，自然是离不开浏览器，而前端的性能优化大多都是在和浏览器打交道，页面的每一帧变化都是有浏览器绘制出来的，而且这个绘制的频率受限于显示器的刷新频率，所以一个重要的性能数据指标是每秒 60 帧的绘制频率，绘制的每一帧大概是需要 16.6ms。如果一个应用对用户的交互响应处理过慢，

2020-10-28 21:40:04 426

原创 javascript 发布订阅模式和观察者模式

发布订阅模式三要素：订阅者，发布者，信号中心我们假定存在一个信号中心，某个任务完成就向信号中心发布一个信号，其他任务可以向这个信号订阅这个模式，从而知道自己什么时候可以开始执行，这样的模式叫做发布订阅模式代码实现：<body> <script> // 事件触发器 class EventEmitter { constructor() { this.subs = Object.crea

2020-09-15 21:43:55 228

原创 Vue2.x和3.x的响应式原理

vue2.x 数据响应式核心原理官网描述：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。实现对一个属性进行监听转换<script>

2020-09-15 09:52:29 436

原创 ES6常用新语法总结

ES6 介绍ES6的名称为ESMAScript2015(es2015),是2015年6月份发行的，它是最新ECMAScript的代表版本，一是因为相对与es5变化比较大，二是因为它的发行让标准命名规则发生了变化，ES6更准确的缩写名称应该叫ES2015，ES6的出现最主要的解决了以下几个问题：解决原有语法上的一些问题或不足(比如let，const)对原有语法进行增强，更加易用(比如解构，展开，参数默认值，模板字符串)全新的对象，全新的方法，全新的功能（promise）全新的数据类型和数据结构（

2020-07-29 22:48:17 698

转载 Type ‘string | string[]‘ is not assignable to type ‘string | undefined‘.

在我用react + typescript写项目的时候，ts总会报一些类型的错误，比如下图的错误：Type ‘string | string[]’ is not assignable to type ‘string | undefined’.在我确定我的类型是正确的情况下不理解为啥报这样一个错，在网上找了很久，就是加类型断言，解决方法如下图：（值 as 类型）这样就不会报错拉。关于typescript类型断言，整理知识点如下：typescript很强大，但是用不好时也会很头痛，开发遇到类型错误的

2020-07-27 17:45:59 64750 3

原创 Promise源码实现原理

1. promise基本用法的简单实现promise就是一个类，在执行这个类的时候需要传递一个执行器过去，这个执行器会立刻执行promise中有三个状态，分别为等待-pending，成功-fulfilled，失败-rejected。状态只可以 pending–>fulfilled, pending–>rejected,一旦状态确定就不可以更改promise中resolve和reject是用来更改状态的，resolve:fulfilled，reject：rejectedthen方法内

2020-07-26 18:06:25 393

原创 Promise，Generator，async/await学习总结基本用法

promise首先，promise是一种更优的异步编程解决方案,如果我们直接使用传统的回调方式去解决异步流程，就会避免不了大量的回调函数嵌套，形成回调地狱,ajax.get(url,function(data1){ ajax.get(url,data1,function(data2){ ajax.get(url,data2,function(data3){ ajax.get(url,data3,function(data4){

2020-07-25 11:26:27 234

原创谈谈你是如何理解JS异步编程的，EventLoop、消息队列都是做什么的，什么是宏任务，什么是微任务?

1.javascript为什么是单线程？与javascript的设计初衷有关，最早javascript是运行在浏览器中的脚本语言，目的是为了实现页面上的动态交互，实现页面的核心是dom操作，所以决定了javascript是单线程，否则会出现线程同步的问题:比如多个线程同时操作一个dom元素，这时浏览器不知道要以谁的操作为准，造成代码执行顺序混乱javascript是单线程也就意味着浏览器有多个任务的时候要排队依次进行，一个一个完成，这种模式的优点是比较安全。缺点是如果我们遇到一个特别消耗时间的任务

2020-07-22 21:20:38 780

转载前端面试知识点整理

csspostionposition知识点flex自己总结的flex知识点css盒模型css盒模型h5适配各种设备从淘宝和网易的font-size思考移动端怎样使用rem？细说移动端经典的REM布局与新秀VW布局BFC什么是BFC？看这一篇就够了CSS3动画CSS3动画详解前端面试题——如何画一条0.5px的线CSS 预处理器less和sass大家肯定都用过，今天我们从另一个角度来谈谈他们2019年，你是否可以抛弃 CSS 预处理器？移动端1px解决方案在写h5

2020-07-14 21:46:23 650

原创大厂面试题

阿里使用过的koa2中间件koa-body原理介绍自己写过的中间件有没有涉及到Cluster介绍pm2master挂了的话pm2怎么处理如何和MySQL进行通信React声明周期及自己的理解如何配置React-Router路由的动态加载模块服务端渲染SSR介绍路由的history介绍Redux数据流的流程Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思

2020-07-14 21:00:29 350

转载 web性能优化---js篇

1：垃圾收集日常中的某些情况下垃圾收集器无法回收无用变量，导致的一个结果就是——内存使用率不断增高，以下为对应的情况以及处理方法。①对象相互引用会导致引用计数始终为2，所以用完对象后应将引用设为null，例子如下:let element = document.getElementById("test");let myObject = new Object();myObject.element = element;element.someObject = myObject;用完后需要加如下代码

2020-07-06 21:15:36 202

原创原生ajax请求过程

创建ajax对象，创建XMLHttpRequest对象,也就是创建一个异步调用对象.var xhr = new XMLHttpRequest();创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息xhr.open('GET', url, true);发送请求xhr.send(要发送的数据);接收响应//服务器响应状态(readyState)改变时都会被执行xhr.onreadystatechange = function(){ //0 （未初始化）对象已经创建，但还.

2020-07-05 22:07:32 197

转载 js中的原型和原型链--学习笔记

构造函数：function Foo ( ) { };实例对象：let f1=new Foo;let o1=new Foo;每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [prototype]，但是[prototype]是内部属性，我们并不能访问到，所以使用 _proto_来访问。对象可以通过 __proto__来寻找不属于该对象的属性，_

2020-07-05 19:13:04 231

转载 css中的BFC详解

本文转至[什么是BFC？看这一篇就够了(https://blog.youkuaiyun.com/sinat_36422236/article/details/88763187)BFC 定义：BFC(Block formattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。B

2020-07-05 16:09:17 2647

原创 js中if判断条件的小技巧，判断存在的条件

if条件语句中，条件为true时会执行条件语句日常开发中的总结：1.所有的对象都是true，包括空数组（数组也是对象）如果判断对象数组是否为空可以：if(arr.length){...}判断对象是否为空：if(Object.keys(obj).length){...}2.unll 和undefined 都被当做 false，一般可以设置为初始值，赋值以后可以这样判断是否为空，var a = nulla = "xuke"if(a){...}3.当数字为0时为false，其他的为tr

2020-07-02 22:08:10 1292 1

原创三个等号和两个等号的区别（“===”和“==”）

1、===：称为等同符，当两边值的类型相同时，直接比较值，若·类型不相同，直接返回false；2、==：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较，如果是对象则先.toString()之后再进行比较如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等null 和 Undefined 与其

2020-07-02 21:55:13 2438

原创 js中的深克隆(深拷贝)和浅克隆(浅拷贝)

浅克隆：直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址基本数据类型是直接存储在栈内存中的，而引用数据类型，则仅仅是把地址存储在栈内存中,真正的数据是存储在堆内存中的，赋值操作时，仅仅把地址进行了赋值。深克隆：就是把数据赋值给对应的变量，是拷贝对象各个层级的属性，在内存中开辟一块新内存，将原对象中的所有值全部复制过去，与原对象完全脱离，修改新对象中的属性值不会影响原对象、浅克隆举例let a = "xu";let b = a;aler

2020-07-02 13:24:20 856

原创 javascript函数式编程，读了这篇你就会了

什么是函数式编程首先，Javascript可以进行函数式编程，因为JavaScript中的函数就是第一类公民。这意味着变量可以做的事情函数同样也可以。ES6标准中还添加了不少语言特性，可以帮助用户更充分地使用函数式编程技术，其中包括箭头函数、Promise对象和扩展运算符等。在Javascript中，函数可以表示应用程序中的数据。细心的读者应该已经发现，可以使用关键字var像声明字符串、数字或者其他任意变量那样声明函数：var log =function(message){ console.l

2020-06-27 20:05:09 1277

原创 css 中的 flex 布局（看完不会来找我呦~）

1.基本原理 Flex 英文意思为，弯曲，屈伸，可以伸缩的布局，天生就是为了适配不同的分辨率。而且用法也很简单，首先只要告诉浏览器，我是一个伸缩布局就可以了。注意的点：注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为 Flex 布局Webkit 内核的浏览器，必须加上 -webkit 前缀。.faBox { display: 'flex'; //给父元素设置为伸缩布局 display: -web

2020-06-23 21:51:21 324

原创面试题输出打印结果总结

1.宏任务，微任务async function async1() { console.log(1); const result = await async2(); console.log(3);}async function async2() { console.log(2);}Promise.resolve().then(() => { console.log(4);});setTimeout(() => { console.log(5);});

2020-06-22 16:33:04 581

原创和我一起完全理解javascript中的宏任务与微任务

在了解宏任务与微任务之前我们必须要先弄清 javascript 中的执行机制这个概念，弄清楚了这个概念，宏任务与微任务的理解也就 so easy 了~~javascript 中的执行机制1.关于javascriptjavascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的。1.1 JS为什么是单线程的？答：JavaScript的单线程，与它

2020-06-22 14:20:33 1504 2

原创 react组件事件代理的原理

React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定。1、事件代理区别于浏览器事件处理方式，React并未将事件处理函数与对应的DOM节点直接关联，而是在顶层使用了一个全局事件监听器监听所有的事件；React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系；当某个事件触发时，React根据这个内部映射表将事件分派给指定的事件处理函数；当映射表中没有事件处理函数时，React不做任何操作；当一个组件安装或者卸载时，相应的事件处理函数会自动被添加到事.

2020-06-20 20:51:46 1930

原创 react-router 路由的实现原理

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。本文从两个方便来解析 react-router 实现原理。一：介绍 react-router 的依赖库history；二：使用 history 库，实现一个简单的 react-router 路由。history 介绍:history 是一个 JavaScript 库，可让您在 JavaScript 运行的任何地方轻松管理会话历史记录。history 抽象出各种环

2020-06-20 20:31:16 510

weixin_48786946的博客