POWER!-CSDN博客

原创题题题题题1

js 基本数据类型7 种原始类型Boolean、Number、String、Null、Undefined、Symbol（es6）、BigInt、ObjectSymbol的理解symbol是在es6中引入的基本数据类型、它表示的是一个独一无二的值，主要是来解决命名冲突的问题，它的使用场景基本都是在对象里去定义一个唯一的属性名、然后还可以去用它定义一些常量// 用法let sy = Symbol("key1");syObject[sy] = "kk";console.log(syObjec

2021-11-12 10:57:07 743

原创 prototype

CSS【】css盒模型html元素都可以看成是一个盒子，盒模型就是用来设计和布局时使用。**盒模型主要包括：**外边距（margin）、边框（border）、内边距（padding）、内容（content）**盒模型又分为两种：**标准盒模型（content-box）、怪异盒模型（border-box）**标准盒模型(默认)：**width就是content的内容，所以计算标准盒模型的总长/宽=margin+border+padding+width**怪异盒模型/IE盒模型：**width就是c

2021-11-08 14:46:43 145

原创作用域react

个人介绍【ok】js 基本数据类型7 种原始类型Boolean、Number、String、Null、Undefined、Symbol（es6）、BigInt、ObjectSymbol的理解symbol是在es6中引入的基本数据类型、它表示的是一个独一无二的值，主要是来解决命名冲突的问题，它的使用场景基本都是在对象里去定义一个唯一的属性名、然后还可以去用它定义一些常量// 用法let sy = Symbol("key1");syObject[sy] = "kk";console.lo

2021-11-08 14:45:24 632

原创 React原生拖拽API实现拖拽及带动画的排序

需求：React原生拖拽API实现拖拽及带动画的排序难点：React原生拖拽各个API函数的用途排序动画的实现思路实现过程：拖拽变换位置还算比较顺利，只要拖拽API了解就问题不大，感觉难点主要在动画的实现，动画的实现主要参考了该文章：js drag拖动排序，但需求上有两点跟该文章的不太一样：一个是用React实现，还有就是该文章的动画思路是先替换dom元素的位置再进行动画效果展示。然后我打算先动画再替换位置。该文章的动画具体实现思路如下：先记录两个元素的位置，再将dom元素进行替换位

2021-11-05 17:20:14 700

原创 react-quill 图片上传及图片粘贴功能踩坑记录

Gitlab React-quill：https://github.com/zenoamaro/react-quill中文文档 Quill：http://doc.quilljs.cn/1409381官网 Quill：https://quilljs.com/docs/quickstart/Gitlab Delta：https://github.com/quilljs/delta需求:图片上传由base64改为走后端接口存储服务端图片粘贴功能，也走后台接口存储服务端坑点：focus，onb

2021-11-03 15:35:07 4479 6

原创 LEARN_框架_React 使用 use Effect 和 useLayoutEffect 的区别

React 使用 use Effect 和 useLayoutEffect 的区别useEffect 是每次 render 之后都会调用的函数，可以代替之前 class component 中的三个生命周期钩子。作为 componentDidMount 使用，[] 作为第二个参数；作为 componentDiUpdate 使用，可以指定依赖；作为 componentWillUnmount 使用，通过 return 一个函数清除副作用；以上三种用途可同时存在。案例要想知道一个组件什么时候第一次渲

2021-08-18 14:29:05 441

原创 LEARN_框架_React常见问题

Diff 的瓶颈以及 React 的应对由于 diff 操作本身会带来性能上的损耗，在 React 文档中提到过，即使最先进的算法中，将前后两棵树完全比对的算法复杂度为O(n3)，其中 n 为树中元素的数量。如果 React 使用了该算法，那么仅仅一千个元素的页面所需要执行的计算量就是十亿的量级，这无疑是无法接受的。为了降低算法的复杂度，React 的 diff 会预设三个限制：只对同级元素进行 diff 比对。如果一个元素节点在前后两次更新中跨越了层级，那么 React 不会尝试复用它两个不同

