woshiliyuwang-CSDN博客

原创 Vue CLI创建vue2项目

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

2022-02-17 18:52:20 3837 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 374 1

原创 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 208

原创 js实现深浅克隆

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

2021-10-31 17:52:43 184

原创 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 712

原创防抖和节流

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

2021-10-24 00:13:20 72

原创 BFC (Block Formatting Context)

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

2021-10-12 00:00:05 156

原创关于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 70

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

获取当前时间或时间戳转换有时候我们需要获取到当前的时间或者把时间戳转换成正常的时间格式，写一个简单的函数来完成这个功能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 503

原创 js加载时间线

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

2021-10-04 10:36:09 117

原创 dom事件的捕获与冒泡

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

2021-08-25 19:52:28 197

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

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

2021-08-03 07:55:26 1558

原创 vscode彩色括号

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

2021-08-03 07:50:11 4457

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

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

2021-08-01 23:33:34 1460

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

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

2020-11-12 21:44:58 3126

原创 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 257

woshiliyuwang的博客