![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端技术文章
文章平均质量分 63
千锋HTML5大前端
让优秀的教育资源不再孤芳自赏,与你共享。
展开
-
效率利器之事件委托
例如,如果需要在不同阶层的元素上绑定不同的事件处理程序,或者需要对事件进行捕获阶段的处理,事件委托可能无法满足需求。● 动态添加元素支持:对于后续动态添加的子元素,无需单独为它们添加事件处理程序,因为事件委托是基于父元素的,新添加的元素也会受到委托的处理。● 内存和性能优化:事件委托利用事件冒泡的特性,将事件处理放在父元素上,避免了在每个子元素上都绑定事件,从而节省内存和提高性能。只能自己再注册一次。事件委托是建立在事件冒泡机制之上的,冒泡是指事件从触发事件的元素开始,逐级向上触发所有上级元素的过程。原创 2023-08-08 09:58:30 · 155 阅读 · 0 评论 -
JavaScript字符串常用方法
●语法: substring(从哪个索引开始,到哪个索引截止),包含开始索引,不包含结束索引。●作用:charAt() 是找到字符串中指定索引位置的内容返回。●语法:字符串.repalce(被替换的内容,要替换的内容)●语法:字符串.indexOf(要查找的字符,开始索引)●语法:字符串.indexOf(要查找的字符,开始索引)○(' ') 字符串中有空格 会按照原字符串中的空格切割。●字符串和数组有一个一样的地方,也是按照索引来排列的。○包含开始的索引对应的内容,不包含结束索引对应的内容。原创 2023-05-17 16:01:14 · 322 阅读 · 0 评论 -
怎么修改element ui动态组件的样式
介绍两种方式修改elementUI组件的样式原创 2023-04-11 13:12:08 · 1204 阅读 · 0 评论 -
响应式布局是什么?如何实现响应式布局
响应式布局是一种布局方式,它可以根据不同设备的屏幕大小和分辨率自适应调整布局,从而使网页在不同设备上都能够正常显示。本文详细说明了实现响应式布局的步骤原创 2023-04-07 14:18:26 · 660 阅读 · 0 评论 -
float的表示范围为什么比long大
一个用来表示小数的 float 为什么表示的范围会比 long 还要大呢 ?这次, 咱们就来详细说一说这个事情原创 2023-03-06 12:08:21 · 523 阅读 · 0 评论 -
vue 常用哪些命令
vue 常用哪些命令原创 2023-01-03 14:57:09 · 114 阅读 · 0 评论 -
前端面试题【element ui篇】之二:怎么修改element ui动态组件的样式?
但这种方式为全局样式,会影响页面中所有复选框,如果不希望影响其它页面的样式,可以采用第二中方式。要修改elementUI组件的样式,可以采用以下两种方式。如果是sass或less编写的样式,还可以使用。所以elementUI中的样式就能成功覆盖。解决方案也很简单,只需在选择器中要添加。原创 2022-12-28 11:30:31 · 738 阅读 · 0 评论 -
前端面试题【element ui篇】之一:说一下element ui遇到过的坑
【代码】前端面试题【element ui篇】之一:说一下element ui遇到过的坑。原创 2022-12-28 11:27:02 · 323 阅读 · 0 评论 -
前端面试题:网络攻击方案有哪些,自己有写过什么安全性方面的东西吗?
网络攻击方案有哪些,自己有写过什么安全性方面的东西吗?原创 2022-12-13 16:26:05 · 246 阅读 · 0 评论 -
vue项目怎么进行seo的优化白屏太久怎么处理?
而采用Vue的方式开发的应用,其数据都是来源于axios或者其它的ajax方法获取的数据!也就是说,想要友好的支持搜索引擎,就必须采用服务器端渲染的相关技术,比如JSP,就是一个典型的服务器端渲染技术,用户请求一个地址然后展示到浏览器中的数据都是服务器端处理好的,浏览器只管展示;又比如静态页面,所有页面都是预先编写或生成好的,浏览器将请求拿到的数据直接展现即可。搜索引擎无法进行索引的核心原因就是,其在爬取网站数据的时候,是不会执行其中包含的JS过程的;原创 2022-12-13 16:24:08 · 102 阅读 · 0 评论 -
Vue的性能优化有哪些方法?
(2)如果是大数据长列表,可采用虚拟滚动,只渲染少部分区域的内容,参考vue-virtual-scroller、vue-virtual-scroll-list。(1)如果列表是纯粹的数据展示,不会有任何改变,就不需要做响应话, 使用object.freeze(data)4、v-for遍历避免同时使用v-if (使用computed属性过滤需要显示的数据项 )vue组件销毁时,会自动解绑它的全部指令及事件监听,但是仅限于组件本身的限制。像element-ui这样的第三方组件库可以按需引入避免体积太大。原创 2022-12-15 10:07:34 · 1598 阅读 · 0 评论 -
高效“背诵”面试题的三定法则
工作中我常用的有 created、mounted、beforeDestroy 这三个,created里我常用来触发调api 接口,mounted 中我常用来执行 DOM 更新后的相关逻辑操作,比如开启定时器等,beforeDestroy 中,我常用来清除定时器、清除Vuex中缓存等。“不挖坑原则”是避免提到自己陌生的领域,而“擅引导原则”是鼓励你多提自己熟悉的领域、多提自己做过功课的领域,通过语言强调等技巧,把面试过程向有利于自己的方向引导。因此,在你“背诵”面试题的第一步,你首先要搞清楚的就是题目类型。原创 2022-12-13 16:19:28 · 202 阅读 · 0 评论 -
前端面试题:谈一谈vue和react的区别?
(1)从编程范式的角度讲。(2)从组件通信的角度讲。(3)从底层原理的角度讲。原创 2022-12-13 16:13:35 · 792 阅读 · 0 评论 -
Web前端面试真题(算法篇):005篇
股票最大利润假设有一个数组, 它的第i个元素对应第i天的价格最多只允许完成一次交易(买进一次,卖出一次)设计一个算法找出最大利润例如: [7,1,5,3,6,4] 最大利润 5如果这个计算方法你不是非常能理解, 我们再来换一个简单一点的思路这个思路虽然简单, 但浪费了很多计算次数优化改良之后, 就是开头的版本了原创 2022-12-07 15:06:10 · 270 阅读 · 0 评论 -
Web前端面试真题(算法篇):004篇
输出字符串中, 所有的叠词(几个连续出现的字符)输入: 晴川历历汉阳树, 芳草萋萋鹦鹉洲输出: [‘历历’, ‘萋萋’]当然, 用正则会非常简单.解释:\1 这是对第一个分组内容的引用.\1等价于对前面分组内容的复制因此 (.)\1 表示这个字符至少重复出现2次(.)\1+就表示重复出现2次及以上了原创 2022-12-07 15:04:09 · 119 阅读 · 0 评论 -
Web前端面试真题(算法篇):003篇
貌似一看很简单仔细一看很复杂来回一琢磨还是很简单这道题最关键的, 就是这句话了你首先需要了解一个运算符优先级的问题在所有的运算符当中, 除了 () 小括号级别最高的 就是属性访问了, 也就是 . 小圆点那么在整个这句话当中, 最先执行的, 应该是 a.x可以理解为 x = a = {n:2}或者b.x = a = {n:2}因此最终, b等于原创 2022-12-07 15:02:39 · 74 阅读 · 0 评论 -
Web前端面试真题(算法篇):002篇
解析:用一张图理清关系原创 2022-12-07 15:01:10 · 149 阅读 · 0 评论 -
async 的原理
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是什么?一句话,它就是 Generator 函数的语法糖。研究 async 的原理,就必须先弄清楚 Generator 是个啥。Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。形式上,Generator 函数是一个普通函数,但是有两个特征。一是,关键字与函数名之间有一个星号;二是,函数体内部使用表达式,定义不同的内部状态(在英语里的意思就是“产出”)看一个例子:上面代码中,调用原创 2022-12-07 14:53:59 · 293 阅读 · 0 评论 -
用户打开你的页面,一片空白,什么都不显示,原因可能是什么呢?
在用户端会默认缓存 index.html 入口文件,而由于构建工具(比如Webpack,rollup等)在每次代码更新后,打包生成的css/js文件名都带有哈希值,跟上次的文件名都不同,因此会出现找不到 css/js 文件的情况,导致白屏的产生。常用框架,比如 Vue React Angular 都是依靠JS进行驱动的,在渲染页面的时候需要加载很大的JS文件,在JS解析加载完成之前无法展示页面,从而导致了白屏。第一个打开的页面,如果请求一个缓慢的后端接口,引发JS阻塞,导致页面白屏。● 前端JS代码问题。原创 2022-11-29 18:27:07 · 2799 阅读 · 0 评论 -
在浏览商品时,点击商品详情,然后返回,要求列表刷新,同时滚动条还在之前的位置,怎么实现?
(1) 实现页面跳转回退保持原位置。(2) 实现页面回退之后重新加载。原创 2022-11-29 18:24:59 · 1060 阅读 · 2 评论 -
实现一个函数 isSimilar,对比两个字符串是否相似
实现一个函数 isSimilar,对比两个字符串是否相似,相似返回 true,不相似返回 false。相似的定义是:字符串包含的字符种类以及每种字符的个数均相等。● 最后通过 comparsion 函数,比较两个字符串中相同字符的个数是否相等。● 否则定义 conversion 函数,统计两个字符串中字符的个数。● 定义 isSimilar 函数,接收两个待比较的字符串参数。● 如果传入的参数类型不是字符串返回 false。● 如果两个字符串完全相等则返回 true。原创 2022-11-29 18:19:55 · 321 阅读 · 0 评论 -
表格分组标签:表格行分组中的隐藏功能
在使用表格组开发的时候,如果不对表格行进行分组的话,那么默认都属于 tbody 中,如果想要查找表格内部的单元格(td)则不能直接使用table>tr>td去查找,因为浏览器中默认会为表格进行分组:如下图:默认表格结构中没有分组标签的使用,但是在浏览器中浏览器会自动添加tbody进行分组;当您创建某个表格时,需要数据进行分区进行显示的时候,我们可以使用行分组标签。实际开发过程中,有些表格数据在浏览器中需要我们直接进行打印,但是打印的时候我们需要每一页上面均有表头,这就需要我们使用表格的分组标签来实现了。原创 2022-11-22 17:04:20 · 1033 阅读 · 0 评论 -
JS 的新一代日期/时间 API Temporal
众所周知,JS的Date是出了名的难用,一直以来我们都在使用momentjs,dayjs等第三方库来处理日期和时间格式,于是 TC39 组织开始了对 Date 的升级改造,他们找到了 moment.js 库的作者,Maggie ,由她来担任新特性 Temporal的主力设计。Temporal是一个全局对象,像 Math 、Promise 一样位于顶级命名空间中,为 Javascript 语言带来了现代化的日期、时间接口。原创 2022-11-22 16:56:35 · 562 阅读 · 0 评论 -
面试题之数组的去重方式
平时我们在做开发或者面试的过程中,经常会碰到这样的问题:给我们一组重复的数据,要求把重复的数据去掉,如果是你,你会用哪些方式来去重呢?接下来我们就一起来看看去重的方式吧。原创 2022-11-22 16:29:51 · 518 阅读 · 0 评论 -
JavaScript常见几种循环遍历的使用及区别
在javascript语言中经常需要使用循环语法去获取数据中的一些值,例如,我们需要将列表中的商品逐个输出,或者运行相同的代码将数字 1 到 10 逐个输出。方法也比较多,该篇将讲解常见的循环遍历的使用及区别。原创 2022-11-22 16:18:03 · 146 阅读 · 0 评论 -
没有弹性盒,如何玩转移动端?
一说到移动端布局,大部分同学会想到用rem,不错rem确实可以解决各种问题,哪怕宽度你都写固定值都没有问题,但是宽度的适配使用大量的数值,是不是算起来有点头疼呢?还有一部分同学会大面积使用弹性盒,宽度的适配用弹性盒真的是太香了,可是弹性盒它并不能兼容所有的设备,那没有弹性盒是不是就没有办法了呢?其实并不是的,我这里提供几个常用布局方式,就算是没有弹性盒,也可以轻松玩转移动端!原创 2022-11-22 16:15:38 · 218 阅读 · 0 评论 -
教你vue-router命令视图应该怎么玩
在VUE实战项目开发中,为了减少代码冗余,便于后期维护,我们经常会把相同布局的代码封装为公共组件,例如移动开发中NavBar导航栏、Tabbar标签栏等公共组件,需要使用时导入、注册、调用即可,但是相对NavBar导航栏、Tabbar标签栏几乎每个页面都需要使用的公共组件每次导入注册较为麻烦,有没有更好的解决方案呢,接下来通过本篇文章来解答各位小伙伴疑惑。在vue库学习中我们利用 Vue.component 来定义公共组件、在vuecli中我们利用 .vue 文件 ,这里我们按照的是路由简写定义公共组件。原创 2022-11-16 16:53:23 · 653 阅读 · 0 评论 -
吗咿呀嘿-用js来搞个简单的人脸识别
我们今天要在浏览器环境下面实现一个简单的人脸识别,我们会用到Tracking.js ,这是一个独立的JavaScript库,用于跟踪从相机或者图片实时收到的数据。跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来触发JavaScript 事件。如果东西能被普通人随便使用,那么我们的表情甚至动作都能被别人模拟出来,只要他有一张你的照片!接下来我们只要需要把得到的结果标记到图片的对应的位置即可,通过plot函数创建一个div,给定对应的坐标和宽高。原创 2022-11-16 16:50:07 · 1030 阅读 · 0 评论 -
如何在React项目中使用ECharts图表库
如果在原生的JS应用或者jQuery项目中,我们常用的方式就是直接去官网下载其核心js文件并导入我们的项目中使用,但是在React项目中,我们大可不必,由于React项目开发基于webpack做了二次封装,而webpack又是基于 Node.js的前端项目部署打包工具,总而言之,React项目开发是在nodejs环境基础上,所以可以直接利用npm包管理器将第三方工具模块下载加入到项目中,并通过import引入对应的模块到相关页面中使用,不需要关心其中的细节。1、通过极坐标双数值轴绘制爱心。原创 2022-11-16 16:44:59 · 9544 阅读 · 0 评论 -
元素居中大合集
其实inline-block元素的居中等同于图片的居中,如果你需要让一个inline-block居中,那么图片的居中方法都适用。关于居中这个话题一直是面试官最喜欢问的问题,今天呢我就给大家总结一下关于文本、图片与盒子的一系列居中问题。因为图片属于内联-块元素,所以text-align:center;给装文本的盒子添加text-align:center;想实现多行文本垂直居中需要对元素本身的类型进行转换。以上方法适用于所有内联元素的水平居中。给装文本的盒子设置行高等于高度。1)利用行高等于高度的原理。原创 2022-11-16 16:39:11 · 312 阅读 · 0 评论 -
用vue实现一个仿简书的轮播图效果
scripts部分,设置一个nowIndex,定时改变nowIndex。写好css样式,只需改变每张图片的class即可实现轮播效果。vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果。原创 2022-11-16 16:33:48 · 168 阅读 · 0 评论 -
一场由SameSite字段引发的悲剧
由于后台是用session存储用户的登录状态的,所以如果这里少了cookie信息的话,由于http本身是无状态的,导致不知道是哪个用户登录了,这里就报了ERROR_SESSION这样的错误,苦思冥想之后,各种搜索,突然发现了一点线索,就是这个 SameSite字段搞得怪。早上起来的时候,有学生说后台的更新功能失效了,赶紧打开了一下管理后台,然后试了一下里面的更新功能,突然间发现后台报了一个错误,如下所示,一时间手足顿挫,开始怀疑人生。后来排查了一下,发现这次请求确实没有发cookie信息到后台,原创 2022-11-16 16:31:23 · 404 阅读 · 0 评论 -
必争武林秘籍-Vue生命周期流程图
3.接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,这是在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始化数据的获取。2.挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里同步更改数据不会触发updated函数,一般可以在这里做初始数据的获取。原创 2022-11-07 16:28:24 · 197 阅读 · 0 评论 -
背景透明,文字不透明的兼容处理
针对IE6、7、8浏览器,我们可以使用fiter滤镜,针对标准浏览器我们使用rgba,那么问题来了,IE9浏览器2个属性都支持,一起使用会重复降低不透明度,那么,如何只对IE6、7、8使用fiter:Alpha如何实现呢?我们可以通过CssHack,设置有IE的相关hack,找到只支持IE 6、7、8的方案的方法,opacity适用情况:设置opacity的元素,不光设置的元素透明,后代元素也会继承opacity,一起也有透明效果,所以opacity一般用于调整个别图片,或者部分模块的的透明度。原创 2022-11-07 16:25:17 · 1140 阅读 · 0 评论 -
被玩坏的数组排序之sort函数
用于数组排序规则的比较函数。如果不含有该参数,数组元素按照转换字符串的各个字符的Unicode编码顺序进行排序。ECMAScript 为数组提供了一个原生的sort函数,今天我们就来好好看看你对sort函数究竟了解多少。如果添加了 compareFunction 那么数组会按该函数的返回值结果进行排序。JavaScript 的数组排序是一个非常常见业务场景。好了,看完升序和降序排列以后我们来聊聊排序的规则。排序后的数组,返回的是当前数组。我们先来看看各种排序的应用方式。我们再来看看特别的排序方式。原创 2022-11-07 16:19:33 · 241 阅读 · 0 评论 -
transition过渡动画的自述
最后再次提醒,你想要用我做过渡动画,一定要结合事件触发哦,最常用的方式就是鼠标的hover。这里就是应用过渡动画实现的效果,多个属性是依次执行动画效果的,其实就是巧妙应用了过渡延迟属性,让上一个属性执行完了再接着下面一个,是不是很有趣鸭。我是transition,经常有小伙伴把我和隔壁animation搞混,下面我就好好的介绍一下自己,让大家能明白我到底是干啥的。今天给大家介绍了我transition过渡动画,相信大家都知道我是干啥工作的了,下次再给大家介绍我隔壁的animation拜拜。原创 2022-11-07 16:14:21 · 1192 阅读 · 0 评论 -
ES6中static关键字使用
伴随着ES6的发布,javascript中正式的引入了class(类),让js中的面向对象更加的规范标准,同时给想跨语言发展的前端同学们提供了更高的台阶,因为,后端语言的OOP也是class,语法基本一致呀!敲黑板了,凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用,不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的.想必各位前端的小伙伴们都知道,一般来书在class中只有属性和方法.都可以被实例化的对象进行调用,比如这样的.拿出你的小马扎,和笔记本开始了…原创 2022-11-07 16:06:57 · 332 阅读 · 0 评论 -
如何在JavaScript中循环遍历JSON响应?
(画外音:JSON之父叫做Douglas Crockford,尽管他在社区里不算那么讨喜,不过也无法否认他对JavaScript所作的贡献,著名的开源项目JSlint也是他写的,他还有出版一本书叫How JavaScript Works,中文译名《JavaScript语言精粹》)从远程服务器获取数据时,服务器的响应通常为JSON格式。从Web服务器接收数据时,数据始终是字符串,这意味着将其转换为可以使用的数据结构是必要工作,如果您想了解有关JSON如何工作的更多信息,可以访问JSON网站。原创 2022-11-01 16:34:11 · 1060 阅读 · 0 评论 -
一首歌带你搞懂Promise
async函数的返回值也是一个Promise实例,在async函数执行的过程中,一旦遇到await就会先返回pending(进行中)状态的Promise实例,等待异步操作有结果之后,继续执行await之后的语句,依次类推,语句全部执行完毕且无错误的情况下,则返回的Promise实例会变为已成功,否则会变为已失败。可以理解为 then()方法中的两个回调函数,提前规定好了状态改变时需要执行的内容,等待以后Promise实例的状态之后再执行对应的回调函数 (本质还是回调函数,要用魔法打败魔法)。原创 2022-11-01 16:23:55 · 126 阅读 · 0 评论 -
做了这么多的请求和响应,你知道都干了些啥吗?
S-----》B:响应时,S端也要告诉B端 我给你发的是什么,发的什么类型,什么时间,服务器用的什么软件,响应的状态码,协议的版本等等(这就是我下一个主题要说的响应报文)。B-----》S: 发送请求时,B端需要给S端说清楚我发的是什么,我用什么发的,发的方式是什么,你给我响应时,需要响应啥类型等等(这就是我下一个主题要说的请求报文)。比如:什么类型的礼物,礼物用的什么包装盒,礼物有多重,这个礼物是从哪个店里买的,这个礼物是通过什么交通工具(步行,骑自行车,开车还是?是S端发给B端的信息,道理是一样的。原创 2022-11-01 16:08:33 · 228 阅读 · 0 评论