2021-08-18 14:28:34 84

原创 LEARN_框架_React-router原理

前言我们可以发现 react-router 用 Link 或者 Push 跳转的时候，页面没有刷新，Url 却发生了变化，而且点击浏览器的返回按钮，页面同样没有刷新，Url 又回退了，这是为什么呢？解密 - 点击返回按钮页面不刷新HashRouter 分析通过 location.hash 来达到 url 变化但是页面不刷新location.hash = hash然后通过 onhashchange 来监听浏览器的返回事件window.addEventListener('onhashchange

2021-08-18 14:28:04 56

原创 LEARN_框架_React-Hook原理解析

useState / useReduceruseState 和 useReducer 都是关于状态值的提取和更新，从本质上来说没有区别，从实现上看，useState 是 useReducer 的一个简化版，其背后用的是同一套逻辑。React Hook 是如何保存状态React 官方文档中提到，React Hook 保存状态的位置与类组件是一致的，但其实略有差别：两者的状态值都被挂载在组件实例对象 FiberNode 的 memoizedState 属性中两者保存状态值的数据结构完全不同。类组件是

2021-08-18 14:27:18 150

原创 LEARN_框架_React-Fiber架构

React 理念我们可以从官网看到 React 的理念：我们认为，React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。那么该如何理解快速响应？可以从两个角度来看：速度快响应自然React 是如何实现这两点的呢？理解速度快每当聊到一款前端框架，拉出来比比渲染速度成了老生常谈。这里提供了各种框架渲染速度的对比我们经常用的前端三大框架指 React、Vue 和 Angular

2021-08-18 14:26:43 212

原创 LEARN_框架_mobx和redux

两者对比redux 将数据保存在单一的 store 中，mobx 将数据分散保存在多个 store 中；redux 使用普通对象保存数据，需要手动处理变化后的操作；mobx 使用可观察对象保存数据，数据变化后自动处理相应的操作；redux 使用不可变状态，这意味着状态是只读的，不能直接去修改，而应该返回一个新的状态，同时使用纯函数；mobx 状态是可以变更的，可以直接对其进行修改；mobx 相对来说更容易理解，在其中有很多的抽象，mobx 更多的使用面向对象编程的思维；redux

2021-08-18 14:25:51 85

原创 LEARN_框架_深入React技术栈二

深入 react 技术栈（二）前言近期在工作过程中遇到了 React 状态管理的问题，后面查阅了一些文章，发现关于 useState 的原理解析比较少。所以这篇文章从讲解原理出发，到简单实现，并列出代码示例。温馨提示：使用 react 时，了解源码内容并不是必要条件。本文偏向探索 react 内部如何运作比较多，所以这里适用对象包括：对 react 内部运行机制感兴趣的同学和熟练使用 Hook 的同学。这里本人非常提倡大家能在日常工作使用更多的 Hook 来减少代码实现或

2021-08-18 14:24:34 155

原创 LEARN_框架_深入React技术栈一

深入 react 技术栈（一）事件系统合成事件的实现机制在 React 底层，主要对合成事件做了两件事：事件委派自动绑定事件委派在使用 React 事件前，一定要熟悉它的事件代理机制。它并不会吧事件处理函数直接绑定到真实的节点上，而是把所有事件都绑定到结构的最外层，使用一个统一的事件监听器，这个事件监听器上维护一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象；当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正

2021-08-18 14:24:02 167

原创 LEARN_重学ES6_Generator

GeneratorGenerator 是 ES6 提出的一种新的异步编程的解决方案，与传统的函数完全不同。概念Generator 字面意思是「生成器」，可以理解为这个特殊的函数会生成多种状态，并返回给调用方。因此 Generator 是一个状态机。执行 Generator 函数会返回一个迭代器对象，也就是说 Generator 函数除了状态机，还是一个迭代器对象生成函数。返回的迭代器对象可以依次遍历函数内部的每一个状态。Generator 有两个特点：定义时需要在 function 关键字和

2021-08-12 09:34:14 58

原创 LEARN_重学ES6_Set 和 Map

Set 和 MapSet概念Set 是一个值的集合，集合中的值都是唯一的。Set 是一个构造函数，可以通过 new 来创建一个实例。Set 通过 add() 来增加元素，新增的元素位于集合的底部，如果新值与之前的元素重合，会被自动过滤掉。Set 构造函数可以接受一个具有 Iterable 接口的其他数据结构作为参数。APISet 的原型属性有两个：Set.prototype.constructor ：构造函数，默认就是 Set 函数；Set.prototype.size ：返回 S

2021-08-10 15:47:34 189

原创 LEARN_重学ES6_重学 Reflect

重学 Reflect之前完全没有了解过 Reflect，实际开发中也几乎没有用过这个ES6的新内置对象，面试中也没有遇到过问这个的。但是了解更多总是没有错，这个内置对象在框架开发上还是挺常见的。概念Reflect 不是一个构造函数，所以使用时不需要用 new 来进行创建。Reflect 字面意思是反射，比较晦涩难懂，ES6新增这个对象的主要目的是：将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty ）放到 Reflect 对象上。现阶段，某些方法

2021-08-10 15:47:03 87

原创 LEARN_重学ES6_proxy 和 defineProperty

proxy 和 defineProperty目前开发 Web 应用的主流框架是 React 和 Vue，这两个框架都能通过一定手段实现响应式编程，比如 Vue 本身就实现了双向绑定以及 React + Mobx 实现类似于 Vue 的操作，这个时候就是 Object.defineProperty 登场的时候。但是随着 Vue3.0 以及 Mobx5 的推出，Proxy 取代了 Object.defineProperty 成为双向绑定的底层原理。我们先以 Object.defineProperty 作为

2021-08-10 15:46:32 138

原创 LEARN_重学ES6_Promise

PromisePromise 是现代 Web 异步开发的重要组成部分，基本上目前所有的 Web 应用的异步开发手段都是通过 Promise 来实现的。概念所谓 Promise，就是一个容器对象，里面保存着某个未来才会结束的事件（异步事件）的结果。Promise 是一个构造函数，它有三个特点：Promise 有三个状态：pending（进行中）、fulfilled（成功）和 reject（失败），并且状态不受外部影响。状态一旦改变就无法修改，并且状态只能从 pending 到 fulfilled

2021-08-10 15:46:00 57

原创 LEARN_重学ES6_Import 和 Export

Import 和 Export在前端开发刀耕火种的时代，当时开发是没有模块化的概念。但随着 js 项目（因为最初的模块化并非作用于前端领域）越来越大，并且前端的地位越来越重要，急需模块化概念引入。在 ES6 之前，社区制定了一些模块化方案：CommonJS 和 AMD；随着 ES6 语法层面的模块化推出之后，这两个逐渐被 import 和 export 取代。Exportexport 用于规定模块对外的接口，不管你是否定义，export 导出的模块都是处于严格模式下，不能用于嵌入式脚本中。expo

2021-08-10 15:45:36 103

转载 LEARN_重学ES6_Bigint

BigIntBigInt 是 ES2020 推出的新特性，以弥补过去 JS 无法做超大数字运算。概述BigInt 是一个新型内置类型，主要是为了表达大于 2^53-1 的整数。我们定义一个 BigInt 类型的数据时有两种方式，第一个是在数字后面加 n，另外一种是调用 BigInt() 方法。let theBigInt = 9007199254740991nlet alsoHuge = BigInt(9007199254740991)typeof thiBigInt // bigint运

2021-08-04 09:59:24 130

转载 LEARN_重学ES6_Async和Await

Async 和 Awaitasync 是 ES7 提出的新特性，是 Generator 的语法糖。既然是语法糖，那我们首先说一下它的改进之处。Async 对 Generator 的改进之处写法改进// Generatorfunction* foo() { yield 'b'}// Async Awaitasync function foo() { await 'b'}对比发现，async 函数在写法上将 Generator 的星号替换成 async 关键字，yield 关键字

2021-08-04 09:58:47 38

转载 LEARN_前端进阶_this全面解析

JavaScript 深入之史上最全 – 5种 this 绑定全面解析this 绑定规则总共有下面 5 种：默认绑定（严格/非严格模式）隐式绑定显式绑定new 绑定箭头函数绑定调用位置调用位置就是函数在代码中被调用的位置（不是声明的位置）。查找方法：分析调用栈：调用位置就是当前正在执行的函数的前一个调用中使用开发工具得到调用栈：设置断点或者插入 debugger; 语句，运行时调试器会在那个位置暂停，同时展示当前位置的函数调用列表，这就是调用栈。找到栈中第二个元素，这就是

2021-08-04 09:57:17 66

转载 LEARN_前端进阶_作用域闭包

深入浅出图解作用域闭包红宝书上对闭包的定义：闭包是指有权访问另一个函数作用域中变量的函数。关键点在于：是一个函数能访问另一个函数作用域中的变量对于闭包有下面有三个特性：闭包可以访问当前函数意外的变量function getOuter(){ var date = '815'; function getDate(str){ console.log(str + date); //访问外部的date } return getDate('今天是：'); //"今天是：81

2021-08-04 09:56:30 112

转载 LEARN_前端进阶_深浅拷贝原理

详细解析赋值、浅拷贝和深拷贝的区别赋值（Copy）赋值是将某一数组或对象赋给某个变量的过程，分类下面 2 部分：基本数据类型：赋值，赋值之后两个变量互不影响引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响对基本类型进行赋值操作，两个变量互不影响。// 木易杨let a = "muyiy";let b = a;console.log(b);// muyiya = "change";console.log(a);// changeconsole.log

2021-08-04 09:55:41 125

转载 LEARN_前端进阶_调用堆栈

理解 JavaScript 中的执行上下文和执行栈执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念执行上下文的类型执行上下文总共有三种类型全局执行上下文：只有一个，浏览器的全局对象就是 window 对象，this 指向这个全局对象；函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文；eval 函数执行上下文：指的是运行在 eval 函数中的代码，很少用且不建议使用。执行栈执行栈，也叫调用栈，具有先进后出结构，

2021-08-04 09:52:55 375

转载 LEARN_Web Worker

Web WorkerWeb Worker 作为浏览器多线程技术，在页面内容不断丰富，功能日趋复杂的当下，成为缓解页面卡顿，提升应用性能的可选方案。发展历史简介曾经的浏览器对于 JS 的处理模式是单线程模式，页面更新要先串行做 2 件事情。随着 Web Worker 的发布，2 件事情可以并行完成。可以直观地联想：并行可能会提升执行效率；运行任务拆分能减少页面卡顿。技术规范Web Worker 属于 HTML 规范，规范文档见 Web Workers Working Dra

2021-08-04 09:50:48 125

转载 LEARN_V8

V8垃圾回收机制垃圾回收：将内存中不再使用的数据进行清理，释放内存空间。V8 将内存分为新生代空间和老生代空间新生代空间用于存活较短的对象又分为两个空间：from 空间和 to 空间Scavenge GC 算法：当 from 空间被占满时，启动 GC 算法存活的对象从 from 空间转移到 to 空间清空 from 空间from 空间和 to 空间互换完成一次新生代 GC老生代空间用于存活较长的对象从新生代空间转移到老生代空间的条件经历一次以上

2021-08-04 09:50:09 44

转载 LEARN_JS相关

JS 相关创建对象的方式// 对象字面量const obj = {}// 构造函数function Obj() {}const obj = new Obj()// Object.create，此时属性挂载在原型上const obj = Object.create({name: 'name'})原型链示意图instanceof 原理用来测试一个对象是否在其原型链中是否存在一个构造函数的 prototype 属性function Person() {}function Fo

2021-08-04 09:49:37 137

转载 LEARN_JS

JSjs 基本数据类型最新的 ECMAScript 标准定义了 8 种数据类型7 种原始类型BooleanNumberStringBigIntNullUndefinedSymbolObject事件循环async function async1() { console.log('async1 start') await async2() console.log('async1 end')}async function async2() { cons

2021-08-04 09:48:41 91

原创 Asp系统及SQLserver2008r2迁移

因为网络问题，公司需要迁移CRM系统，系统比较老，是asp系统+SQLserver2008r2。迁移前后的服务器都是windows2008。这里记录一下迁移的流程和踩得坑：1、安装SQLserver2008R2将sqlserver安装镜像文件解压至服务器里，再进行安装。安装过程百度上都有，注意的是里面有一步要设置sqlserver的账号密码，就是什么校验的那一步，asp系统要通过这个账号...

2020-04-13 20:07:11 224

原创 D3.js力导向图+react的demo（bug修复的完整版）

原文章示例地址：https://blog.csdn.net/weixin_33858485/article/details/91456350效果展示网上找了一圈大部分都是同一个demo，还有两个bug，一个是node节点的名称只显示了一个，另一个是连线的名称少显示了一个。解决方案：node节点名称显示完整：红框部分修改，原因是前面创建连线名称时用的也是text，后面创建节点名称时取...

2020-02-15 15:13:06 822 1

原创 React富文本编辑框react-draft-wysiwyg使用

使用的库react-draft-wysiwyg（还要引入’react-draft-wysiwyg/dist/react-draft-wysiwyg.css’）html-to-draftjsdraftjs-to-html（坑：用了draft-js将html转为draftjs结果样式没有转换过来，这两个库应该是匹配的）代码参考https://blog.csdn.net/qq_405248...

2020-01-06 18:04:02 618

原创 bootstrap 中顶部固定的导航栏在滚动条经过轮播图时被覆盖

想实现鼠标移入导航栏时从透明状态恢复不透明状态但发现在经过轮播图时整个导航栏会被覆盖发现原因出现在轮播图的这句代码中目前没有找到解决办法...

2019-06-15 10:31:50 2425 3

原创 bootstrap 中 modal模态框同背景一样显示灰色

刚开始以为是z-index的原因，去找了笼罩层.modal-backdrop然后我去修改了弹出框的z-index发现不管用后来百度发现原因（http://wenda.bootcss.com/question/321）因为我把模态框放到了含有fixed-top的类里可能这两个有冲突这个本来是想给navbar固定顶部，然后放到父一级了，现在把它放到navbar里就ok了...

2019-06-14 21:34:41 2747 2

原创漫漫爬坑路-学习过的前端课程整理

-艰苦的爬坑之路！基础Web前端开发工程师试学课-网易云课堂https://study.163.com/course/courseMain.htm?courseId=1002905013（html5,css3,js基础）web前端开发0基础HTML+CSS精英班-网易云课堂https://study.163.com/course/courseMain.htm?courseId=1004...

2019-06-10 23:00:48 216 1

原创 CSS元素居中布局（全面分析）

刚开始接触css样式百度最多的就是balabala如何居中，因为不懂原理，每次凑出来就忘记了，前段时间看到一个很全面的分析刚好记下来了，现在基本光靠这份笔记就可以解决几乎所有的元素的居中问题，再也不用去百度了！首先我们要回顾一下块级元素（block），行内元素(inline)以及行内块级元素(inline-block)我之前查了一下发现大家对行内元素会有些笼统，这次分析就把它们分开来，一下是常...

2019-06-10 22:15:14 124

qq_36550828的博客