前端
文章平均质量分 84
记录自己在前端学习过程的一些知识总结,望与诸君共勉。
若年封尘
这个作者很懒,什么都没留下…
展开
-
2023前端大厂高频面试题之JavaScript篇(5)
typescript和javascript有什么区别模板字符串扩展运算符Object.assign基于发布订阅模式的js事件处理中心EventEmitter类中的constructorjs不引入第三个变量的情况下交换a、b的值console.log输出空值合并操作符(??)及可选链式操作符(?.)ES6 中常见的语法特性原创 2023-11-20 15:43:16 · 322 阅读 · 2 评论 -
2023前端大厂高频面试题之CSS篇(2)
页面导入样式表时,和@import的区别伪类和伪元素三栏布局,左右两栏固定,中间自适应两栏布局,左边固定,右边自适应清除浮动CSS的相对单位CSS外边距重叠CSS常用单位原创 2023-11-16 17:48:57 · 591 阅读 · 1 评论 -
2022大厂高频面试题之HTML篇
DOCTYPE、严格模式/混杂模式块级标签和行内标签H5新特性Web语义化src和href的区别display:none与visibility:hidden的区别重绘和重排什么时候触发重排和重绘减少重绘和重排原创 2023-11-02 23:40:06 · 3213 阅读 · 2 评论 -
2023大厂高频面试题之Vue篇(3)
说说你对 SPA 单页面的理解,它的优缺点分别是什么?数据请求在created和mounted的区别Vue中给对象添加新属性页面不刷新?怎样解决?前端路由Vue Router两种路由模式如何检测 URL 变化了?Vue组件之间的通信方式Vuex与localStorage原创 2023-10-28 12:25:19 · 2170 阅读 · 0 评论 -
如何成为开源组件库NutUI的contributor:解决issue并提交PR
NutUI是一套京东风格的轻量级移动端组件库。自诞生以来,一直在紧跟技术的发展不断推陈出新,始终保持稳健的发展态势,从一个单一的基础组件库发展到如今服务于数千开发者的多端 UI 组件库。NutUI 的成长离不开团队成员的努力,更离不开广大社区开发者的反馈和共建。因此本文就以一个新人视角来完成一次issue的解决以及PR的提交,成为NutUI的共建者,为开源社区共享自己的一份力量!庞大的开源社区一定有很多值得去学习的东西,开源本身是一场历练和修行。原创 2023-10-22 11:52:18 · 327 阅读 · 1 评论 -
详细介绍Webpack5中的Plugin
webpack在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。站在代码逻辑的角度就是:webpack在编译代码过程中,会触发一系列 Tapable钩子事件,插件所做的就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样当webpack构建的时候,插件注册的事件就会随着钩子的触发而执行了。开发插件,离不开这些钩子。插件Plugin可以扩展webpack,加入自定义的构建行为,使 webpack 可以执行更广泛的任务,拥有更强的构建能力。原创 2023-07-31 19:18:01 · 1101 阅读 · 4 评论 -
详细介绍Webpack5中的Loader
用来清理 js 代码中的console.log// 将console.log替换为空 return content . replace(/ console\.log\(.*\);?/ g , "");原创 2023-07-27 10:15:51 · 993 阅读 · 1 评论 -
万字长文详解Webpack5高级优化
使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快。使用 OneOf 让资源文件一旦被某个 loader 处理了,就不会继续遍历了,打包速度更快。使用 Include/Exclude 排除或只检测某些文件,处理的文件更少,速度更快。使用 Cache 对 eslint 和 babel 处理的结果进行缓存,让第二次打包速度更快。原创 2023-07-26 09:45:36 · 1365 阅读 · 0 评论 -
详细总结Webpack5的配置和使用
webpack是一种前端静态资源打包工具。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以在浏览器段运行了。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。原创 2023-07-23 00:46:46 · 2207 阅读 · 1 评论 -
2023前端大厂高频面试题之项目篇
注册登录如何减少前端页面的首屏加载时间?图片懒加载网站性能优化项目启动后白屏,怎么解决?怎么查?说一下你在前端项目中遇到印象深刻的项目场景,并且怎么解决的?前端工程化小程序体积压缩前端单元测试在做完前端项目之后,一般都会写哪些文档,readme里面写一些什么?项目难点微信小程序聊天功能微信小程序第三方授权(点击登录弹出微信授权)小程序页面加载速度优化小程序响应式设计原创 2023-05-02 11:58:37 · 1192 阅读 · 1 评论 -
2023前端大厂高频面试题之浏览器篇
从一个url地址到页面完成渲染,发生了什么?有了IP地址怎么找到指定的服务器(ARP协议)前端攻击有哪些,抵御前端攻击的方式有哪些网络劫持有哪些,怎么防范Cookie、sessionStorage、localStorage 的区别浏览器内核有哪些同源策略如何解决跨越问题强缓存和协商缓存浏览器标签页用进程还是线程来实现?如何实现浏览器内多个标签页之间的通信?原创 2023-04-26 14:39:43 · 432 阅读 · 1 评论 -
2023大厂高频面试题之Vue篇(2)
虚拟DOM的理解vue 和 react 里的key的作用是什么? 为什么不能用Index?用了会怎样? 如果不加key会怎样?为何Vue采用异步渲染Vue.nextTick()组件中的 data为什么是一个函数为什么new Vue这个里面的data可以放一个对象?vue如何检测数组变化ajax请求放在哪个生命周期中Vue父子组件生命周期调用顺序Vue组件为什么只能有一个根元素?vue 的keep-alive的作用是什么?怎么实现的?如何刷新的?何时需要使用beforeDestroy原创 2023-04-25 09:55:44 · 448 阅读 · 0 评论 -
Vue报错解决[Vue warn]: Error in render: “TypeError: Cannot read property ‘state‘ of undefined“
这个错误提示通常出现在 Vue 组件中,它尝试读取 Vuex store 的 state 对象,但是该对象没有被定义。这假设 store.js 文件位于 src/store 目录中。如果store.js 文件位于其他目录中,请相应地更改导入路径。如果 Vuex store 中没有定义尝试使用的状态,则会出现这个错误。反复确认代码后,发现并没有上述问题。这里的 myState 是Vuex store 中定义的状态名称。如果组件中使用其他名称,请相应地更改代码。3.Vuex store 中没有定义所需的状态。原创 2023-04-24 19:31:12 · 3692 阅读 · 0 评论 -
2023前端大厂面试题之JavaScript篇(4)
严格模式use strictJavaScript this 关键字call、apply和bindmap 和 weakMap 的区别js 延迟加载的方式js的模块化规范JavaScript多态JavaScript中常见设计模式冒泡和捕获JS 单线程的好处路由懒加载js 垃圾回收机制js释放变量内存哪些操作会造成内存泄漏原创 2023-04-06 13:40:49 · 386 阅读 · 0 评论 -
详细介绍React路由
单页Web应用(single page web application,SPA),整个应用只有一个完整的页面,点击页面中的链接不会刷新页面,只会做页面的局部更新。当有多个path相同的情况,不用Switch包的话匹配到home时,第一个匹配了还会往下继续匹配,第二个也会匹配,从而两个都展示,包住后匹配到第一个后就不往下匹配了,从而只显示第一个。1.默认使用的是模糊匹配(输入的路径to必须包含要匹配的路径paath,且顺序要一致)。3.严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由。原创 2023-04-05 22:12:03 · 1564 阅读 · 0 评论 -
React脚手架
项目的整体技术架构为: react + webpack + es6 + eslint,使用脚手架开发的项目的特点: 模块化, 组件化, 工程化。第二步,切换到想创项目的目录,使用命令:create-react-app project_name。(2)【子组件】给【父组件】传递数据:通过props传递,要求父提前给子传递一个函数。——某个组件使用:放在其自身的state中。原创 2023-04-04 12:36:53 · 2139 阅读 · 1 评论 -
详细介绍React生命周期和diffing算法
在定义组件时,会在特定的生命周期回调函数中,做特定的工作。React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —— 为了更好的兼容性;React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ——为了的高效。函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。(2).若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。原创 2023-02-22 23:07:24 · 359 阅读 · 0 评论 -
React组件的用法和理解
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合);组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)。React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的。每个组件对象都会有props(properties的简写)属性;通过标签属性从组件外向组件内传递变化的数据;注意: 组件内部不要修改props数据(只读的)。组件内的标签可以定义ref属性来标识自己。1.字符串形式的ref。原创 2023-02-16 21:15:13 · 471 阅读 · 0 评论 -
React中JSX的用法和理解
使用DOM+diff算法,最大限度地减少与DOM的交互。2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。2.如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的。1.类中的构造器不是必须要写的,要对实例进行一些初始化的操作,如添加指定属性时才写。3.类中所定义的方法,都放在了类的原型对象上,供实例去使用。原创 2023-02-12 22:08:31 · 744 阅读 · 0 评论 -
学习jQuery这一篇就够了
jQuery是对原生JavaScript的封装,是一个轻量级的"写的少,做的多"的 JavaScript 库。封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。它的出现加快了前端人员的开发速度,我们可以很方便的调用和使用它,从而提高开发效率。原创 2022-10-23 22:46:05 · 1136 阅读 · 1 评论 -
万字长文详解ES6,学ES6这一篇就够了
上面代码中,source对象的foo属性的值是一个赋值函数,Object.assign方法将这个属性拷贝给target1对象,结果该属性的值变成了undefined。而箭头函数没有自己的this对象,this始终指向定义时上层作用域中的this,由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。原创 2022-10-17 19:06:32 · 1896 阅读 · 0 评论 -
移动端基础知识
当我们手指离开屏幕的时候,就没有了 touches 和 targetTouches 列表,但是会有 changedTouches。2.封装touch事件:当我们手指触摸屏幕,记录当前触摸时间;当我们手指离开屏幕, 用离开的时间减去触摸的时间;TouchEvent 是一类描述手指在触摸平面的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少……:正在触摸当前DOM元素的手指列表,如果侦听的是一个DOM元素,他们两个是一样的;:正在触摸屏幕的所有手指的列表;原创 2022-09-11 15:22:07 · 300 阅读 · 1 评论 -
JavaScript-BOM基础巩固
元素偏移量offsetofferTop和offerLeft以带有定位的父亲为准,如果没有父亲或者父亲没有定位则以body为准;宽度和高度是包含padding、boder和width的。原创 2022-09-11 15:17:04 · 186 阅读 · 1 评论 -
2023大厂高频面试题之Vue篇
Vue的优点及缺点react框架是mvvm框架还是mvc框架谈谈对MVVM原理的理解Vue响应式数据的原理Vue 双向数据绑定原理computed、watch和methodsVue的生命周期Vue父子组件生命周期Vue的created中如何获取到dom元素v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?Vue中的diff算法为什么引入diffVue能不能在编译时构建而不是运行时使用虚原创 2022-06-24 20:34:14 · 839 阅读 · 1 评论 -
2023大厂高频面试题之CSS篇
css的position属性取值css选择器优先级和权重box-sizing属性CSS 盒子模型CSS实现三角形CSS布局弹性布局display:flex实现一个垂直水平居中隐藏页面元素的方法style-componentsHTML脱离文档流的方法block,inline和inlinke-blocktransition与animation区别...原创 2022-05-18 21:42:57 · 1734 阅读 · 2 评论 -
ECharts的高级使用
ECharts主题的使用一、内置主题的使用init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表需要使用的一套主题默认内置了两套主题 , light darkvar mCharts = echarts.init(document.querySelector("div"), 'dark')二、自定义主题的使用步骤:1.在线编辑主题 https://www.echartsjs.com/theme-builder/2.下载主题的js文件3.在html中导入js文件原创 2022-04-04 21:43:30 · 2763 阅读 · 1 评论 -
数据可视化ECharts的常用图表,看完就会用(2)
ECharts七大常用图表:柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图本文主要介绍后四个图表,文章目录四、饼图五、地图六、雷达图四、饼图饼图的数据是由name和value组成的字典所形成的数组;饼图无须配置xAxis和yAxis。特点:饼图可以很好地帮助用户快速了解不同分类的数据的占比情况。var pieData = [ { name: '淘宝', value: 11231 }, { name: '京东', value: 22673 },原创 2022-03-31 12:53:04 · 7437 阅读 · 0 评论 -
数据可视化ECharts的七大常用图表,看完就会用(1)
数据可视化什么是数据可视化?数据可视化, 说白了, 就是把数据以更加直观的方式进行呈现。那什么方式是更加直观的方式呢? 就是图表。常言道, 文不如表, 表不如图, 人们大脑对图的敏感程度要比苍白无力的文字好很多。通过图表可以很清楚的看到各项数据之间的关系:(下图是Echarts官网的一个例子)数据可视化的好处更直观的展示信息清晰有效地传达与沟通信息更容易洞察隐藏在数据中的信息数据可视化的实现方式ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库,兼容性强,底原创 2022-03-31 08:00:00 · 8237 阅读 · 0 评论 -
2023前端大厂面试题之JavaScript篇(1)
js中的同步和异步异步编程的实现方式回调地狱JavaScript this 关键字JavaScript中基本数据类型和引用数据类型的区别原型原型链原型链面试题原型继承防抖和节流宏任务与微任务宏任务与微任务面试题......原创 2022-03-05 21:17:18 · 5877 阅读 · 3 评论 -
async与await的用法和理解
文章目录async 函数await 表达式async 与 await结合读取文件async与await结合发送AJAX请求async 函数async函数的返回值为promise对象promise对象的结果由async函数执行的返回值决定和then()的返回规则一样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor原创 2021-09-24 19:39:46 · 361 阅读 · 0 评论 -
从零开始,手写实现Promise
文章目录Promise的基本用法手写 Promise的总体框架手写PromisePromise是一门新的技术(ES6规范),是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数)。温习Promise基础可以看看这篇文章:Promise从入门到精通,小白必看Promise的基本用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2021-09-24 17:29:01 · 191 阅读 · 0 评论 -
Promise的常见问题
文章目录Promise 的几个关键问题1.改变 promise状态的三种方式2.一个 promise 指定多个成功/失败回调函数,都会调用吗?3.改变promise状态和指定回调函数谁先谁后?4.promise.then()返回的新promise的结果状态由什么决定?5.promise如何串连多个操作任务?6.promise异常穿透7.中断promise链的唯一方法Promise 的几个关键问题1.改变 promise状态的三种方式<script> let p = new Prom原创 2021-09-23 16:57:53 · 490 阅读 · 0 评论 -
Promise从入门到精通,小白必看
Promise是什么?Promise简介Promise是一门新的技术(ES6规范),是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数)。从语法上看:Promise是一个构造函数(自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法)。从功能上来说: Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值。异步编程: ①fs 文件操作 ②数据库操作 ③Ajax ④setIntervalPromise的基本流程Promise封装原创 2021-09-23 16:51:33 · 599 阅读 · 1 评论 -
万字长文详解Vue3的常用新特性
文章目录1.Vue3简介2.Vue3带来了什么1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性一、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建二、常用 Composition API1.拉开序幕的setup2.ref函数3.reactive函数4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式5.reactive对比ref6.setup的两个注意点7.计算属性与监视1.computed函数2.watch函数3.watchEffect函数8原创 2021-09-20 12:57:55 · 354 阅读 · 0 评论 -
长文详解Vue路由的使用
文章目录路由1.基本使用2.几个注意点3.多级路由(多级路由)4.路由的query参数5.命名路由6.路由的params参数7.路由的props配置8.``````的replace属性9.编程式路由导航10.缓存路由组件11.两个新的生命周期钩子12.路由守卫13.路由器的两种工作模式路由理解: 一个路由(route)就是一组映射关系(key - value),key 为路径, value 可能是 function 或 component;多个路由需要路由器(router)进行管理。路由分类:后端原创 2021-09-07 22:57:42 · 1359 阅读 · 3 评论 -
Vue插槽如何使用?
文章目录插槽默认插槽:插槽作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 。分类:默认插槽、具名插槽、作用域插槽默认插槽:父组件中: <Zujianming> <div>html结构1</div> </Zujianming>子组件中: <template> <原创 2021-09-05 15:58:08 · 180 阅读 · 0 评论 -
长文详解Vuex的使用
vuexvuex:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。什么时候用?多个组件需要共享数据时。1.多个组件依赖于同一状态2.来自不同组件的行为需要变更同一状态...原创 2021-09-05 15:48:31 · 348 阅读 · 0 评论 -
Vue组件间的通信(全局事件总线和消息订阅与发布)
全局事件总线(GlobalEventBus)一种组件间通信的方式,适用于任意组件间通信。安装全局事件总线:(main.js)new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ......}) 使用事件总线:接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。methods(){ demo(d原创 2021-09-02 16:05:08 · 477 阅读 · 0 评论 -
props配置项和自定义事件实现父子组件间的数据传递
文章目录组件的自定义事件props配置项组件间传递数据父给子传(简单)子给父传(复杂)方式1:通过父组件给子组件传递函数类型的props实现子给父传递数据方式2:自定义事件组件的自定义事件一种组件间通信的方式,适用于:子组件 ===> 父组件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。绑定自定义事件:第一种方式,在父组件中:<Demo @atguigu="test"/>或 <Demo v-on:at原创 2021-08-31 16:42:43 · 615 阅读 · 0 评论 -
Vue进阶总结,前端小白必知必会
关于不同版本的Vue:1.vue.js与vue.runtime.xxx.js的区别:(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。...原创 2021-08-31 16:40:31 · 270 阅读 · 0 评论