- 博客(64)
- 收藏
- 关注
RSS订阅原创 JS监听页面滚动事件无效解决方案
window.addEventListener事件踩坑1、在项目中使用window.addEventListener(“scroll”, this.handleFixedTop);事件监听无效解决方案：window.addEventListener("scroll", this.handleFixedTop,true);使其在事件捕获的时候触发，该值默认为false(事件冒泡)2、const scrollT = document.documentElement.scrollTop; 获取不到s
2022-04-12 19:49:59
5833
原创 JS实现选中的tab点击后移到屏幕中间
适用场景：类目切换，实现左滑右滑，上滑下滑，点击切换不同类目，被选中的类目移动到屏幕中间位置watch: { // 监听被选中的类目标签，使被选中的标签始终在屏幕中间显示 selectedIndex: { handler: function() { // 手机屏幕的宽度 let screenWidth = document.body.clientWidth; // tabs元素 let waterfallTab =
2022-04-07 11:14:29
3797
原创 vue自适应多行文本
vue如何实现自适应多行文本解决方法：使用vue-clamp1、在项目中安装vue-clamp npm install vue-clamp --save2、全局进行引用注册import VClamp from 'vue-clamp'Vue.component('VClamp', VClamp)3、在文件中进行使用<v-clamp autoresize :max-lines="2"> 显示内容</v-clamp>...
2022-03-25 10:00:41
2514
原创 项目中常用方法的封装
项目中常用方法的封装常见组件封装// 去除给予对象中的空值export function delEmpty(params) { let _params = {}; Object.keys(params).forEach((key) => { if (params[key] || params[key] === 0 || params[key] === false) { if (params[key].length !== 0) { _params[k
2022-01-13 10:07:36
121
原创 前端vue使用ECharts如何制作精美统计图
ECharts在vue中简单实现统计图一、什么是EChartsECharts，是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图
2020-11-04 15:02:26
4395
原创 前端面试必备网络基础知识——HTTP和HTTPS
HTTP协议和HTTPS协议的区别和联系一、HTTPHTTP为超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器请求和应答的标准，用于从www服务器传输超文本到本地浏览器的传输协议，他可以使浏览器更加高效，使网络传输减少。二、HTTPSHTTPS是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就是需要SSL。HTTPS协议的主要作用：建立一个信息安全通道，来确保数据传输，确保网站的真实性。三
2020-09-21 23:20:14
289
原创 JavaScript中数组常用的方法总结
按照是否会改变原数组对数组中常用的方法进行分类对于学习前端的小伙伴们，对于数组的一些常用方法一定都很了解，就像对于我而言，数组里面的方法基本都有实战或者练习过，所以面试官问起来了解哪些数组的方法的时候，也是很自信满满，但是当面试官再次深问，哪些方法可以改变原数组，就有点犹豫了，索性今天就按是否可以改变原数组来对数组中的方法进行一个分类吧，让你面对面试官的提问可以游刃有余，当然最主要的还是自己能够真的吃透数组的所有方法，对我们未来的开发之路真的很有帮助！一、不会改变原数组join(separator)
2020-09-11 00:17:35
376
原创 前端小菜鸟带你一起学习cookie、session和Web Storage
你真的了解cookie、seesion和Web Storage嘛一、cookie和session的区别和联系cookie和session都是用来跟踪浏览器用户身份的会话方式。cookie数据存放在用户的浏览器上，session数据存放在服务器上。cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全的问题应该使用session。session会在一定时间内保存在服务器上，当访问次数增多的时候，会比较占用服务器性能，考虑到减轻服务器性能方面，应该使用cook
2020-09-10 00:10:26
135
1
原创 一篇文章带你了解什么是Token
Token的作用及原理1、什么的TokenToken是首次登陆时由服务器下发，作为客户端进行请求的一个令牌，当交互时用于身份验证的一种验证机制，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。2、Token的作用Token完全由应用程序进行管理，所以它可以避开同源策略Token可以避免CSRF（跨站请求访问）攻击Token可以是无状态的，可以在多个服务器之间共享使用Token减轻服务器的压力，减
2020-09-08 14:31:46
2443
原创 Vue.js中data为什么是一个函数
Vue.js中data的作用一、Vue.js中data为什么是一个函数Vue组件具有高度复用性，组件是可复用的Vue实例，一个组件被创建后，可能被应用到各个地方，而不管这个组件被复用了多少次，组件中的data都应该是相互隔离，互不影响的，基于这一理念，组件每被复用一次，组件中的data就应该被复制一次，这样就可以保证，当某一处被复用的组件中的data的值发生变化后，也不会影响到其它被复用组件中的data的值。二、Vue.js中data为什么要return回去不使用return包裹的数据会在项目的全
2020-09-07 15:23:27
573
原创 一篇文章带你彻底了解Vue.js如何实现数据双向绑定
Object.defineProperty中的秘密学习过Vue.js的小伙伴都知道，Vue.js的核心在于组件化开发和数据的双向绑定来实现响应式布局，而在Vue2.x中提到数据的双向绑定，就一定会想到Object.defineProperty()，下面先来介绍一下Vue.js是如何实现数据的双向绑定的吧！一、数据双向绑定的原理首先实现了一个监听器observer：对数据对象进行遍历，包括子属性对象的属性，利用**Object.defineProperty()**方法给属性都加上get()和set(
2020-09-06 19:38:55
338
原创 JavaScript实现异步编程方案总结
什么是异步编程，为什么要使用异步编程呢？1. Event Loop介绍异步编程之前，先来介绍一下事件循环（Event Loop）吧！我们都知道javascript是一门单线程语言，用来处理用户的交互，实现DOM的增删改等，一次事件循环只处理一个事件响应，使得脚本的执行相对连续，所以就有了事件队列，用来存储待执行的事件，那么事件队列中的事件是从哪里push进来的呢，这就是Event Loop的作用了，它的作用主要是将定时触发器线程，异步HTTP请求线程等满足特定条件下的回调函数push到事件队列中，等到
2020-09-05 14:41:47
229
原创 JavaScript如何进行事件绑定呢
JavaScript绑定事件的常用方式1. 直接在dom元素中绑定<button id="btn" onclick="clickBtn()">我是按钮，请点一点我吧！</button><script> function clickBtn(){ alert("点击成功"); }</script>2. 通过类名或者id名在脚本中绑定<button id="btn">我是按钮，请点一点我吧！</button&g
2020-09-03 00:02:29
861
原创 JavaScript--Null和Undefined到底有什么区别呢
Null和Undefined的区别1. null表示数字，字符串和对象是无值的，null是一个对象被人为的重置为空，而并非是一个对象最原始的一个状态当要释放一个对象的时候，可以直接将对象赋值为null即可2. undefined它是变量的一种取值，表明变量没有初始化，如果要查询对象的属性或者数组元素的值时返回undefined，则说明这个属性或者数组元素不存在，如果数组没有特定任何返回值，则返回undefined，引用没有提供实参的函数形参的值也只会得到undefined总结：变量声明了没有赋值
2020-09-02 23:13:37
165
原创 JavaScript如何实现浅拷贝和深拷贝呢
JavaScript实现深浅拷贝1. 浅拷贝生成一个新的指针，但依旧指向原来的地址，简单的来说，B复制A，A发生改变了，B也跟着发生改变实现浅拷贝的方式自定义函数function shallowCopy(obj){ let newObj = {}; for(let item in obj){ if(obj.hasOwnPrototype(item)){ newObj[item] = obj[item]; } } return n
2020-08-30 22:16:46
281
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人