- 博客(118)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 用 React+ts 实现无缝滚动的走马灯
走马灯是一种常见的网页交互组件，可以展示多张图片或者内容，通过自动播放或者手动切换的方式，让用户能够方便地浏览多张图片或者内容。本次实现的不是轮播图而是像传送带一样的无限滚动的形式。
2023-08-14 00:28:30
2500
1
原创 react源码安装依赖报错
报错信息：AssertionError [ERR_ASSERTION]: Current npm version is not supported for development, expected “8.15.0” to satisfy “2.x || 3.x || 4.x”.解决方法：把package.json中的devEngines中的npm或者node改成自己本地使用的版本就可以安装成功了。
2022-12-17 11:15:32
897
1
原创 jsx代码如何变成dom
jsx背后的功能模块的内容以及做了的事情：1.通过babel将jsx代码编译为React.createElement的调用。2.React.createElement将传入的参数包括type，config，children格式化为ReactElement预期的格式。3.调用ReactElement后组装成ReactElement对象，返回给React.createElement,最终生成虚拟dom。4.虚拟dom作为ReactDOM.render的入参，经过渲染处理生成真实DOM。
2022-11-17 20:25:09
631
原创 js高级之js运行原理
js高级之js运行原理1.浏览器渲染过程1.1 下载文件【掌握】1.2 执行文件1.2.1.html css解析【掌握】1.2.2.js代码执行1.2.2.1.为什么需要js引擎1.2.2.2.浏览器内核和JS引擎的关系1.1.2.3.v8引擎的原理【理解】2.js代码执行过程【掌握】2.1.选择代码运行环境2.2.初始化全局对象2.3.执行上下文栈中运行代码2.4.在执行上下文栈中执行全局代码2.5.执行代码，根据代码从上往下依次执行。1.浏览器渲染过程1.1 下载文件【掌握】当我们输入一个网址之后
2022-03-06 15:53:47
1012
原创 在项目中引入redux管理数据
1.添加redux相关依赖yarn add redux react-redux redux-thunkreact-redux(react组件和redux结合) 比如context，provider共享storeredux-thunk 进行异步请求2.在store文件夹中创建storestore > index.js2.1 createStore传入的参数1.reducer1.项目中的reducer不止一个，因为模块多，不可能所有数据都通过一个reducer进行处理,一般一个模块一个
2021-07-25 17:16:02
372
原创 堆栈内存和js代码执行
1.堆栈内存是什么？1）内存大概分4块，栈内存存放基本变量和对象的引用，堆内存存放对象，栈内存中的引用指向堆内存对应的对象，还有一块是静态变量区，存放静态变量，最后是程序区，存放系统程序的。在程序里申请空间的时候申请的都是堆空间，栈是操作系统维护的。2）堆栈的优缺点栈的优势是，存取速度比堆要快，仅次于直接位于CPU中的寄存器。但缺点是，存在栈中的数据大小与生存期必须是确定的，缺乏灵活性。另外，栈数据可以共享。堆的优势是可以动态地分配内存大小，生存期也不必事先告诉编译器，但缺点是，由于要在运
2021-04-15 23:09:45
270
原创 react Hooks 之 useRef
1.useRef是什么2.为什么要用useRef（为什么重要）3.useRef如何使用4.什么情况下可以使用useRef5.useRef使用到什么程度就可以了
2021-03-27 21:58:50
1586
原创 前端用js在Console手动爬数据
1.本次爬数据的网站是王者荣耀官网的英雄数据基本结构是英雄分类英雄列表 （英雄名字，英雄头像）2.html结构英雄分类和英雄列表的html结构通过html结构我们可以看到分类名称在hero-nav 盒子的li标签里面英雄列表在hero-list盒子里面，名称头像在h3标签里，头像src在img标签里3.代码$$('.hero-nav > li').map((li,i)=>{ //$$相当于jQuery里面的元素选择器$//使用数组的方法map来对数组进行处理获得我们
2020-05-16 09:13:34
543
原创 swiper插件的初始化问题
如果初始化需要的元素在dom树上找不到的话，初始化会失败。所以要先将元素渲染到dom树上再进行swiper的初始化
2020-05-13 16:59:07
1766
1
转载 css 解决fixed 布局下不能滚动的问题
如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置：div {display:fixed;height:100%;overflow:scroll;}但是这样并不会出现滚动条，正确的做法应该设置top和bottom为0：.fixed-content {top: 0;bottom:0;position:fixed;overflow-y:scrol...
2020-05-07 14:01:38
3878
原创 处理flex的兼容性问题
.flex-box { display: flex; display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /...
2020-04-29 10:05:13
1296
转载 es6的Object.keys()和map()组合使用的案例
今儿上班学了个新东西，ES6语法，把对象转化为对象数组。{k1:v1.k2:v2,k3:v3}转化成[{key:k1,value:v1},{key:k2,value:v2},{key:k3,value:v3}]的形式。把对象的key取出来作为对象数组里对象的key的值，把对象的value取出来，作为对象数组伦理对象的value值。怎么做呢？代码如下：const p={width:30,hei...
2020-04-16 16:55:04
2238
转载 js移入移出事件被子元素触发解决办法
我们在写jquery效果时，常常会用到鼠标移入或鼠标移出的效果。但是当你的div是多层嵌套，有时就会出现你的鼠标没有移出外层的div，只是移入了内层的div，也会触发鼠标的移出事件。解决办法：使用mouseenter来代替mouseover；使用mouseleave来代替mouseout。他们的区别是：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针...
2020-04-16 14:09:21
617
转载 解决 cnpm : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。
解决方式：1、在系统中搜索框 输入 Windows PowerShell2、点击“管理员身份运行”3、输入“ set-ExecutionPolicy RemoteSigned”回车4、根据提示，输入A，回车5、再次回到cnpm -v执行成功。...
2020-04-14 22:31:49
1645
转载 git add出现 "fatal: in unpopulated submodule XXX" 错误
git add出现 “fatal: in unpopulated submodule XXX” 错误：当前处于： F:\217my_optLogs\001系统相关\系统设计\007\oschina\ydgw2407.github.io\themes下面有目录2个：hexo-theme-materylandscape因为hexo-theme-matery是从另一个第三方的仓库克隆的，在执...
2020-04-10 08:54:08
1134
原创 兼容ie8的血泪史
条件注释判断浏览器版本<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> I...
2020-04-08 15:50:49
715
原创 结合源码，谈谈v-for和v-if谁的优先级高？应该如何正确使用避免性能问题?
对应源码的位置compiler/codegen/index.js1.测试的案例代码<body> <div id="demo"> <p v-for="child in children" v-if="isFolder">{{child.title}}</p> <!-- <template v-if="isFold...
2020-04-02 12:24:24
950
原创 结合源码谈谈对vue组件化的理解
1.组件定义全局组件和单文件组件两种方式2.1 全局组件源码分析1：src\core\global-api\assets.js//是component，filter，directive三个的综合方法export function initAssetRegisters (Vue: GlobalAPI) { /** * Create asset registration me...
2020-04-02 12:23:35
563
原创 结合源码，谈谈对vue中diff算法的理解
源码分析1：必要性，lifecycle.js-mountComponent()源码分析2：执行方式，patch.js - patchVnode()源码分析3：高效性，patch.js-updateChildren()1.测试代码2.源码分析2.1必要性首先mountComponent方法是由$mount调用的。也就是任何一个vue组件的实例，在它创建完成之后，要挂载的时候去调...
2020-04-02 12:22:37
503
原创 结合源码，Vue组件data为什么必须是个函数而Vue的根实例则没有此限制
源码：src\core\instance\state.js-initData()函数每次执行都会返回全新data对象实例1.测试代码<body> <div id="demo"> <comp></comp> <comp></comp> </div> <script src=...
2020-04-02 12:21:48
262
原创 解决修改代码后，真机获取的数据逻辑没有改变的问题
引用js文件时,加个后缀就可以重新获取最新的代码了<script src=xxx.js?v=0.14"></script>如果没有加后缀或者后缀和原来一样，真机会调用缓存中的js代码，导致数据获取的方式还是和原来一样的。...
2020-04-02 12:18:26
143
原创 移动端设置固定比例的盒子，让图片铺满盒子，并设置默认图片
需求：因为后端传过来的照片比例是不固定的，所以前端得固定一个统一的比例。又因为是在移动端所以图片盒子还得适配移动端。再者因为图片比较多，所以给一个默认图片可以优化用户的体验。1.固定比例的盒子2.盒子适配移动端3.图片铺满盒子4.默认图片1.固定比例的盒子&盒子适配移动端现在需要将一个盒子的尺寸定义为固定比例，且尺寸需根据视图的尺寸来进行缩放，也就是响应式。有多种...
2020-03-19 12:39:45
1642
原创 结合源码，谈谈vue中key的作用和工作原理
对应源码的位置src\core\vdom\patch.js-updateChildren()1.测试的案例代码<body> <div id="demo"> <p v-for="item in items" :key="item">{{item}}</p> </div> <script src="../di...
2020-03-17 22:43:38
1249
1
原创 使用Vuex和导航守卫实现底部导航栏的显示和隐藏
使用Vuex和导航守卫实现底部导航栏的显示和隐藏1.需求说明要求在进入登录注册页面的时候底部导航栏不显示2.问题分析而底部导航栏是直接在App.vue根组件中使用的，登陆页也是通过路由显示在根组件上的，所以登录页没法传值直接控制底部导航栏的显示。那么我能通过什么解决了，想到了！用vuex状态管理，开工！3.解决步骤1.先用npm安装vuex2.然后在src下创建文件夹store，创...
2020-02-28 10:53:38
1229
1
转载 better-scroll滚动无效 几种原因
一、DOM层级关系<div class="wrapper"> <div class="content"> content... </div></div>wrapper里面不能存在多个同级div，如果你这样写：<div class="classifyTitle" ref="wrapper"> <di...
2020-02-10 12:32:15
842
转载 vue项目中不能使用console而只能使用window.console的解决办法
**问题：**vue项目中不能使用console而只能使用window.console.问题原因：vue脚手架创建的项目package.json中有关eslint的默认配置如下： "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:v...
2020-02-06 15:33:42
1134
转载 web测试中，如何判断是前端的bug还是后端的bug呢？
通常可以利用抓包工具来进行分析。可以从三个方面进行分析：请求接口，传参，响应。1.请求接口url是否正确如果请求的接口url错误，为前端的bug2.传参是否正确如果传参不正确，为前端的bug3.请求接口url和传参都正确，查看响应是否正确如果响应内容不正确，为后端bug4.也可以在浏览器控制台输入js代码调试进行分析如果定位为后端的bug，应该如何精确定位是哪里出了bug呢1.查...
2020-02-04 15:53:21
2718
1
原创 定义vue-html的template
1.写好模板<body> <div id="app"> <h2>{{message}}</h2> </div><script src="../node_modules/vue/dist/vue.js"></script><script> const app = ...
2020-01-27 22:26:58
373
转载 Polyfill是什么
【别人的回答】Polyfill你可以理解为“腻子”，就是装修的时候，可以把缺损的地方填充抹平。举个例子，html5的storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。我们又想使用这个特性，怎么办？有些人就写对应的Polyfill（Polyfill有很多），帮你把这些差异化抹平，不支持的变得支持了（简单来讲，写些代码判断当前浏览器有没有这个功能，没有...
2020-01-17 09:24:39
1058
1
转载 input标签type=number时怎么不要后面的上下箭头
修改样式即可<style type="text/css"> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appear...
2020-01-16 14:33:43
701
原创 bootstrap 模态框 闪退
1.问题描述：一点击触发模态框显示的按钮，页面就是重新加载一下，模态框也没有出来2.问题原因：触发显示的按钮用的是button标签（默认类型为submit），而且这个按钮是放在form表单里的，所以每次点击按钮，就提交一次post请求到后台，所以才会又一次加载页面，导致模态框闪退。3.解决方法：把button换成input，type=button就可以了...
2020-01-11 09:22:11
437
原创 Vue子组件调用父组件的方法
第一种方法是在子组件里用emit向父组件触发一个事件，父组件监听这个事件就行了。具体就是子组件触发emit向父组件触发一个事件，父组件监听这个事件就行了。具体就是子组件触发emit向父组件触发一个事件，父组件监听这个事件就行了。具体就是子组件触发emit绑定的事件：fatherMethod, 然后父组件监听fatherMethod, - 旦fatherMethod被触发，便会触发父组件的fath...
2020-01-09 15:00:54
493
2
转载 Debug：Unexpected mixed usage of different slot syntaxes
意外混用了不同的slot语法//新旧语法不能混用在一个组件标签上//slot="xxx" slot-scope="xx" 均为旧写法，是可以的//v-slot:xxx slot-scope="xxx" 新旧写法混合，直接报错//渲染错误： Unexpected mixed usage of different slot syntaxes<tag1> <...
2020-01-09 13:56:07
3942
转载 (一) 防抖和节流
1.防抖1.1 定义:指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。网上有这个比喻:函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会刷新技能,重新进行读条。四个字总结就是 延时执行1.2 应用场景:两个条件:1,如果客户连续的操作会导致频繁的事件回调(可能引起页面卡顿).2,客户只关心"最后一次"操作(也可以理解为...
2020-01-08 21:42:12
190
原创 vue中表单非空项的提交（筛掉为空项）
可以用element-ui 中为input输入框加一个clearable属性当表单域为空时，为自动触发clear方法，将该项置为null，这样表单提交的时候就不用判断表单项是不是有空项了...
2020-01-08 16:51:17
1458
原创 ‘vue'不是内部或外部的命令..
今天在命令行中输入vue，报错了，于是乎只能把之前的依赖包删除掉重新安装，所以就有了今天的小小文章。NPM全局包安装位置C:\Users\Administrator\AppData\Roaming\npm\node_modules删掉@vue的文件夹然后在命令行中输入 npm install -g @vue/cli就阔以了...
2020-01-07 14:14:16
260
原创 c#实现实时更新数据表中的每一条数据的状态
1.实现的功能因为订单只有在二维码失效后才可以取消订单，所以取消订单按钮的显示需要动态获取订单的状态来进行实时的改变。为了动态刷新数据我们使用定时器来实现2.页面中的处理1.拖入ScriptManager;2.拖入UpdatePanel3.再加入一个定时器 Timer,设置Interval为5秒(5000)4.加一个数据控件，根据需要GridView或DataList等等，连接数据...
2020-01-07 11:17:41
3806
转载 SQL Server DATEADD() 函数
SQL Server DATEADD() 函数SQL Server Date 函数定义和用法DATEADD() 函数在日期中添加或减去指定的时间间隔。语法DATEADD(datepart,number,date)date 参数是合法的日期表达式。number 是您希望添加的间隔数；对于未来的时间，此数是正数，对于过去的时间，此数是负数。datepart 参数可以是下列的值：...
2020-01-07 11:00:18
241
转载 js中判断数组是否为空的坑
在写leetcode的时候遇到的问题。 let test = []; while（test){ console.log("Aloha"); }这个时候会一直输出不会停止。因为while test相当于if(test == [])，而[]可以理解为new Array()，相当于声明了一个新的空数组，程序会自动在堆中为其开辟一块内存空间，它和之前a = []生成...
2020-01-02 14:40:50
774
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人