前端
文章平均质量分 77
了解最新的前端开发趋势和技术实践,掌握HTML、CSS和JavaScript等核心知识,从入门到精通,助你成为一名优秀的前端工程师。
itpeilibo
不怕孤独,努力沉淀;
于淡泊中,平和自在。
展开
-
webpack看这一篇就够了
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩原创 2022-06-20 00:09:47 · 58660 阅读 · 32 评论 -
【JavaScript】js中 typeof 与 instanceof 区别
可以看到,上述两种方法都有弊端,并不能满足所有场景的需求。的基本用法,下面就实现一个全局通用的数据类型判断方法。操作符返回一个字符串,表示未经计算的操作数的类型。也就是顺着原型链去找,直到找到相同的原型对象,返回。如果我们想要判断一个变量是否存在,可以使用。表示对象或原始值的表达式,其类型将被返回。从上面例子,前6个都是基础数据类型。之后返回的是有问题的结果,不能作为判断。如果需要通用检测数据类型,可以采用。同时,可以发现引用类型数据,用。会被识别出来之外,其余的都输出。,调用该方法,统一返回格式。原创 2022-10-04 07:02:53 · 1203 阅读 · 1 评论 -
面试官:Vue中的$nextTick有什么作用?
在修改数据之后立即使用这个方法,获取更新后的 DOM。将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿来进行处理,进行。每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图),有了。如果我们一直修改相同数据,异步操作队列还会进行去重。,而是将修改数据的操作放在了一个异步操作队列中。如果想要在修改数据后立刻得到更新后的。节点,却发现获取到的是旧值。机制,只需要更新一次,所以。数据在发现变化的时候,原创 2022-09-20 14:07:05 · 283 阅读 · 0 评论 -
Diff和虚拟DOM
虚拟DOM可以说就是一个对象,一个用来表示真实DOM的对象。请你说一下对虚拟DOM的理解。原创 2022-09-12 17:12:24 · 113 阅读 · 0 评论 -
Vuex的简单介绍
vue提供的一个状态管理模式,解决不同组件数据共享问题。原创 2022-09-12 17:08:39 · 241 阅读 · 0 评论 -
vue2常见面试题
设计模式观察者模式发布订阅模式主体Watcher 观察者、Dep 目标对象Publisher 发布者、Event Channel 信息中心、Subscribe 订阅者主体关系Dep 中通过 subs 记录 WatcherPublisher 和 Subscribe 不想不知道对方,通过中介联系优点角色明确,Watcher 和 Dep 要遵循约定的成员方法松散耦合,灵活度高,通常应用在异步编程中缺点紧耦合当事件类型变多时,会增加维护成本使用案例双向数据绑定。原创 2022-09-12 17:04:48 · 13207 阅读 · 0 评论 -
【JavaScript】js中非常常见的面试题
一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前Object.observe(已废弃;Proxy 对象替代)宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合script (可以理解为外层同步代码)UI rendering/UI事件promise里面的代码是同步任务 promise的方法.then()等是异步任务 微任务。原创 2022-09-12 16:54:20 · 932 阅读 · 0 评论 -
【JavaScript】js中常见面试题
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域;1、箭头函数没有this,所以需要通过查找作用域链来确定this的值,这就意味着如果箭头函数被非箭头函数包含,this绑定的就是最近一层非箭头函数的this, 6、箭头函数没有自己的arguments,可以在箭头函数中使用rest参数代替 arguments对象,来访问箭头函数的参数列表。:对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。原创 2022-09-12 16:31:51 · 253 阅读 · 0 评论 -
js常见的数组方法
传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响。首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组。传入三个参数,分别是开始位置、0(要删除的元素数量)、插入的元素,返回空数组。传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组。方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度。对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。原创 2022-09-04 21:50:06 · 130 阅读 · 0 评论 -
人力资源项目逐字稿
人资项目权限设计用到的是现在比较流行的一种设计模,叫RBAC的权限设计模式,这个模式主要有3个部分构成,员工,角色以及权限,我们要做的就是先完成员工,角色,以及权限的增删改查,然后给员工添加角色,给角色添加权限,这样员工就具有对应的权限了,我们这里的权限主要是两个方面的权限,一个页面访问权限,一个是按钮操作权限。编辑权限功能直接复用新增功能的结构样式,编辑权限的时候首先要获取到点击的那个权限的id并通过该id获取权限详情数据最后进行数据回显,然后调用编辑权限接口,传入新的数据从而实现编辑功能。...原创 2022-08-28 16:35:52 · 1243 阅读 · 0 评论 -
精选面试题
Model 层: 数据模型层通过Ajax、fetch等 API 完成客户端和服务端业务模型的同步。View 层: 视图层作为视图模板存在,其实 View 就是⼀个动态模板。ViewModel 层: 视图模型层负责暴露数据给 View 层,并对 View 层中的数据绑定声明、 指令声明、 事件绑定声明, 进行实际的业务逻辑实现。数据变化了, 视图自动更新=> ViewModel 底层会做好监听 Object.defineProperty,当数据变化时,View 层会自动更新。......原创 2022-08-27 10:31:12 · 1380 阅读 · 0 评论 -
面试题总结
如果不是一个函数返回一个新的对象,组件如果多次使用,实际公用的是同一个数据但是如果是通过函数 返回一个新的对象,这样的话,每个组件的使用数据是独立的// 订阅事件// 发布}观察者模式即一个对象被多个对象所依赖,当被依赖的对象发生更新时,会自动通知所有依赖的对象。............原创 2022-08-26 12:50:37 · 634 阅读 · 0 评论 -
前端 js 异步流程
js 是单线程的,也就代表 js 只能一件事情一件事情执行,那如果一件事情执行时间太久,后面要执行的就需要等待,需要等前面的事情执行完成,后面的才会执行。所以为了解决这个问题,js 委托宿主环境(浏览器)帮忙执行耗时的任务,执行完成后,在通知 js 去执行回调函数,而宿主环境帮我们执行的这些耗时任务也就是异步任务js 本身是无法发起异步的,但是 es5 之后提出了 Promise 可以进行异步操作。原创 2022-08-23 23:33:31 · 235 阅读 · 0 评论 -
闭包的原理跟作用
一个函数和对其周围状态()的引用捆绑在一起(或者说函数被引用包围),这样的组合就是()。大白话也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。原创 2022-08-22 08:14:12 · 186 阅读 · 0 评论 -
【JavaScript】js中常用的es5 数组方法
和之前for循环作用基本一样,只不过比for更灵活方便一些参数:回调函数,该回调函数有三个参数。原创 2022-08-22 08:07:04 · 371 阅读 · 0 评论 -
css高频面试题
1.1-flex1.2-flex+margin1.3-定位+transform1.4-定位+margin02-盒模型盒模型主要分为4部分:内容、外边距、内边距Css3盒子模型可以通过box-sizing来改变默认就是content-box,也就是默认标准盒模型,标准盒模型width设置了内容的宽,所以盒子实际宽度加上padding和border以上示例代码盒子最终宽高就是:140 * 140通过设置box-sizing: border-box;盒模型为ie盒模型,也称怪异盒模型,设置wi原创 2022-08-22 07:59:10 · 373 阅读 · 0 评论 -
【JavaScript】js中继承的n种方式
子类能够使用父类的属性和方法。原创 2022-08-18 08:56:25 · 187 阅读 · 0 评论 -
前端javascript构造函数和原型(超详细讲解)
每一个实例对象又有一个__proto__属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有__proto__属性,这样一层一层往上找就形成了原型链。任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象就有__proto__属性,这样一层一层往上找,就形成了一条链,我们称此为原型链;构造函数是一个特殊的函数,用来初始化对象,为对象成员变量赋初始值,需要和new一起使用 使用场景:我们可以把对象公有属性方法抽离出来,封装到函数里面。...原创 2022-08-09 20:13:37 · 1014 阅读 · 0 评论 -
前端 javascript 基础常见面试题
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。提高了程序逻辑的局部性。增强了程序的可靠性,减少了名字冲突。全局作用域局部作用域(函数作用域)......原创 2022-08-07 22:58:55 · 252 阅读 · 1 评论 -
面试题 ref是什么
代码】面试题ref是什么。原创 2022-07-28 08:43:31 · 195 阅读 · 0 评论 -
面试题 v-if跟v-show的区别
v-if条件不满足>>也会执行遍历>>性能差。v-if添加到外层盒子,不满足条件>>不执行渲染。源码中体现>>v-for比if比较高。原创 2022-07-27 14:34:37 · 226 阅读 · 0 评论 -
keep-alive的使用场景跟原理分析(超详细讲解)
一、Keep-alive 是什么 keep-alive`是`vue`中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染`DOM 二、使用场景使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用`keepalive``keep-alive`是`vue`中内置的一个组件源码位置:src/core/components/keep-alive.js...原创 2022-07-27 13:14:21 · 5027 阅读 · 0 评论 -
Vue生命周期你真的理解了吗?(必会面试题)
Vue生命周期(必会面试题) 1.1Vue生命周期都有哪些?执行时机制1.2 一旦进入组件或者一旦进入页面,会执行哪些生命周期?1.3 如果使用了keep-alive会多出来俩个生命周期1.4 如果使用了keep-alive第一次进入组件会执行5个生命周期1.5 如果使用了keep-alive第二次或者第N次,每次都会执行一个生命周期1.6 父子组件嵌套执行生命周期的顺序......原创 2022-07-26 09:22:47 · 201 阅读 · 0 评论 -
vue_todo案例超详细讲解(可跟做练手项目)
1. 请说下封装 vue 组件的过程:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能,单独抽离成一个组件,实现复用 具体步骤:Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值,子组件修改好数据后,想把数据传递给父组件。可以采用$emit方法。 2. Vue组件如何进行传值的父向子..原创 2022-07-19 10:15:55 · 1542 阅读 · 0 评论 -
vue项目实现路由按需加载(路由懒加载)的三种方式
这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载,方法有三种:vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。但是,这种情况下一个组件生成一个js文件。 举例如下:2. es6提案的import()推荐使用这种方式(需要webpack > 2.4)webpack官方文档:webpac原创 2022-07-11 00:17:11 · 4659 阅读 · 0 评论 -
Vue2使用vant实现_网易云音乐案例(可跟做练手项目)
下载网易云音乐node接口项目, 在本地启动, 为我们vue项目提供数据支持项目地址备用地址下载后, 安装所有依赖, 在本地启动起来, 测试访问此地址是否有数据http://localhost:3000, 看到如下页面就成功了在今天的笔记铺垫中, 大家自学下载了一个项目启动即可初始化工程下载需要的所有第三方依赖包引入笔记代码里准备好的reset.css和flexible.js - 实现样式初始化和适配问题 - 引入到main.js本次vant使用自动按需引入的方式文档: https://vant原创 2022-07-10 23:40:47 · 3925 阅读 · 2 评论 -
关于第三方图片资源403问题
关于第三方图片资源403问题,为什么文章列表数据中的好多图片资源请求失败返回 403?,第三方平台怎么处理图片资源保护的?,Referer 是什么东西?,怎么解决?,如何设置不发送 referrer?原创 2022-07-09 09:48:21 · 191 阅读 · 0 评论 -
【JavaScript】js基础第04天笔记
JavaScript基础笔记地址🔥JavaScript基础第一天https://blog.csdn.net/weixin_46862327/article/details/123923418🔥JavaScript基础第二天https://blog.csdn.net/weixin_46862327/article/details/123924961🔥JavaScript基础第三天https://blog.csdn.net/weixin_46862327/article/d...原创 2022-04-06 19:07:51 · 1501 阅读 · 0 评论 -
【JavaScript】js基础第02天笔记
JavaScript基础笔记地址🔥JavaScript基础第一天https://blog.csdn.net/weixin_46862327/article/details/123923418JavaScript基础第02天0-目标能够使用常用运算符能够说出前置递增和后置递增的区别能够说出运算符的优先级能够使用 if 分支语句能够使用 switch 分支语句能够使用三元表达式1 - 运算符(操作符)1.1 运算符的分类运算符(operator)也被称为操作符...原创 2022-04-02 17:23:57 · 428 阅读 · 0 评论