- 博客(73)
- 收藏
- 关注
RSS订阅原创 当我们在控制台运行`npm run xxx`时,到底发生了什么?
当我们在控制台运行`npm run xxx`时,到底发生了什么?使用过`vue-cli`或者`create-react-app`的小伙伴一定知道,当我们运行项目时,往往需要在控制台输入`npm run xxx`只有这样 我们的项目才会开始构建,接下来我们就来探讨其中的过程...
2022-08-11 16:51:10
998
原创 react中函数组件和class组件的区别
走到handerClick，此时handerClick被重新创建，即handerClick指向了新的内存空间，值得注意的是：for循环接着往下走的时候，num所在的上下文并不是当前函数（新创建的函数），而是第一次初始化时创建的函数，而那个函数的上下文中，num永远都是0，所以console.log输出都是0。不论react对状态进行了什么处理,我们要知道的是,class组件是有状态的,他的状态会在组件生命周期中一直保存。的,每一次更新数据都会重新调用函数,生成新的函数执行上下文。...
2022-08-09 10:58:48
875
原创 前端每日一练＜async和defer＞
我们知道js代码执行是从上往下的,所以如果代码执行到某一处时可能会发生阻塞,妨碍下方代码继续执行我们讨论下和script标签与执行顺序有关的的属性:多说无用,直接看demo这里我们在一个html文件中引入一个js文件,将script标签写在span标签之前js文件中代码的作用时进行一个延时,并向页面中添加一个p标签当我们不设置async或defer属性时,页面是这样的,先执行js文件中的代码(延时2s然后向页面添加p标签),然后继续向下执行渲染页面,所以过程当设置属性为async时,不阻塞页面渲染(代码继
2022-06-14 18:08:34
195
1
原创 前端每日一练＜属性名的类型＞
题目:上面代码会输出什么？答案是:456为什么?这里牵扯到这几个知识点:对象的属性名类型对象的属性名类型只能有两种,分别是String和Symbol,如果新增的属性的类型不是两种中的任意一种,那么就会调用toString()方法将其转换成string类型[对象].toString()的结果设有一个对象obj,obj.toString()的结果是a.key和a[key]的区别假设有一个对象a执行a.key实际上会获取a中属性名为的属性,这里的是一个字符串,实际上就是获取a[‘key’]而执行a[key],
2022-06-14 18:07:36
157
原创 js赋值运算的过程
示例这道题的结果是什么?正确答案是这道题考察的是js赋值运算的过程我们以这个赋值运算为例,当我们执行这段代码时,js引擎的处理过程是这样的第4点的解释是这样的:那我们再回到示例题,解释一下示例代码的执行过程最终指向示例图如下所示总结:js入门很简单,但是深挖的话里面的细节确实挺多的,知识深度还是不太够...
2022-06-09 18:16:12
2409
原创 vue长列表优化之虚拟列表实现
vue长列表优化之虚拟列表实现应用场景:后台一次性发送上千条或更多数据给前台场景模拟:用户发起一个请求,后台发送了10w条数据使用虚拟列表之前:前台需要生成10w个dom节点用来渲染页面使用虚拟列表之后:前台只需要生成少量dom节点(dom节点数量取决于前端视图需要展示的数量),就可以实现对这10w条数据的视图渲染总之:虚拟列表就是固定dom节点数量,通过修改dom节点的内容而达到不重新增加(或删除)dom节点来实现列表的更新1.实现原理监听页面滚动,获取滚动的高度scrolltop根据
2022-05-30 18:49:19
14301
2
原创 css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)
1.两栏布局两栏布局的核心是左栏固定宽度，右栏宽度自适应html结构为 <div class="outer"> <div class="left"></div> <div class="right"></div> </div>方式一左栏浮动+固定宽度右栏宽度auto+margin偏移.outer{ height: 500px; background-color:
2022-04-18 21:19:10
1666
原创 实现图片懒加载
图片懒加载原理:初始时给页面上的图片的src设置为空值或者javascript:;,给图片创建一个data-url属性,并将图片正确的url赋值给data-url属性,当图片到达浏览器视窗时,将data-url的值赋值给src属性,这样就达到了懒加载的目的;实现懒加载前需要注意:给html标签(当然其中就包括img)设置data-*属性,这个属性会被储存在dom的dataset属性中,它的属性名就是*(例如我给img标签设置data-url属性,那么可以在img元素内的dataset属性中找到名为
2022-04-08 16:57:47
1856
原创 记一次令我吐血的demo实现经历
最近在复习js知识,看到了requestAnimationFrame这个API,就想着用这个API写一个小demo来练练手首先介绍一下这个API吧这是MDN文档的官方解释window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行大概意思就是浏览器会在单位时间内不断地重新渲染(这里为了方便理解其实说的不准确,可以了解一下浏览器的重绘
2022-03-20 20:01:28
269
原创 前端面试必备知识点总结(持续更新)
这篇博客是对前端面试所必须掌握的知识点的总结,并且这篇博客正在持续更新中…1.JavaScript 基础1.执行上下文/作用域/闭包1.什么是执行上下文?执行上下文是评估和执行JavaScript代码环境的抽象概念。每当JavaScript代码在运行时，他都是在执行上下文中运行。执行上下文的类型JavaScript共有三种执行上下文类型全局执行上下文这是基础的上下文,任何不在函数内部的代码都在全局上下文中.他会执行两件事:创建一个全局的window对象(浏览器环境的情况下),并且设
2022-03-08 20:05:05
4920
原创 字节青训营-实现前端动画
前端动画实现最近实在太忙了,没有时间写博客,贴一波最近学的动画代码敷衍一下演示地址动画演示实现下述动画效果:控制小球匀速移动控制小球暂停控制小球动画终止控制小球动画倒序播放控制小球速度<script> function animate({easing,draw,duration}){//动画函数 let start = performance.now(); let speed = 1 //倍速 //动画状态 let state = 'canc
2022-01-21 19:39:52
1123
原创 JS面试题-如何优雅的获取浮点数的整数和小数部分
1.取整数1.parseIntlet num = 3.75;console.log(parseInt(num)); // 3num = -3.75;console.log(parseInt(num)); // -3用parseInt取整数，结果是没问题的，但是如果严格来说，其实parseInt并不是设计用来取整数的。???????? 知识点：parseInt(string, radix)``这个方法是一个将字符串转换为整数的方法，它有两个参数，第一个参数表示要转换的字符串，如果参数不是一个
2022-01-08 16:14:43
1806
原创 前端面试题:在什么情况下a === a-1？
我们可以思考我们所学的数学知识无穷大和无穷大-1应该怎么比较?按照极限的思想,无穷大与无穷大-1应该是相等的,因为无穷大不能用来表示一个具体的数在JavaScript中，整数可以被精确表示的范围是 -2 * 53 + 1* 到 2 * 53 - 1*，即 -9007199254740991 到 9007199254740991。超过这个数值的整数，都不能被精确表示。所以当数字超过这个范围时,js会讲这个数定义为无穷大或者无穷小正负infinity在js中,Infinity是一个Number类
2022-01-04 21:27:36
1376
1
原创 node.js学习-回调函数
回调函数解释:回调函数就是我们在调用一个函数或者API时，向其传递一个函数作为参数供其调用使用场景:对于异步API，例如ajax请求等操作我们可以使用回调函数，等待请求拿到数据后在执行后面的操作示例:function fun1(){ const x=1,y=2 add(x,y,function(data){ console.log(data) })}//callback就是fun1传递过来的回调函数function add(x1,y1,callback
2021-12-11 12:16:36
602
原创 使用nodemon解决node修改代码后需要手动重启的问题
使用nodemon解决node修改代码后需要手动重启的问题nodemon是一个第三方库，**他能监视我们node项目代码的变化,每当代码被修改后,它能自动重启node项目,**我们可以不需要频繁的手动重启服务器下载:npm install --global nodemon注意使用global将它下载到全局安装完毕后,使用方法:nodemon xxx xxx为我们执行的js文件示例:nodemon app.js...
2021-11-28 20:01:51
610
原创 node.js中npm包管理器的理解和使用
npm全名node package manager，即node包管理器要了解npm,我们要先了解npm中最重要的一个文件，即package.json(包说明文件)1.package.json我们建议每个项目都要有一个package.json文件,他能对我们项目的基本信息进行描述,并且当我们使用npm进行一系列操作时都需要用到package.json怎么生成package.json文件?指令:npm init当我们在控制台输入以上指令,控制台就会根据我们的需求生成含有相应内容的package.js
2021-11-25 17:45:58
409
原创 CSS-线性渐变|径向渐变|圆锥渐变
12.css3渐变1.线性渐变为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction:起点或方向默认情况下,线性渐变的方向时从上到下的background-image: background:linear-gradient(red,oran
2021-11-24 17:09:30
471
原创 node中模块的引入规则
5.node中的模块加载规则1.模块加载顺序从缓存中加载核心模块路径形式的文件模块第三方模块分析:优先级1：从缓存中加载模块node在执行程序时,会将引入的模块存入缓存中，方便下次引用时直接从缓存中读取，而不需要重新引用,这样做可以加快程序执行速度,减少不必要的时间浪费所以当我们加载模块时,node会优先从缓存中寻找指定模块优先级2:加载核心模块node为我们准备了一些核心模块,例如文件模块fs,网络模块http等,当我们引入模块时,node会优先加载这些文件require(
2021-11-23 21:45:20
1673
原创 es6中模块导入导出与node中的模块系统的区别
es6中的模块导入方法与node中的区别node中的导入导出方式是:导入:requirerequire('./xxx')var add = require('./main')console.log(add.add(1,2));console.log(add.obj.a);导出:exports module.exportsexport.a=1module.exports.a=1function add(x,y){ return x+y}let obj = {
2021-11-22 20:28:32
688
原创 Node.js模块的导入与导出详解
1.模块的导入与导出导入:require(xxx.js)导出:exportsexports.a = 1exports.b = 2module.exportsmodule.exports.a = 1module.exports = {a:1,b:2}区别:module.exports可以直接复制,例如module.exports=1,而exports不能直接赋值module.exports = 1//rightexports = 1//err2.exports与mod
2021-11-22 18:16:26
7285
原创 JavaScript-JS闭包的理解
闭包1.定义本质:在一个函数内部创建另一个函数。只要存在函数嵌套，并且内部函数调用了外部函数的属性，就产生了闭包!!闭包的特性:函数嵌套函数函数内部引用函数外部的参数和变量参数和变量不会被垃圾回收机制回收闭包的优点:保护函数内的变量安全,实现封装，防止变量流入其他环境发生命名冲突在内存中维持一个变量，延长变量的生命周期匿名自执行函数可以减少内存消耗闭包的缺点被引用的私有变量不能被销毁,增大了内存的消耗，造成内存泄露，解决办法是可以在使用完变量后手动将其赋值为null其次
2021-10-27 21:18:00
103
原创 JavaScript高级-原型链继承-构造函数继承-组合继承
7.原型链继承流程定义父类型构造函数给父类型的原型添加方法定义子类型的构造函数创建父类型的实例赋值给子类型的原型为子类型的原型添加方法关键子类型的原型为父类型的实例对象示例 //父类型 function Supper(){ this.supProp = 'Supper property' } Supper.prototype.showSupperProp = function(){ console.log(th
2021-10-25 16:51:22
193
原创 JavaScript高级-原型和原型链
1.函数的prototype1.函数的prototype属性每个函数都有一个prototype属性，它默认指向一个Object空对象(原型对象)原型对象中有一个属性constructor，它指向函数对象(如下图)2.给原型对象添加属性(一般为方法)作用：函数的所有实例对象都会拥有原型中的属性(方法) function Fun(){ } const fun = new Fun() console.log(fun.__proto__===Fu
2021-10-09 20:52:08
251
1
原创 JavaScript高级-数据、变量、内存的定义与联系
1.定义什么是数据?存储在内容中代表特定信息的二进制编码,本质为01001…数据的特点:可传递，可运算一切皆数据内存中所有操作的目标:数据算术运算逻辑运算赋值运行函数什么是内存?内存条通电后产生的可存储数据的空间(临时的)内存的产生和死亡:内存条(电路板)>通电>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失一块内存中包含内部存储的数据地址值内存分类栈:全局变量/局部变量堆:对象
2021-10-04 21:47:13
151
原创 JavaScript高级-数据类型
1.数据类型1.定义1.分类1.基本(值)类型String:任意字符串Number:任意的数字Boolean:true/falseundefined:undefinednull:null2.对象(引用)类型Object:任意对象Function:一种特别的对象(可以执行)Array:一种特别的对象(通过数值下标寻找,内部数据是有序的)2.判断typeof:可以判断:undefined/Number/String/Boolean类型以及Function类型inst
2021-10-04 21:45:18
230
原创 Vue-VueRouter路由的使用(超详细)
1.定义理解:一个路由(route)就是一组映射关系(key-value),多个路由依靠路由器(router)进行管理前端路由:key是路径，value是组件2.基本使用1.安装vue-routernpm i vue-router2.应用插件Vue.use(Router)3.编写router配置项在router.js中(如果没有这个文件就自己创建)import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)
2021-09-15 17:16:59
2840
原创 Vue-Vuex的使用
1.定义1.vuex是什么:专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式，且适用于任意组件间通信2.什么时候使用Vuex 1.多个组件以来同一状态 2.来自不同组件的行为需要变更同一状态3.Vuex工作原理图2.vuex核心概念和API1.state1.vuex管理的状态对象(存放数据的对象)2.它应该时唯一的3.示例代码:const state = { // key:val
2021-09-11 20:29:23
419
1
原创 Vue-slot插槽
1.默认插槽1.定义 1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==>子组件 2.使用场景:只需要最基本的往组件中插入html时，可以使用默认插槽2.示例理解:父组件在子组件的标签内编写代码，在子组件中使用slot标签即可接收子组件<div class="list"> <h1>{{title}}</h1> <slot></slot> </div&g
2021-09-11 20:27:17
252
原创 Vue-消息订阅与发布
1.定义1.一种组件间通信方式，适用于任意组件间通信2.使用步骤： 1.安装pubsub: npm i pubsub-js 2.引入: import pubsub from ‘pubsub-js’ 3.接收数据：A组件想接收数据，则在A组件中订阅消息,订阅的回调留在A组件本身 methods:{ hello(){ console.log("school组件发布的消息成功传输到student组件中了"); } }, m
2021-09-08 22:19:20
214
原创 Vue-事件总线
1.定义 1.一种组件间通信的方式，适用于任何组件间通信 2.事件总线实际上就是定义一个全局变量将其挂载在Vue实例上，在Vue实例中需要在其生命中期中的beforeCreate中将事件总线挂载在Vue实例上，如果在创建实例之间挂载，则此时实例不存在，无法挂载，如果在创建实例之后挂载，此时页面已经渲染完成，挂载已经不生效 3.安装全局事件总线new Vue({ ... beforeCreate(){ //将事件总线挂载在Vue实例上 Vue.prototype.$bus
2021-09-08 21:35:49
315
原创 Vue-webStorage
1.定义1.浏览器通过window.sessionStorage和window.localStorage属性来实现本地存储机制2.相关APIxxxxStorage.setItem('key','value')//把键值对添加到存储中，如果键名存在，则更新其对应的值xxxxStorage.getItem('key')//获取对应键名的值xxxxStorage.removeItem('key')//移除对应键值对xxxxStorage.clear()//清空存储中的所有数据3.sessio
2021-09-08 13:49:11
129
原创 Vue-绑定自定义事件
1.定义 1.一种组件间通信的方式，适用于： 子组件===>父组件 2.使用场景:A是父组件，B是子组件，B想给A传递数据，那么就给在A中给B绑定自定义事件(事件的回调在A中) 3.绑定自定义事件: 1.方式一 在父组件中：<School @getSchoolName="getSchoolName" />或者<School v-on:getSchoolName="getSchoolName" /> 2.方式二 在父组件中定义ref
2021-09-08 13:48:23
961
原创 Vue-scoped
1.定义作用：让样式在局部生效，防止样式冲突原理：给每个组件的最外侧div添加一个id，这样就能有效的阻止样式冲突写法:<style scoped></style>2.示例假设我们需要写两个组件的css样式,假设我们样式的类名一样在student.vue中<div class="name"></div>.name{ width: 200px; height: 200px; background-color: ye
2021-09-05 23:35:28
120
原创 Vue-插件
1.定义功能:用于增强Vue本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据定义插件的方法:对象.insatll =function(Vue,options){ //1.添加全局过滤器 Vue.filter(...) //2.添加全局指令 Vue.directive(...) //3.配置全局混入 Vue.mixin(...) //4.添加实例方法 Vue.prototy
2021-09-05 23:34:23
68
原创 Vue-mixin混入
1.定义 功能:可以把多个组件公用的配置提取成一个混入对象 类似于node.js中的工具类 mixin中可以写VC(VueComponent)中的任何属性,例如 methods data 生命周期函数等等 使用方式: 第一步:定义mixin 创建一个新的js文件，并在对象中书写功能export const mixin ={ methods:{ showName(){ alert(this.name) }
2021-09-05 23:33:38
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人