- 博客(64)
- 资源 (2)
- 收藏
- 关注
原创 深入剖析JavaScript中的this(下)
定义在全局作用域中的普通函数中的this指向window对象: 作为函数调用,作为内部函数调用事件处理函数中的this指向触发事件的标签元素 DOM对象绑定事件。构造函数中的this指向当前正在创建的对象(严格模式下必须使用new)作为构造函数去调用,即new的时候,指向构造函数创建的那个实例。对象方法中的this指向:在使用对象方法调用方式时,this被自然绑定到该对象。
2024-04-05 14:26:17 756 1
原创 深入剖析JavaScript中的this(上)
在Javascript中,this 关键字是一个非常重要的概念,this这个关键字可以说是很常见也用的很多,说它简单也很简单,说它难也很难。我们经常会用到this,也经常会因为this头疼,是一个经常被误解和误用的概念,为什么呢,因为有时候我们不知道this到底指的是什么?怎么用?
2024-04-03 08:00:00 825
原创 BetterScroll2.0:完美的移动端滚动组件
在日常开发中,触摸滑动成为移动应用程序中不可或缺的交互方式。为了提供流畅、自然和高效的滑动体验,许多开发者选择使用开源库来简化开发过程。其中,BetterScroll 因其强大的功能和灵活的定制能力而备受关注。本文将深入探讨 BetterScroll 的工作原理、功能特点以及如何将其应用于实际项目中。
2024-02-27 10:52:01 979
原创 绝了绝了!员工因Bug事故被强制要求归还年终奖,否则就收滞纳金且免费开除
消息一出,就引发了大量网友的关注和评论,有部分网友为位被要求退还年终奖的员工义愤填膺,也有部分网友疑惑该公司的做法是否合法合规,也有网友支招,不退不接受处罚,书面表达不满,保留邮件,更改账号密码,给总裁办、人力资源、直接主管写,留好写了的证据,按时上班打卡,然后等他开你然后去仲裁。1、编写清晰的代码:编写易于理解和维护的代码可以减少bug的数量。这可以帮助你更早地发现和修复bug,因为你可以频繁地构建和测试你的代码。这些工具可以帮助你检查代码的质量,找出潜在的问题,并提供有关如何修复它们的建议。
2024-02-27 08:00:00 381
翻译 扶我起来,我还能学!Vue3.4 发布了——更快、更强、更好用
在前端领域,Vue.js 总是以其优雅和高效的编码方式,受到开发者的青睐。前几天,Vue.js 迎来了一个重要更新——Vue 3.4 版本。这次更新不仅带来了性能上的飞跃,还引入了多项新特性,进一步优化了开发体验。在本文中,我们介绍一下 Vue 3.4 带来了哪些革新和提升!
2024-02-05 09:47:39 162
原创 详解JavaScript异步编程之Promise(二)
多个异步并行,且相互没有关联,使用Promise.allSettled();多个异步并行,相互之间有依赖,使用Promise.all();多个异步并行,最终结果根据第一个出结果(不论成功还是失败)的 promise 而定,使用Promise.race();多个异步并行,最终结果根据第一个成功的 promise 而定,使用Promise.any()。
2024-02-05 09:37:17 824
原创 Javascript事件循环模型之同步和异步
众所周知Javascript是⼀⻔单线程语⾔,这也就决定了在Javascript中默认情况下同一个时间只能做一件事情,这个特性就造成了js的一些局限性,比如我们的页面需要发送HTTP请求从服务器获取数据时,就会出现等待数据返回之前页面假死的效果。由于js在同一个时间只能做一件事,就导致了页面的渲染和事件的执行在这个过程中无法同时进行。实际上,我们在开发中并没有遇见过这种情况,这是为什么呢?为什么js是单线程的呢?
2024-01-25 11:30:25 902
原创 超详细的Javascript事件循环模型之JS运行机制
在上文《超详细的Javascript事件循环模型之同步和异步》中我们知道,JavaScript的运⾏顺序就是完全单线程的异步模型,也就是说,在同一个时间只能执行一个任务。这个任务通常是由事件循环机制控制的。当代码遇到异步操作时(如定时器、Ajax 请求等),它会将这个操作放入任务队列中,并继续执行下面的代码。当当前任务执行完毕后,事件循环会从任务队列中取出下一个任务并执行。也就是同步在前,异步在后。所有的异步任务都要等待当前的同步任务执⾏完毕之后才能执⾏。那么为什么是这样的执行顺序呢?
2024-01-25 11:30:10 938
原创 详解JavaScript异步编程之Promise
JavaScript是⼀⻔典型的异步编程脚本语⾔,在编程过程中会⼤量的出现异步代码的编写,在JS的整个发展历程中,对异步编程的处理⽅式经历了很多个时代,其中最典型也是现今使⽤最⼴泛的时代,就是Promise对象处理异步编程的时代。
2024-01-24 20:09:57 910
转载 Promise的链式调用
实际开发中,我们经常需要同时请求多个接口。比如说:在请求完接口1的数据data1之后,需要根据data1的数据,继续请求接口 2,获取data2;然后根据data2的数据,继续请求接口 3。换而言之,现在有三个网络请求,请求 2 必须依赖请求 1 的结果,请求 3 必须依赖请求 2 的结果,如果按照往常的写法,会有三层回调,会陷入“回调地狱”。这种场景其实就是接口的多层嵌套调用。有了 Promise 之后,我们可以把多层嵌套调用按照线性的方式进行书写,非常优雅。
2024-01-22 08:00:00 180
原创 Vue-Clipboard3:轻松实现复制到粘贴板功能
在现代Web开发中,剪贴板操作变得越来越重要。用户经常需要在浏览器中进行复制、粘贴等操作,而这些操作可以通过JavaScript实现。Vue-Clipboard3是一个基于Clipboard.js的粘贴板操作库,使用 Vue-Clipboard3 可以在Vue 3(composition api)中轻松复制到粘贴板,它使得在Vue3应用程序中进行粘贴板操作变得更加简单和方便。
2024-01-20 20:36:41 1515
原创 实用篇:JS工具函数,提高生产力的利器,助力高效开发(二)
在这篇文章中,我们将探讨JavaScript中的工具函数。这些函数是用来解决日常开发中常见问题的实用代码。它们可以极大地提高开发效率和代码质量。在JavaScript开发过程中,我们经常遇到一些通用的任务,比如处理数组、对象、日期、字符串等。如果每次遇到这些问题,我们都从头开始编写代码,那么开发效率会大大降低。工具函数就是用来解决这些常见问题的。它们提供了一种重用代码的方式,让我们能够更快地完成任务,同时保持代码的清晰和可维护。
2024-01-17 08:00:00 352
原创 vue3+vant+cropper.js实现移动端图片裁剪功能
cropper.js可以对指定的图片进行裁剪,可以自己选择裁剪的交互方式,如大小、纵横比等,裁剪后可以生成一个包含裁剪图的canvas对象,借助canvas的toDataURL方法可以生成一张Base64格式的图片,再通过toBlob转换成blob类型文件,再通过new File(),转换成file文件上传,当然也可以直接上传裁剪后生成的base64。还有另外一种不使用canvas的方式,利用该工具丰富的api可以拿到裁剪区域相对于原图的各项数据,使用这些数据进行css绝对定位即可展示裁剪后的图,该方式可
2024-01-14 21:35:08 1305
原创 实用篇:JS工具函数,提高生产力的利器,助力高效开发(一)
在JavaScript开发过程中,我们经常遇到一些通用的任务,比如处理数组、对象、日期、字符串等。如果每次遇到这些问题,我们都从头开始编写代码,那么开发效率会大大降低。工具函数就是用来解决这些常见问题的。它们提供了一种重用代码的方式,让我们能够更快地完成任务,同时保持代码的清晰和可维护。当然,我们我们也可以使用第三方库,比如lodash是一个非常流行的JavaScript工具库,它提供了许多实用的工具函数。
2024-01-10 08:00:00 346
原创 2023前端面试题集(含答案)之HTML+CSS篇(一)
在又到了金三银四的招聘季,不管你是刚入行的小白,亦或是混迹职场的老鸟,还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗?为了帮助你获得面试官的青睐,顺利通过面试,跳槽进入大厂,走上人生巅峰,整理了一些前端面试,希望对在面试中或学习工作中的你有所帮助!
2023-03-18 16:49:30 2803
原创 2023值得推荐的高颜值Vue3.0 Web PC端UI框架,赶紧收藏学习!
Hello,我是前端胡说,本期给大家带来2023值得推荐的Vue3.0 UI组件库,希望大家喜欢!Vue3 正式发布已经有一段时间了,2022年2月也正式变成 Vue 项目的默认版本。在过去一年多的时间里,各大组件库、框架也紧跟时代的步伐,纷纷对 Vue3 做了大量的支持和优化,从个人到公司企业也开始拥抱 Vue3.0。在这个过程中,也陆续涌现出很多优秀的开源组件库或框架,非常值得我们去学习和使用。
2023-03-18 16:40:55 13007 3
原创 JavaScript中的几种继承方式及优缺点,你知道多少呢?
JavaScript主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的。这样,子类型就可以访问父类型的所有属性和方法。原型链的问题是对象实例共享所有继承的属性和方法,因此不适合单独使用,解决这个问题是借用构造函数,即在子类型构造函数的内部调用父类型构造函数,这样就可以实现每个实例都私有的属性,同时还能保证只使用构造函数模式来定义类型。公众号:前端胡说原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢?
2023-02-22 08:00:00 444
原创 你知道Vue3中style新增了哪些特性吗?
Vue3不仅对语法进行了升级,而且还新增了一些style特性,这样在模板中可以更加灵活地使用css样式。下面本篇文章给大家总结分享一下Vue3 style的新特性,希望对大家有所帮助!Vue3新增style新特性主要有引入了变量和函数,也就是状态驱动的动态css;插槽选择器;自定义注入名称等,其主要的作用就是使css更加地灵活且模板复用性更强。下面我们就一一地介绍一下每个特性的用法。
2022-08-20 18:44:35 1778
原创 自从看了这篇文章我也明白css中的BFC了,这也太厉害了
我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context),直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。......
2022-07-16 20:10:39 212 1
原创 一文让你搞懂javascript中的构造函数、实例、原型、原型链,和它们之间的关系
一文让你搞懂javascript中的构造函数、实例、原型、原型链,和它们之间的关系
2022-07-16 19:35:19 519
原创 vue3.2 setup语法糖,你值得拥有
在vue3中删除了vue2中的data函数,因此,vue3.0要在template中使用某些变量就必须在最后return出来,多次声明变量,不太方便,也不太友好。而在vue3.2版本之后,我们只需在script标签上加上setup属性,不需要再写return就可以直接在template中使用,写起代码就很流畅。哎,这就很棒!......
2022-07-07 21:30:33 3510 5
原创 VueUse——一个提升开发效率的Vue3工具库,让你早早下班
VueUse是一个基于 Composition API 实现的基本 Vue 组合实用函数的集合。VueUse可能是受到了react-use的启发,可以看做是vue版的hook,Vue Compostion API支持了更好的逻辑分离,让这些常用的工具可以被复用,能够让你快速地构建丰富的应用,大大地提高你的开发效率在,避免自己去封装一些常用的功能函数,比如:防抖,节流,定时器等。
2022-01-16 19:39:57 10935 6
转载 element-ui日期组件默认赋值
<el-date-picker v-model="form.regDateBeg" type="date" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker>var faiSearchObj = new Vue({ el: '.fai-payRecord-search', data: { ...
2020-02-27 15:23:56 5616
原创 js取值会把数字型的字符串默认为数字,丢掉前面的0
我在后台获取到的coode的值再次传到另一个页面,此页面是用jsp写的。页面接收伪代码:var co=${coCode}这时候奇怪的事情出现了。在浏览器调试界面的结果为:var co= 0986但是alter(co)页面跳出来的值是 986,忽略了前面的 0 .第一种方法是这样的:在JSP页面定义一个隐藏的input标签,把值放进去<input type="hidde...
2019-10-14 14:35:17 1314
原创 css文字处理
前言作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。文本对齐方式CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也是非常的简单。如下:p{ ...
2019-10-11 16:11:43 367
原创 VUE中常用的十大过滤器
在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式。过滤器不能替代Vue中的methods、computed或者watch,不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用...
2019-10-10 10:07:06 861
原创 less的基本应用
一种 动态 样式 语言.LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。version 1.3.1LESS可以这样来写CSS:@base: #f938ab;.box-shadow(@style, @c) when ...
2019-06-28 15:10:41 408
原创 css之文本两端对齐
1、效果图2、实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .item .label{ width:120px; height...
2019-06-13 15:58:06 211
原创 canvas的应用
一、下载二维码(查看如何生成二维码)HTMLCanvasElement提供了toDataURL方法,该方法返回一个包含被类型参数规定图像表现格式的data URI。通过该方法我们就可以生成二维码图片并下载了。示例如下:/*html*/<div id="qrcode">div><a href="javascript:;" download="二维码" id="down...
2019-06-13 11:14:56 495
转载 vue导出页面为PDF格式
1 、我们要添加两个模块第一个.将页面html转换成图片npm install --save html2canvas 第二个.将图片生成pdfnpm install jspdf --save2、定义全局函数…创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(‘src/components/utils/htmlToPdf’)// 导出页面为PDF格式import htm...
2019-06-10 15:07:37 903 1
原创 常用css形状
1.椭圆形#oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px;}2.上、下、左、右三角 #triangle-up { width: 0; height: 0; //上三角 border-left: 50px solid transparen...
2019-06-06 16:29:13 261
原创 前端自动化工具gulp的安装与使用
一、什么是gulpgulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率,通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。二、初始化一个项目创建一个名字叫testGulp(名字随意叫)的文件夹,在命令行工具...
2019-06-05 17:32:51 343
原创 关于setTimeout和setInterval中this的指向问题
问题描述前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例:var num = 0;function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); },...
2019-05-30 18:56:15 264
原创 jquery中使用each()循环return fasle;无效的解决办法
jquery中使用each()循环return fasle;无效已经入坑两次了,这次写一下,记录下来var flag = true;$("#addDiv>div").each(function(i){ unifiedPriceArr.push({ tranType:$(this).find("input[type='hidden']").val(), calculateType...
2019-05-13 17:25:39 3410
转载 通过js获取本机的IP地址
不需要修改任何代码,直接运行就可以了function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs //compatibility for firefox and chrome var myPeerConnection = window.RTCPeerConnection || ...
2019-05-10 10:05:10 38720 12
转载 vue中router-link标签所必备了解属性
to表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。<!-- 字符串 --><router-link to="home">Home</router-link><!-- 渲染结果 --><a href="home">Home</a...
2019-05-08 10:23:38 3458
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人