- 博客(85)
- 收藏
- 关注
RSS订阅原创 react-beautiful-dnd组件报Unable to find draggable with id
项目中使用react-beautiful-dnd组件实现可拖拽，但拖了1次后可能会出现拖拽异常（元素拖不动），打开控制台会发现有报错。给Draggable组件和其下方的div添加了key就正常了,以下是我自己简单写的一个demo，可供参考。：貌似这个组件在vite脚手架起的项目中会有问题（元素不能被拖拽），亲测在react脚手架ok。
2024-03-05 19:30:45
514
原创 继上篇无限滚动列表案例（使用css animation 兼容IE11）
2、还有一个点就是animation属性我我们通过js动态设置上去的，而不是在css中直接写死，这是因为这个animation属性在IE10-11浏览器中一旦被设置赋值，就不能再改变，所以我们就不在css中初始设置了。上篇博文我们讲到了一个dom API（animate），虽然很好用，但它在IE11上却不支持，今天就简单讲一下，如何在IE11中使用动画，其实可以理解为换种方式实现，这里我会列出我遇到的一些坑。:我们还是实现一个无限滚动列表为demo。
2023-04-24 22:22:34
319
原创 对象（含原型）
ECMAScript 提供了Object.defineProperties()方法。这个方法可以通过多个描述符一次性定义多个属性。它接收两个参数：要为之添加或修改属性的对象和另一个描述符对象，其属性与要添加或修改的属性一一对应year_: {},edition: {value: 1},year: {get() {},});本文是基于Javascript高级程序设计（第四版）的内容自行总结和梳理，后续还会出一系列关于本书的读后总结博文！
2023-04-05 20:00:24
297
原创 【面试题】redux及中间件相关面试题&解析
1、什么是Redux？Redux就是一个js容器，用于全局的状态管理2、为什么在React项目中要使用Redux？因为React本质上就是一个UI库，它是单向数据流的，就是说数据只能从父组件通过props流向子组件，但如果子组件要想修改父组件的值，就只能通过给绑定函数传递参数的形式来修改，一旦项目中数据比较复杂时，这种形式会搞得一团糟，所以需要Redux的协助，帮助其更好的管理项目中复杂的数据问题3、Redux的三大核心原则？4、redux核心组成？store：它就是一个将派发的action和reducer
2022-07-10 22:25:10
7117
原创 【React进阶之路01】- JSX演变成真实DOM
什么是 JSXJSX 是 ECMAScript 一个类似 XML 的语法扩展。基本上，它只是为 React.createElement() 函数提供语法糖，从而让在我们在 JavaScript 中，使用类 HTML 模板的语法，进行页面描述。JSX编译（babel）由于JSX是javascript的一种扩展，所以这就直接决定了浏览器不能像天然支持js一样支持jsx，所以jsx需要被编译后才能被识别，这个编译工作正是由Babel来实现的我们先来看个简单的JSX demo，看看经过babel的编译他会变
2022-05-24 15:22:39
886
原创 【Git入门】- 相关概念与底层原理（git对象、树对象、提交对象）
git基本概念git简介与安装linus常见命令clear: 清除屏幕echo ‘output content’ ：往控制台输出’‘output content’’echo ‘output content’ > demo1.txt: 新建一个demo.txt文件，文件内容是output contentll : 将当前目录下的子文件和子目录的详情信息（时间、读写权限、大小）展平输出到控制台ls: 只是将当前目录下的子文件和子目录输出，功能类似于ll，只不过输出的信息并没
2022-04-13 10:04:14
1556
原创 【js进阶】-函数柯里化
一、高阶函数在正式聊函数柯里化之前，我这里给大家补充下高阶函数的概念和应用：1.1、什么是高阶函数？高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足下列一个条件的函数：接受一个或多个函数作为输入输出一个函数也就是说高阶函数是对其他函数进行操作的函数，可以将它们作为参数传递，或者是返回它们。 简单来说，高阶函数是一个接收函数作为参数传递或者将函数作为返回值输出的函数。1.2、高阶函数例子其实平时开发中经常会用到高阶函数，只是之前你不清楚其概念而已，来
2022-01-18 11:14:20
1058
原创 【面试题】-模拟实现栈数据结构（先进后出）
要求：并要求实现类的in、out、top、size函数，同时要求，执行下面代码时输出预期结果class Stack{ constructor(){ } in(value){ // 你的代码 } out(){ // 你的代码 } top(){ // 你的代码 } size(){ // 你的代码 }}const stack = new Stack();stack.in(1);stack.in(2);stack.in(3);stack.top(); //输出3stack.
2022-01-13 10:30:32
854
1
原创 【js进阶】-this解读
一、前序在之前的博文中我们讲到函数在调用的时候会创建执行上下文，而执行上下文中主要有三个方面组成（创建作用域链、生成变变量对象以及确定this指向）从上面这张执行上下文的生命周期图可以看到，执行上下文的创建阶段，会分别生成变量对象，建立作用域链，确定this指向。其中变量对象与作用域链我们都已经明白了（如果有不太清楚的同学，可以去看之前的博文（js基础-执行上下文/执行上下文栈）），本文的关键，就是确定this指向。从上面可以得出一条非常重要的结论，对于我们来说一定要记住：结论：this指向是在函
2022-01-07 11:42:41
984
原创 【js进阶】-js执行机制
一、前序关于js执行机制的内容，其实我早些时间也做过内容的分享，近期我是想着再对js的基础核心内容做一轮系统性的巩固和复习，所以本文相对于之前的文章会有部分细节点的更新，会让读者更加地系统理解这块的知识点，这里我也贴一下原先文章的地址（深入理解js执行机制）我们知道页面的渲染，JS的执行，事件的循环，都是在浏览器内核中进行的，也就是浏览器渲染进程，所以今天要讨论的js的整个执行机制其实就是在浏览器内核中处理的，这些概念性的理解，如果有同学还不太清楚的，可以去看下我另外一篇文章（点我跳转）二、 js执行
2021-12-31 14:56:59
1390
原创 浏览器进程、内核以及渲染机制等概念介绍
进程和线程首先在开头先了解下进程和线程的概念，有助于后面相关概念的理解，往上有很多对于线程和进程的形象举例：进程：可以比喻成一个工厂，工厂有它的独立资源（每个进程cpu都会分配独立的内存空间），工厂之间相互独立（进程之间相互独立）线程：可以比喻成工厂中的工人，一个工厂由一个或多个工人组成（一个进程由一个或多个线程组成），同一个工厂下的工人可以共享工厂的资源（同一进程下的各个线程之间共享程序的内存空间，包括代码段、数据集、堆等）此时为了更加深印象的理解以上概念，你可以打开任务管理器看下，这边显示的都是
2021-12-29 17:03:21
1081
原创 【js进阶】-闭包
闭包，一说起这个词，很多人觉得就很难理解，或者说很难记住，那是因为对于该词的解释版本太多了，导致你都不知道哪个是正确的解释一、定义从理论角度：闭包是指那些能够访问自由变量的函数，所以说所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域，所以从理论的角度，所有函数都算是闭包从实践角度：以下函数才算是闭包：即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）在代码
2021-12-22 18:03:55
639
原创 【js进阶】-原型/原型链
一、构造函数创建对象我们先使用构造函数创建一个对象，先来认识下构造函数function Person() {}var person1 = new Person();person1.name = '张三';console.log(person1.name) // 张三在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person1prototype每个函数都有一个 prototype 属性，它指向的是一个对象，既然它是一个对象，我们就手动给上面例子中的Pe
2021-12-21 17:24:06
642
原创 【js基础】-错误处理与调试
一、错误分类执行代码期间可能会发生的错误有多种类型。每种错误都有对应的错误类型，而当错误发生时，就会抛出相应类型的错误对象。js共定义了下列 7 种错误类型：Error：基本的错误类型，其他类型都继承自这个类型EvalError：使用 eval()函数而发生异常时被抛出RangeError：范围错误ReferenceError：引用错误SyntaxError：语法错误TypeError：类型错误URIError：表示以一种错误的方式使用全局URI处理函数而产生的错误，例如：（decodeU
2021-12-16 11:23:39
1201
原创 React-Hooks学习
HookHook 是 React 16.8 的新增特性。它可以让你在不编写 class类组件 的情况下使用 state 以及其他的 React 特性import React, { useState } from 'react';function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>
2021-12-06 11:44:52
882
原创 Web components
组件化介绍背景：原先一个复杂页面，什么是组件化：组件化的优点：组件是模块化编程思想的体现，便于代码复用便于团队协作开发，提高了开发效率代码维护性好，对于代码的管理和使用非常方便，组件的加载和卸载只需要添加或删除一行代码即可完成组件提供了html、css、js的封装方法，实现了与同一页面其他代码的隔离组件非常灵活，定制非常容易，组件往往会留出接口，供使用者设置常用属性，比如title组件，使用者可以自定义标题、样式等...
2021-11-23 10:13:53
1552
原创 js清除事件监听失效
当你给一个元素添加事件监听后，需要在组件销毁时给他清除事件监听，有同学就直接想到了这不是很简单吗？直接用removeEventListener就可以了，但实际上有些情况下会不生效：//监听时document.getElementById("idName").addEventListener('scroll',()=>{ 监听滚动后的函数代码})清除监听document.getElementById("idName").removeEventListener（‘scroll’,()=>
2021-11-18 15:13:11
2334
原创 【js基础】-数据类型
概述ECMAScript 规范规定语言类型有六种 Undefined，Null，Boolean，String，Number，和 Object， ES6 又添加了一种基本类型，叫Symbol。基本类型：Undefined、Null、Boolean、String、Number、Symbol 都是基本类型引用类型：Object 是引用类型，这包括数组（array）、对象（object）、函数（function）等他们的划分方式其实是其是否可以表示为固定长度， 比如Undefined，Null，Boolea
2021-11-18 14:54:09
1125
原创 React组件间通信方式详解
今天我们单独聊一聊React中组件之间的传值问题！！！一、父组件向子组件传值//父组件class App extends React.PureComponent<AppProps> { render() { return ( <div> <Title title="标题" type="food" url="http://www.baidu.com" /> </div> ) }.
2021-10-04 19:46:36
574
原创 Can‘‘t connect to MySQL server on localhost (10061)解决方法
一、问题现象当你安装完mysql后，使用mysql命令登录时（mysql -u账号 -p密码），或者说你在用数据库图形化软件连接时，比如sqlyog，系统报错 Can’t connect to MySQL server on localhost (10061)二、问题解决一般来说，很有可能是你的mysql服务没启动，你需要先启动mysql的服务，那怎么起服务呢？1、在找到的cmd.exe中点右键，选择，以管理员身份运行。2、然后执行net start mysql即可启动服务，启动成功会有提示
2021-08-31 00:10:53
708
原创 javascript 数组分组多种方式实现
方式一：使用for循环方式实现：//数据分组函数（每组500条）function group(data) { var result = []; var groupItem; for (var i = 0; i < data.length; i++) { if (i % 500 == 0) { groupItem != null && result.push(groupItem); groupI
2021-08-18 14:51:15
3599
原创 使用planetaryjs插件实现3维地球仪效果
一、插件下载npm install planetaryjs -S二、插件使用//index.js文件import * as planetaryjs from 'planetary.js' //引入planetaryjs插件import fileJson from './data/world.json' //这个json包含了一些地球的信息，我这里单独保存在本地了//渲染地球仪 showEarth=()=>{ var globe = planetaryjs.pl
2021-08-16 09:41:52
914
1
原创 月读书系列-高性能JavaScript
第一章、加载和执行1.1、脚本的位置由于javascript脚本会阻塞页面其他资源的下载，因此推荐将所有的script标签尽可能放到body标签的底部，以尽量减少对整个页面下载的影响1.2、合并脚本尽量减少页面中外链脚本文件的数量，也会改善性能，因此构建器才会最终把js文件都打包成一个文件（下载单个100kb文件将比下载4个25kb文件更快）1.3、无阻塞脚本1.3.1、延迟脚本HTML4中为script标签定义了一个扩展属性defer，该属性表明本脚本不会修改DOM，因为此代码可以安全的延迟
2021-08-10 11:41:08
385
原创 关闭chrome同源策略（Mac）
一、步骤：打开你的终端输入命令：open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/chongshen/MyChromeDevUserData/上述命令中的 --disable-web-security 就是关闭同源策略的意思，你要改的就是–user-data-dir后面的路径（按你自己的安装路径来）此时正常就会自动跳出一个chrome窗口，出现这个窗口
2021-07-23 10:54:03
1823
原创 毫秒时间戳转换成对应天、时、分、秒
const d = Math.floor(timestamps / 86400000); // 天 const h = Math.floor(timestamps % 86400000 / 3600000); // 时 const m = Math.floor(timestamps % 86400000 % 3600000 / 60000); // 分 const s = Math.floor(timestamps % 86400000 % 3600000 % 6000...
2021-07-07 15:19:46
815
原创 数字转中文大写
const priceNum = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];function getPriceStr(price) { const priceMinType = ['', '拾', '佰', '仟']; const temFirstStrArr = price.split(''); temFirstStrArr.reverse(); const temStrArr = temFirstStrArr.map((it
2021-07-07 10:06:25
112
原创 websocket快速入门
一、概念（什么是websocket）WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。二、特点最大的特点就是服务器可以主动地向客户端发送信息，客户端也还是可以主动向服务端发信息，是真正的平等对话，它属于服务器的一种推送技术建立在 TCP 协议之上，服务器端的实现比较容
2021-07-03 13:40:44
694
1
转载 Babel教程
一、Babel 简介它是一个 JavaScript 编译器，它是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中下面举个简单例子转换前，代码里使用ES6箭头函数以及使用const声明常量 const fn = (num) => num + 2;转换后，箭头函数变成ES5的普通函数，const也转换成var了，这样就可以在不支持箭头函数的浏览器里运行了 var fn =
2021-06-28 20:02:41
1517
原创 git拉取/推送远端代码时ssh报错
一、报错现象：当你在拉取或者推送代码至远端仓库时（概括一句话就是与远端仓库交互时），发现终端控制台报ssh: connect to host gitlab.alibaba-inc.com port 22: Connection timed out fatal: Could not read from remote repository.这样的错误时，说明此时无法正确连接远端仓库二、报错原因可能是因为当前网络不允许通过ssh密钥的方式来连接远端仓库地址（比如我自己的情况，远端仓库必须用公司内网才能连接
2021-06-24 11:39:10
2027
1
原创 查看端口占用及停止对应进程（启动项目时报错）
一、报错当你在启动项目时，突然发现终端控制台给你报错了，如下图类似界面时，你就应该知道是某个进程占用你项目启动的端口了，所以项目起不来报错：那要如何解决呢？很简单：找到那个占用的进程，然后将其”杀死“就ok了，下面我列了两个不同系统的查询以及解决方法，你们自己对号入座即可二、Mac查询对应端口的占用情况：sudo lsof -i :你要查询的端口号，例如：sudo lsof -i :80出现如下界面：找到那个最后有LISTEN（监听）的那条信息，前面的PID就是占用该80端口的进程，我们
2021-06-24 09:47:13
185
原创 injected stylesheet 导致页面样式异常
问题现象：如果你在开发过程中遇到页面中某个控件样式异常了（无法正常显示），然后打开浏览器控制面板，发现一大片灰色字体的，并且右上方还写着injected stylesheet，如下图所示：这有可能就是因为你安装了广告拦截的插件（这里我以chrome浏览器为例）问题原因：可能就是这个插件在检索的过程中，有可能你的控件中有带ad（广告）的字样，可能是id，或着class等，插件就把你写的这个控件当成是广告屏蔽了解决方法：1、你把这个chrome插件（广告屏蔽插件）卸载或着停用；2、你检查下你代码
2021-06-17 11:34:59
2305
1
原创 安装typescript报错
问题描述：当你想本地安装typescript包来编译操作ts文件时（即：npm i -g typescript），终端报错，报错界面如下：出现这个报错可以看到大致意思就是没有权限，不被允许，所以你可以通过sudo npm i -g typescript命令进行安装，敲完回车后，终端会弹出让你输入密码，输入正确后就瞬间安装成功了！最后，怎么确认你是否已经安装完成了呢？你可以输入tsc -v，如果出现相应版本就说明安装ok了...
2021-06-09 14:44:23
1830
1
原创 月读书系列-你不知道的javascript（上）
一、作用域和闭包1.1、作用域是什么？1.1.1、编译原理作用域是一套规则，用来存储和访问变量。任何编程语言都不开作用域，正是作用域这种存储和访问变量的能力将状态带给了程序，赋予了编程语言可以实现丰富功能的能力。讲到作用域就不得不提两个重要角色：引擎和编译器。引擎从头到尾负责整个javascript程序的编译和执行过程。编译器负责词法分析、语法分析、代码生成等脏活累活。javascript 是一门编译型的语言，但它不是提前编译的，它的编译发生在在代码执行前的几微秒。传统的编译语言的编译过程分为三
2021-05-16 17:28:09
292
1
原创 【js进阶】-深浅拷贝
一、为什么会出现深浅拷贝实质上是由于JS对基本类型和引用类型的处理不同。基本类型指的是简单的数据段，而引用类型指的是一个对象，而JS不允许我们直接操作内存中的地址，也就是不能操作对象的内存空间，所以，我们对对象的操作都只是在操作它的引用而已。二、js中复制初体验当我们复制一个基本类型的值时，会创建一个新值，并把它保存在新的变量的位置上。而如果我们复制一个引用类型时，同样会把变量中的值复制一份放到新的变量空间里，但此时复制的东西（也就是值）并不是对象本身，而是指向该对象的指针。所以我们复制引用类型后，.
2021-05-13 17:39:53
1325
3
原创 【js进阶】-内存管理
一、数据类型分类基本数据类型字符串类型（String）、数字类型（ Number）、布尔类型（ Boolean）、空（ Null）、未定义（ Undefined）Symbol类型，总共6种注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。引用数据类型引用数据类型就只有Object类型，这包括数组（array）、对象（object）、函数（function）等二、栈、堆内存在js引擎中对变量的存储主要有两种位置，堆内存和栈内存。存储对象：栈内存主要用于存储
2021-05-13 10:49:47
221
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人