- 博客(179)
- 资源 (5)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 useState为什么不能放到条件语句里面？
1. 背景首先我们来看一段代码：import React, { useState } from 'react'let showSex = truefunction Example2(){ const [ age, setAge ] = useState(18); if(showSex){ const [ sex, setSex ] = useState('男'); showSex = false; } const [ work, se
2021-10-08 23:11:41
4199
原创 react-native实现插槽功能
this.props.children 属性表示组件的所有子节点。利用this.props.children可以实现插槽功能。class Index extends React.Component{ render(){ return <View> <Sub color="red"> <View><Text>++++++++</Text></View> </Sub>
2021-06-15 11:54:44
877
原创 React Native 解决 Could not get BatchedBridge问题
问题描述：项目可以正常启动，但是移动端报错，报错信息如下：原因：8081端口被占用解决方法：关闭8081端口
2021-06-14 15:20:15
763
原创 Antd模态框Modal内部组件数据回显
<Modal title="修改菜单" visible={isShowEdit} onCancel={()=>{ this.setState({isShowEdit:false}) }} footer={null} > <EditForm menu={menu} handleCancel={()=>{ this.setState({isShowEdit:false}) }}
2021-06-05 10:09:33
1582
原创 箭头函数作为对象属性时候的this指向是window
let a = { b:{ c:function(){ console.log(this); }, e:()=>{ console.log(this); } }, d:function(){ console.log(this); } } a.
2021-03-16 17:10:32
1401
1
原创 vue 跳转同一路由,页面不刷新解决方案
监听路由变化使用watch或beforeRouteUpdate监听$route的变化给router-view添加唯一key如果想强制刷新，可以在根路由上为其分配一个唯一key。采用唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件...
2021-02-25 19:26:28
2019
原创 vue组件props，methods，data，computed，watch的加载顺序
props - > methods - > data - > computed - > watch官方源码链接父组件向子组件通过props传值，props是一个只读属性，如果要改变props的值，需要在data中进行定义，所以props在前，data在后computed计算属性要使用data里面的数据，所以data在前，computed在后（待更新…）...
2021-02-24 17:21:03
2718
原创 洗牌算法的JS实现（如何打乱数组）
function shuffle(arr){ for(var i = 0;i<arr.length;i++){ var random = Math.floor(Math.random()*arr.length); var temp = arr[i]; arr[i] = arr[random]; arr[random] = temp } .
2021-02-24 16:56:52
388
原创 React的生命周期
组件的生命周期概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期；组件生命周期分为三部分：组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOMrender：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了comp
2021-01-24 15:26:52
170
原创 控制台报错：es6.object.define-property.js:5 Uncaught TypeError: $export is not a function的解决方法
控制台提示信息：es6.object.define-property.js:5 Uncaught TypeError: $export is not a function解决方法：排除node_modules文件夹
2021-01-16 18:50:08
470
原创 让一个元素水平垂直居中，到底有多少种方案？
水平居中• 对于行内元素:给如果父级元素是块级元素，则直接给父级元素设置text-align: center;如果父级不是块级元素，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;• 对于确定宽度的块级元素：width和margin实现。margin: 0 auto;首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%。设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: transl
2020-12-19 19:07:09
247
1
原创 JS中的排序算法（冒泡排序、选择排序、插入排序、希尔排序、快速排序）的封装
代码封装： //创建列表类 function ArrayList() { //属性 this.array = []; //方法 //将我们数据可以插入到数组中的方法 ArrayList.prototype.insert = function (item) { this.array.push(item);
2020-12-13 21:17:33
244
原创 JS中的二叉搜索树
代码封装：//封装二叉搜索树 function BinarySearchTree(){ //节点 function Node(key){ this.key = key; this.left = null; this.right = null; } //属性 this.root
2020-12-10 16:53:45
151
1
原创 JS中的哈希表
封装哈希表结构： //封装哈希表类 function HashTable(){ //属性 this.storage = []; this.count = 0; this.limit = 7; //方法 //哈希函数 HashTable.prototype.hashFunc = function (str,si
2020-12-07 20:50:20
711
原创 JS中的集合结构
1 集合结构的特点集合比较常见的实现方式是哈希表集合通常是一组无序的，不能重复的元素构成和数学中的集合名词比较相似，但是数学中的集合范围更大一些，也许集合中的元素重复在计算机中，集合通常表示的结构中的元素是不允许重复的集合是特殊的数组特殊之处在于里面的元素没有顺序，也不能重复没有顺序意味着不能通过下标值进行访问，不能重复意味着相同的对象在集合中只会存在一份2 集合中常见的方法add(value)：向集合添加一个新的项。remove(value)：从集合移除一个值。ha
2020-12-05 19:31:44
478
原创 JS中的双向链表
1 双向链表的特点可以使用一个head和一个tail分别指向头部和尾部节点每个节点都由三部分组成：前一个节点的指针（prev）/ 保存的元素（item）/ 后一个节点的指针（next）双向链表的第一个节点的prev是null双向链表的最后一个节点的next是null...
2020-12-04 17:32:42
198
原创 JS中的链表结构
1 相对于数组的优缺点链表的优点：内存空间不必连续，可以充分利用计算机的内存，实现灵活的内存动态管理链表不必在创建时就确定其大小，并且大小可以无限的延伸下去链表在插入和删除数据时，时间复杂度可以达到O(1)，相对数组效率高很多链表的缺点：链表访问任何一个位置的元素时，都需要从头开始访问。（无法跳过第一个元素访问任何一个元素）无法通过下标直接访问元素，需要从头一个个访问，直到找到对应的元素2 链表的常见操作append(element)：向列表尾部添加一个新的项insert(p
2020-12-02 19:52:31
623
原创 网站TDK标题的正确写法
什么是TDK？T：titleD：meta-descriptionK：meta-keywordsTDK的重要性TDK占比40%的排名得分，没有关键词，网站几乎不会有排名。书写格式(1) 标题title：字数32个字左右格式：关键词1-关键词2-关键词3-品牌词例如：<title>杯子-水杯子生产厂家提供双层玻璃杯订做价格杯子定制OEM贴牌代加工公司-晶立方</title>(2)描述description字数60-80字描述清楚用户需求什么是用户需
2020-12-02 16:37:16
723
原创 JS中的队列结构
JS中的队列结构1 特点同栈结构一样，队列也是一种受限的线性结构。它只允许在表的前端进行删除操作，在表的后端进行插入操作（先进先出）。2 队列的操作enqueue(element)：向队列尾部添加一个（或多个）新的项。dequeue()：移除队列的第一（即排在队列最前面的）项，并返回被移除的元素。front()：返回队列中第一个元素——最先被添加，也将是最先被移除的元素。队列不做任何变动（不移除元素，只返回元素信息——与Stack类的peek方法非常类似）。isEmpty()：如果队列中不
2020-12-01 21:16:26
135
原创 用队列解决击鼓传花算法题
题目：标号为0~6的6个小朋友围成一圈，开始数数，数到数字5的人自动淘汰，不断循环，剩下的最后一个人胜利。问：最后胜利的人是谁？解析：将这6个学生放入队列中，每个人报一个数的同时出队，并重新进入队列尾部。数到5的学生，出队后不再重新加入队列。依次循环，直到队列中只有一个人，即为最后的胜利者。解决方法：第一步：封装队列类 //封装队列类 function Queue(){ //属性 this.items = [];
2020-12-01 19:56:13
578
原创 JS中的栈结构
JS中的栈结构1 特点只能在栈顶添加和删除元素（后进先出）2 栈的操作push(element): 添加一个新元素到栈顶位置.pop()：移除栈顶的元素，同时返回被移除的元素。peek()：返回栈顶的元素，不对栈做任何修改（这个方法不会移除栈顶的元素，仅仅返回它）。isEmpty()：如果栈里没有任何元素就返回true，否则返回false。clear()：移除栈里的所有元素。size()：返回栈里的元素个数。这个方法和数组的length属性很类似。3 实现栈的两种方式基于数组实
2020-11-30 15:46:57
319
原创 前端组件化的个人理解
组件是页面的一个部分。我们可以把一个页面切分成一个一个部分，每个部分我们都可以称之为一个组件。每个组件有独立的HTML、css、js代码。你可以将组件进行任意次数的复用。通过组件，我们可以把一个项目像拼积木一样拼起来。...
2020-11-17 11:36:15
453
原创 mvvm模式
MVVM模式的组成View层:View层是视图层，也就是用户界面。Model层:Model是指数据模型，也就是后端进行业务处理和数据处理ViewModel层:View与Model互相分开，通过ViewModel联系起来。ViewModel就是指Vue，它负责dom监听与数据绑定。通过上面这幅示意图，我们可以发现：在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，ViewModel也能监听到视
2020-11-17 11:21:00
203
原创 webpack 性能优化
webpack性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR功能优化代码调试source-map生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包优化代码运行的性能缓存（hash-chunkhash-contenthash）tree shakingcode split懒加载 / 预加载pwaexternalsdll...
2020-10-31 19:23:42
176
原创 已解决：使用 externals浏览器报错Uncaught ReferenceError: jquery is not defined
报错信息如下：原因：
2020-10-31 17:19:34
550
原创 解决：ValidationError: Invalid options object. PostCSS Loader has been.....
报错信息：ERROR in ./src/css/a.cssModule build failed (from …/node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError: Module build failed (from …/node_modules/postcss-loader/dist/cjs.js):ValidationError: Invalid options object. PostCSS Loader
2020-10-29 21:12:24
11857
原创 已解决：输入npx webpack-dev-server指令后控制台显示成功执行，但是浏览器显示 cannot get/，浏览器控制台显示404
原因：contentBase配置错误
2020-10-29 17:50:26
2025
1
原创 解决：输入npx webpack-dev-server指令后报错 Error: Automatic publicPath is not supported in this browser
解决方法：在output里面加上 publicPath:'./'
2020-10-29 17:45:56
281
原创 输入指令npx webpack-dev-server报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法
输入指令：npx webpack-dev-server显示如下报错信息：原因：webpack现在存在一个bug,最新版的webpack-dev-server 和最新版的webpack-cli 并不兼容。解决办法：打开package.json，查看依赖包的版本：解决的方法: 重新下载webpack-cli正确的版本。（“webpack-cli”: “^3.3.12”,和“webpack-dev-server”: "^3.11.0"是互相兼容的，报错之前的版本是webpack-cli 4.1.0）
2020-10-29 16:21:16
849
1
原创 输入webpack指令的时候报错：[webpack-cli] ReferenceError: requrie is not defined
是require不是requrie一个很傻的错误：require拼写错了。
2020-10-28 16:13:18
1854
原创 快速入门less
官网地址：http://lesscss.cn/Less编译工具koala 官网：http://koala-app.com/将less类型的文件转换为css类型的文件。Less中的注释以//开头的注释，不会被编译到css文件中以/**/包裹的注释会被编译到css文件中Less中的变量使用@来申明一个变量：@pink:pink作为普通属性值来使用：直接用@pink作为选择器和属性名：#@{selector的值}作为url：@{url}变量的延迟加载例如：@color:deep
2020-10-26 19:46:08
574
1
原创 解决：输入$ git push origin master后跳出的窗口无登陆密码框，而是提示：connect to Github sign in with your brower的问题
（1）关闭含有信息：connect to Github sign in with your brower的弹出框（2）此时出现一个ssh弹出框，显示：‘https://github.com’: 输入的是github上的邮箱账号, 而不是github中设置的usernamePassword for ‘https://你的github邮箱@github.com’: 输入github的登录密码,点击enter键即可（3）此时命令行中显示如下信息，成功push(4)刷新仓库页可以看见文件都上传到了Gith
2020-10-25 20:05:19
5570
原创 jQuery中的Ajax
（1）$ajax()方法作用：发送ajax请求$.ajax({ // 请求方式 type: 'get', // 请求地址 url: 'http://localhost:3000/base', // 请求成功以后函数被调用 success: function (response) { // response为服务器端返回的数据 // 方法内部会自动将json字符串转换为json对象 console.log(response);
2020-10-24 11:20:01
261
原创 什么是同源政策？使用JSONP解决同源限制问题
什么是同源？如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。例如：对于http://www.example.com/dir/page.htmlhttp://www.example.com/dir2/other.html：同源http://example.com/dir/other.html：不同源（域名不同）http://v2.www.example.com/dir/other.html：不同源（域名不同）http://www.example.
2020-10-23 17:16:56
209
原创 什么是FormData对象？FormData对象的作用
什么是FormData对象？XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。For
2020-10-23 10:33:33
3825
原创 src和href的区别是什么？
定义href 是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。常见场景:<a href="http://www.baidu.com"></a> <link type="text/css" rel="stylesheet" href="header.css"> src 是source的简写，目的是要把文件下载到html页面中去。常见场景:<img src="img/girl.jpg"></img>
2020-10-23 09:38:19
627
原创 相邻兄弟选择器prev+next 和通用兄弟选择器prev ~sibings 的区别
相邻兄弟选择器可选择紧接在另一元素后的元素，且两者有相同的父元素。例如：<div class="a">1</div><div>2</div><div>3</div><div>4</div><div>5</div>$('.a + div').css({backgroundColor:'pink'});运行效果：通用兄弟选择器可选择紧接在另一元素后所有匹配的元素，且两者
2020-10-22 21:18:08
1447
原创 js console.log(1＜2＜3)的运算结果；console.log(3＞2＞1)的运算结果
今天看到了一个很有意思的题目：console.log(1<2<3)和console.log(3>2>1)的运算结果分别是什么？这道题主要在考察布尔类型的数据参与比较运算的时候是如何转换的：在关系运算符中：如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较。我们可以做一个测试：var result1 = 1<2 ;console.log(result1); //trueconsole.log(result1<3); //truevar resu
2020-10-22 20:52:25
1837
原创 什么是Ajax？Ajax实现步骤
什么是Ajax？Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单来说， Ajax 就是实现页面无刷新更新数据的一种方法。Ajax的应用场景：页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字下拉列表Ajax的运行环境Ajax需要运行在网站环境中才能生效。比如在nodejs搭建的网站服务器中。Ajax运行原理Ajax相对于浏览
2020-10-20 21:12:02
822
原创 ES6 对象的扩展
ES6 对象的扩展1、属性的简洁表示法ES6允许直接写入变量和函数，作为对象的属性和方法。这时，属性名为变量名, 属性值为变量的值。var birth = '2000/01/01';var Person = { name: '张三', //等同于birth: birth birth, // 等同于hello: function ()... hello() { console.log('我的名字是', this.name); }};3、属性名表达式JavaScrip
2020-10-20 20:13:11
118
仿去哪网webapp
2020-11-30
用 html+css+bootstrap+Nodejs实现学生管理系统
2020-10-15
用Node.实现留言板功能
2020-10-10
绑定csdn的时候出现了下面的页面，绿色按钮不能点击，该怎么解决呢？
2020-10-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人