- 博客(41)
- 收藏
- 关注
RSS订阅原创 一文搞懂JS中的this指向
1. `this` 是在执行时动态读取上下文决定的,而不是创建时.(在执行时,才有具体含义) 2. 不同的环境下,`this`的执行也不同,它动态指向当前函数的运行环境
2023-12-03 23:16:54
111
原创 JSX语法
JSX是一种JavaScript的语法扩展,用于描述页面,并且可以和JavaScript融合在一起,不同于Vue的模板语法,没有Vue中的一些指令(v-if,v-show,v-for),在react 中直接将 JSX 语法和 HTML 语法书写在了一起,这种写法就是JSX
2023-12-03 21:21:57
273
原创 js 打开页面的方法总结
1.window.open,2.location.hrer,3.location.repalce,4.a标签跳转,页面窗口跳转方法总结
2023-11-18 18:53:26
4813
原创 Prettier - Code formatter格式化规则文件
最近在整理vue3+ts+vite的脚手架模板(平时工作用的react),开始整理格式化代码,方便之后 vue 和 react 中应用。
2023-09-26 20:21:21
364
原创 react 中使用echarts
之前项目中图表一直使用的是 `ant design echarts` ,但是由于 `antV` 的图表不兼容 CSS `transform: 'scale' `缩放属性;项目是通过 `scale`缩放实现不同比例适配, `scale `属性会导致图表的图例等焦点位置错误;转而使用 `echarts`;
2023-09-04 22:03:27
588
原创 作用域提升
js的作用域就,js的函数产生作用的对应区域。在区域内的可以访问区域外的变量和函数，但是区域外的则不能访问区域内的变量和函数。代码执行时,会将函数提示之当前作用域最前面,提升后的函数是可以直接被使用的。当变量和函数同名时,变量优先提升,因为函数会需要变量。函数会提升到最前面,而变量会覆盖函数。
2023-07-15 11:26:14
52
原创 react-dnd实现列表拖拽排序
项目原本使用了`react-beautiful-dnd`来实现拖拽效果,由于项目中在最外层的`layout`布局中会根据屏幕的宽度和设置的适配宽度比较计算来得出` transform: 'scale`属性的值来做不同分辨率下的屏幕的兼容和适配;奈何 `react-beautiful-dnd`是根据 DOM 元素的位置和尺寸来计算的。当改变元素的缩放比例时，会改变元素的位置和尺寸，会导致拖拽操作的计算不准确,从而导致拖拽异常`拖拽的元素跑偏`.于是直接改用`react-dnd`,解决问题
2023-07-07 22:26:58
948
原创 前端的重绘和回流
浏览器在生成页面时，会解析html文件生成dom树，然后浏览器主线程会解析css并确定每个dom节点的样式（位置，大小等），在知道dom树和节点样式后，主线程根据遍历dom和计算好的样式，来生成`layout tree`渲染页面(Layout布局)，`重绘和回流都会导致layout重新计算`
2023-06-09 14:22:56
230
原创 React Router中link标签和a标签的区别
在 React Router 中，`` 组件是用来处理路由导航的，它会生成一个可以点击的链接，并根据配置的路由规则更新应用程序的 URL。而 `` 标签是 HTML 中的原生链接元素，通过 href 属性指定链接的目标 URL，点击时会直接跳转到该 URL。
2023-06-09 10:44:32
666
原创 Vue2的双向数据绑定的原理/响应式
Vue是一个MVVM框架，即数据双向绑定，Vue的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其原理是利用了ES5的Object.defineProperty()方法，实现了对数据的监听。基本原理是将数据对象data的每个属性都转化为getter/setter，通过setter来监控数据的变化，在数据发生变化时触发对应的页面元素更新。
2023-05-31 23:13:20
54
原创 React中 Props和State的区别
在 React 开发中,是需要经常与数据进行频繁交互的.React 中数据的流向是自顶向下的,单向流动的,数据主要都是存储在`State` 和`Props`中,`Props`和`State`是组件数据的表示形式
2023-05-30 22:15:11
184
原创 发布者-订阅者模式是什么
发布者-订阅者是一种一对多的关系，让多个订阅者对象同时监听一个发布者，当发布者状态改变时就会通知事件调度中心，由事件调度中心通知所有订阅自己的订阅者
2023-05-30 19:49:08
269
原创 MVVM是什么,对MVVM的理解?
MVVM是一种设计模式,作用是为了把业务逻辑和HTML分开.把每一个页面分开。其核心就是当视图或者数据变化时,VM使其相应的发生改变
2023-05-29 22:16:25
230
原创 react Hook useMemo解决antV 图表重复刷新
本文通过react useMemo对 AntV图表进行封装,解决了当 useState 更新时导致的图表刷新异常
2023-01-15 22:35:19
648
原创 获取一个月有多少天,按周返回数据
本文实现了周日历数据的实现,获取到了每月有多少周,对上月下月数据进行处理,通过dayjs实现,有需要的朋友可以借鉴使用
2023-01-15 20:35:45
228
原创 react 实现短信倒计时功能
本文分享了工作中经常用到的倒计时功能实现,在react中实现发送短信后倒计时60s,具有参考借鉴的价值,有需要的朋友可以参考一下
2023-01-14 21:09:47
635
原创 VueX总结
傻子看了都会的总结,Vuex是实现组件全局状态(数据)管理的一种机制,可以方便实现组件之间的数据共享提示以下是本篇文章正文内容，下面案例可供参考Vuex后续继续总结。
2022-07-25 22:40:23
189
原创 Vue路由守卫总结
vue-router提供的导航守卫主要用来通过跳转或者取消的方式守卫路由. 也就是路由拦截..可以通过路由守卫,来判断用户是否登录,该页面用户是否有访问该页面权限.路由守卫分为全局路由守卫,组件路由守卫,独享路由守卫......
2022-07-23 12:24:12
1722
原创 vue动态组件和keep-alive的使用
动态组件和keep-alive使用; 使用场景想要实现点击button按钮实现tab栏切换页面效果时，可以通过如下两种方式第一个是使用v-if/v-show进行判断这样过于麻烦第二个使用动态组件进行切换提示以下是本篇文章正文内容，下面案例可供参考。...
2022-07-22 08:49:23
156
原创 Vue组件传值(props属性,父到子,子到父,兄弟传值)
Vue props是什么,父传子,子传父,兄弟组件传值,Vue是数据驱动视图更新的框架,平时写业务时,都会把页面不同模块拆分成一个一个vue组件,所以对于vue来说组件间的数据通信非常重要提示以下是本篇文章正文内容，下面案例可供参考父传值子通过props实现子传父通过emit自定义事件实现兄弟传值通过eventBus实现目前暂时总结三种常用的组件传值方法httpshttpshttps。...
2022-07-21 22:02:30
9750
原创 Vue中的三种插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用`` 表示，父组件可以在这个占位符中填充任何模板代码，这些模板代码都会替换子组件的``标签。简单理解就是子组件给父组件的内容留了地方，父组件代码可以填写到子组件里面...
2022-07-18 23:03:15
953
原创 React跨组件传值
react 的跨组件传值,在项目中组件嵌套过多时,父子传值不在是最优的选择时,通过react 的 Context 实现传值给底层组件
2022-07-12 22:11:00
1309
原创 Flex弹性布局
Flex弹性布局笔记flex-direction:文本排列方向row：默认值，水平排列，从左侧开始排序row-reverse:水平排序，从右侧开始排序column:垂直排序，从上到下进行排序column-reverse:垂直排序，从下到上进行排序flex-wrap：文本是否换行排序nowrap:默认，不换行wrap：换行，进行多行排列wrap-reverse:换行，第一行在最下方align-content：多行排列时使用对齐，如果只有单行该属性不生效stretch
2022-05-19 11:51:00
1466
原创 html简单总结
理论html是网页结构的基础,一种用于创建网页的超文本标记语言标签一般分为 起始标签 和 闭合标签单标签 和 双标签页面结构文档声明为 html5 文档 <!DOCTYPE html>头部元素 <head></head> title 页面名称 meta 文档级元数据,不会显示在页面上,但是会计算机会读取 用来规定页面的描述,关键词等 元数据可用于浏览器如何显示或重新加载页面 元数据类型 如果设置了 name属性，meta
2022-05-13 22:51:49
84
原创 CSS三角形实现
CSS三角形实现<div></div>//CSSdiv{ width: 10px; height: 10px; border-top: 3px solid gainsboro; border-right: 3px solid gainsboro; transform: rotate(45deg);}![在这里插入图片描述](https://img-blog.csdnimg.cn/2ed2e2c48cbe4a27b98c8e4dc640b3e4.png
2022-01-23 22:32:11
501
原创 JavaScript字符串方法
字符串方法访问字符var str = "访问字符串";console.log(str[3]); //符查找字符串中的字符串参数：参数1：必填，要查找的文本参数2：可选，选择从特定位置开始查找如果没有找到，会返回 -1indexof() 方法返回字符串中指定文本 首次出现的位置var str = "hello javaScriopt";var hello = str.indexOf("S"); //10lastIndexOf() 方法返回指
2021-12-27 19:53:01
204
原创 JavaScript字符串大小写转换
JS大小写自动转换 var str = 'hello JAVASCRIPT' function fn(str) { let c = "" for (let i = 0; i < str.length; i++) { var ch = str.charAt(i) if (ch >= 'a' && ch <= 'z') { c += ch.toUpperCa
2021-12-27 13:14:31
1073
原创 JavaScript数组方法-高阶函数
数组方法高阶函数高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们.高阶函数是一个函数,它接收函数作为参数或者将函数作为输出返回forEach 方法 循环用法: 遍历数组,可以对每个值做一些操作参数用法:参数1:必需;当前的元素(类似于,for 循环中的 i)参数2:可选;当前遍历元素的索引值参数3:可选;当前元素所属的数组对象var arr = ['a','b','c','d']//普通写法arr.forEach(function(ele,i,
2021-12-20 00:35:48
1542
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人