自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 收藏
  • 关注

原创 Vue CLI创建vue2项目

Vue CLI创建vue2项目命令 1、执行创建项目命令 vue create 项目名称 2、选择预设 Manuelly select features手动配置 3、选择项目功能 择如下几项功能: Babel Router Vuex Css Pre-processors Lint/Formatte 4、选择2版本 5、是否使用history路由 6、选择css处理器 根据个人习惯选择即可 7、代码风格和eslint 根据个人习惯选择即可 8、选择在保存时还是在提交时修改 9、选择配置文件如何

2022-02-17 18:52:20 4039 1

原创 js异步加载方法

js异步加载方法 在页面解析的时候遇见script标签的时候会停下来,等待js加载并执行完改脚本后才会继续向下解析。js的默认加载是同步加载模式,加载js的时候会堵塞后续代码执行,如果代码量过多并在头部会有明显的页面卡顿感,给用户较差的体验感。并且在头部可能节点还未渲染导致脚本在执行时获取不到引起的其他问题。 有一下三个解决方法 1.defer <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat

2021-11-07 23:03:44 468

原创 JS代理Proxy和反射Reflect

JS代理Proxy和反射Reflect 代理(Proxy) Proxy是es6为开发者提供的可以拦截住针对对象的一些底层操作,并且额外在这基础上面添加一些其他的行为。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。 Proxy语法 const handler = {} const target = { id: 'target' } const proxy = new Proxy(target, hand

2021-11-01 01:06:25 303

原创 js实现深浅克隆

js实现深浅克隆 浅克隆:基本数据类型,则直接赋值,引用类型,则赋值的是地址。引用类型引用的是同一块地址,所以其中一方改变时,另一方也会改变 深克隆:基本数据类型,则直接赋值,引用类型创建一个新的空对象,开辟一块内存,然后将原对象中的数据全部复制过去,完全切断两个对象间的联系。 实现:定义函数将其挂载到Object的原型上,传入标记判断深浅克隆,然后判断判断其类型标记是否深克隆,基本类型直接返回,引用类型遍历每一项的值递归调用自己。 代码如下 Object.prototype.clone

2021-10-31 17:52:43 285

原创 JQ轮播图

JQ轮播图效果 使用jq实现简单的图片轮播效果,图片自动轮播功能,左右点击无缝连接滑动功能,鼠标进入时暂停切换,移出时恢复切换,主要是操纵包裹图片的盒子定位来实现轮播。 效果图如下 html代码部分 <div class="container"> <div class="wrapper"> <ul class="lists"> <li><img src="./img/bg1.jpg

2021-10-25 00:13:44 822

原创 防抖和节流

防抖和节流函数 窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是频繁数据请求,重渲染等操作时,无限制的触发事件,会加重浏览器的负担。使用deboune(防抖)和和throttle(节流)的方式来减少触发的频率,减轻负担,又不影响用户体验。 一、防抖(debounce) 在事件触发n秒后再执行回调,如果在这n秒又被触发,则重新计时。 //input输入触发事件 input.oninput= debounce(function(){ //回调函数 console.log

2021-10-24 00:13:20 139

原创 BFC (Block Formatting Context)

什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是一块独立的渲染区域,在该区域中,它规定常规流块盒布局方式。 我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context),直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。 BFC是一块渲染区域,那这块渲染区域到底在哪 根元素 浮动元素和定位元素(相对定位除外) ove

2021-10-12 00:00:05 260

原创 关于js闭包

关于闭包 在说明闭包之前简单的介绍一下一点前置知识 预编译 全局预编译 a . 会生成一个(Gloabl Object) GO对象会生成一个(Gloabl Object) GO对象 b . 分析var变量声明,如果变量在GO对象中不存在,直接将变量名作为AO对象的属性名,值为undefined,如果已经存在,不做任何改变 c . 分析function函数,将函数名作为GO对象的属性名,值为函数体,如果已存在,直接覆盖 局部预编译 a . 函数在运行的一瞬间,会产生一个(Active Object) A

2021-10-07 22:19:18 175

原创 获取当前时间或时间戳转换

获取当前时间或时间戳转换 有时候我们需要获取到当前的时间或者把时间戳转换成正常的时间格式,写一个简单的函数来完成这个功能 function gettime(t) { t=+ t||Date.now(); //判断是否有传入时间戳,没有则使用当前时间的时间戳 var timer = new Date(t); var year = timer.getFullYear(); //获取年份 var month = timer.getMonth() +1

2021-10-07 14:14:53 629

原创 js加载时间线

js时间线 时间线可以理解为在浏览器打开的一刻,记录了js按照顺序执行的事情。 一般分为十个步骤: 创建Document对象,开始解析web页面。解析HTML元素和它的文本内容,添加Element对象和Text节点到文档中。这个阶段document.readyState=‘loading’. 遇到link外部css,创建线程,进行异步加载,并继续解析文档。 遇到script外部js,设置有async、defer,浏览器创建线程异步加载,并继续解析文档。对于async属性的脚本,脚本加载完后立即执行。(异步

2021-10-04 10:36:09 176

原创 dom事件的捕获与冒泡

如题 当某个元素发生了一个事件时,他的祖先元素们一定也发生了该事件。 捕获时事件触发时有外层向内层捕抓,直到到达触发事件的对象; 冒泡时事件触发由内向外触发,到达document对象。 使用addEventListener(‘监听事件’,function(){ … ),true) 最后一个参数为true时,监听方式为捕获 不写或参数为false时,监听方式为冒泡 默认false,冒泡 捕获冒泡的顺序是先捕获,再冒泡,如图 冒泡 捕获 作为捕获事件的结束,冒泡事件的开始,addEventListener

2021-08-25 19:52:28 279

原创 vscode重命名自动同步修改末位标签插件

关于学习中,重命名标签时自动修改结束标签 vscode修改标签的时候,经常要点击开始标签修改,然后点击结束标签修改,比较麻烦, Auto Rename Tag这款插件可以帮助自动同步修改结束标签,十分的方便。 ...

2021-08-03 07:55:26 1840

原创 vscode彩色括号

vscode插件彩色大括号Bracket Pair Colorizer vscode默认的大括号颜色是统一的,有时候大括号包裹的层数多了时,不是特别清楚自己在哪层,有了彩色括号后,更加清楚的去分辨位置

2021-08-03 07:50:11 4721

原创 vscode的live server插件端口占用

关于学习中,使用cscode插件的端口插件占用问题 vscode工具的强大,插件的丰富。使用起来方便,但作为新手会遇见各种问题,在使用live server帮助自动刷新的时候,经常会遇见使用失败 然后收到这样的消息,这个时候我们只需要右键点击它 就可以继续使用了 ...

2021-08-01 23:33:34 1649

原创 js小知识之控制台输出不同颜色数据是什么

JavaScript中,控制台输出不同颜色数据的区别: 举个栗子: var a = 10; //数字 var b = "hello"; //字符串 var c = true; //布尔 var d; //undefined var e = null;

2020-11-12 21:44:58 3388

原创 js小知识之不要在if判断中做小数比较运算

if判断中做小数比较运算 在JavaScript中if()判断不要做小数的比较运算,可能得到的结果不是自己想要的。 举个栗子: if( 0.1+0.2 == 0.3){ console.log("0.1+0.2等于0.3") }else{ console.log("0.1+0.2不等于0.3") } 0.1+0.2真的会等于0.3吗,我们来执行看一下吧 0.1+0.2不等于0.3,我们console.log

2020-11-12 21:24:39 346

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除