03 2022 档案

4_Vue的一些项目优化技巧
摘要：（vue一般任务流程：写接口、写仓库、捞数据、展示数据、写动态） 优化高频事件触发处理，这里是利用了lodash直接实现节流或者防抖 优化减小打包文件，对第三方库进行按需引入 优化减少组件对象数量，使用编程式导航代替声明式导航 优化事件处理效率：利用事件委托，即给共同的父组件绑定事件 优化请求执行的 阅读全文
posted @ 2022-03-08 19:27 踏燕白梅 阅读(45) 评论(0) 推荐(0)
3_编程式导航路由跳转到当前路由（参数不变），多次执行报告NavigationDuplicated错误的解决方案
摘要：1、路由跳转的方式 声明式导航 <router-link to=""> 编程式导航 this.$router.push()/replace() 2、路由携带的参数 2.1 query参数 1 <!-- 跳转并携带query参数，to的字符串写法 --> 2 <router-link :to="/ho 阅读全文
posted @ 2022-03-08 18:02 踏燕白梅 阅读(173) 评论(0) 推荐(0)
3_Vue中的跨域问题
摘要：1、同源策略 同源策略限制了从同一个源加载的文档或者脚本如何与另一个源的资源进行交互，用于隔离潜在恶意文件。 同源指的是：协议、域名、端口号必须一致 2、解决跨域问题 2.1 CORS 使用额外的HTTP头来告诉浏览器，被准许访问来自不同源服务器上的指定资源 2.2 JSONP jsonp的原理就是 阅读全文
posted @ 2022-03-08 16:48 踏燕白梅 阅读(226) 评论(0) 推荐(0)
2_Vue中组件通信的几种方式
摘要：1、props 功能：让组件接收外部传过来的数据，可用于父子组件之间的通信 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。 1 //简单声明接收 2 // 阅读全文
posted @ 2022-03-08 15:00 踏燕白梅 阅读(58) 评论(0) 推荐(0)
1、Vue的模板语法、数据绑定
摘要：1、Vue模板语法有2大类： 1.1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 1.2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 举例：v-bind:href="xxx" 或 简 阅读全文
posted @ 2022-03-06 18:55 踏燕白梅 阅读(67) 评论(0) 推荐(0)
8_JS数组去重的较好方法（未完）
摘要：，，， 阅读全文
posted @ 2022-03-06 17:59 踏燕白梅 阅读(18) 评论(0) 推荐(0)
7_JS的Event loop（事件循环）、宏任务和微任务相关
摘要：借鉴感谢 https://blog.csdn.net/qq_39370934/article/details/117399021 https://www.cnblogs.com/cangqinglang/p/8967268.html https://blog.csdn.net/qq_39370934 阅读全文
posted @ 2022-03-06 17:46 踏燕白梅 阅读(61) 评论(0) 推荐(0)
10_CSS实现垂直水平居中的方式
摘要：垂直水平，自然垂直和水平两个方向上 1、行内元素 水平对齐+行高 text-align 父元素中设置为center line-height　设置为和父元素一样的高度 2、块 2.1 绝对定位+margin：auto 父元素开启相对定位，并且有宽高 子元素开启绝对定位 + 偏移量均为0 + margi 阅读全文
posted @ 2022-03-06 17:13 踏燕白梅 阅读(52) 评论(0) 推荐(0)
1_Cookie、SessionStorage、LocalStorage
摘要：Cookie： 用于存储 web 页面的用户信息。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。 Webstorage： 存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 浏览器端通过 Window.sessionStorage 和 Window.localStorag 阅读全文
posted @ 2022-03-06 03:13 踏燕白梅 阅读(28) 评论(0) 推荐(0)
2_原生AJAX
摘要：1、Asynchronous JavaScript And XML ，异步的JS和XML 可以在浏览器中向服务器发送异步请求，最大的优势在于无需刷新获取数据 2、AJAX的特点 2.1 优点 无需刷新页面就可以和服务器进行通信 允许根据用户事件来更新部分页面的内容 2.2 缺点 没有浏览历史，不能回 阅读全文
posted @ 2022-03-06 02:31 踏燕白梅 阅读(52) 评论(0) 推荐(0)
1_http协议与https协议相关
摘要：1、http协议与https协议 1.1 http协议 超文本传输协议，用于从服务器传输超文本到本地浏览器的传送协议 http是基于TCP/IP通信协议来传递数据的 TCP 用于从应用程序到网络的数据传输控制，IP 负责计算机之间的通信。 1.2 特点： 无连接：每次连接都只处理一个请求，并且请求结 阅读全文
posted @ 2022-03-06 01:37 踏燕白梅 阅读(153) 评论(0) 推荐(0)
6_JS的尾调用优化
摘要：1、重用栈帧？ 当内部函数的返回值也是外部函数的返回值时，引擎把外部函数的栈帧弹出也无影响 2、尾调用优化 外部函数的返回值是一个内部函数的返回值，满足以下条件即可以： 外部函数的返回值是对尾调用函数的调用 + 尾调用函数返回后不需要执行额外的逻辑+ 尾调用函数非闭包 //比如递归使用尾调用优化 / 阅读全文
posted @ 2022-03-05 23:04 踏燕白梅 阅读(73) 评论(0) 推荐(0)
5_防抖和节流相关
摘要：1、防抖debounce 定义：触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算时间 应用场景：搜索框、窗口滚动等 1 <body> 2 <div > 3 这里是div 4 </div> 5 6 7 </body> 8 <script> 9 const debounce = 阅读全文
posted @ 2022-03-05 22:21 踏燕白梅 阅读(40) 评论(0) 推荐(0)
4_JS的Promise相关
摘要：1、Promise的底层代码原理 爱了爱了 摘自知乎 https://zhuanlan.zhihu.com/p/183801144 1 const PENDING = 'PENDING'; 2 const FULFILLED = 'FULFILLED'; 3 const REJECTED = 'RE 阅读全文
posted @ 2022-03-05 22:20 踏燕白梅 阅读(24) 评论(0) 推荐(0)
3、JS的原型、原型链、执行上下文、作用域、作用域链+闭包（见1）
摘要：1、原型 1.1、函数的prototype属性 每个函数都有一个prototype属性，默认指向一个object空对象（即原型对象） 原型对象中有一个属性constructor，指向函数对象 1.2、给原型对象添加属性（一般添加方法） 函数的所有实例对象自动用于原型中的属性（方法） // 原型对象中 阅读全文
posted @ 2022-03-05 22:01 踏燕白梅 阅读(51) 评论(0) 推荐(0)
2、JS中的数据、变量、内存
摘要：1、相关概念 内存的分类： 栈：全局变量，局部变量 堆：对象 变量： 值可以变化的量, 由变量名与变量值组成 一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容 内存,数据, 变量三者之间的关系： 内存是一个容器, 用来存储程序运行需要操作的数据 变量是内存的标识, 我们通 阅读全文
posted @ 2022-03-05 16:04 踏燕白梅 阅读(139) 评论(0) 推荐(0)
1、JS中的闭包
摘要：1、如何产生闭包？ 当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量时，就会产生闭包 闭包存在于嵌套的内部函数中 产生闭包的条件 函数嵌套+ 内部函数引用了外部函数的数据（变量或者函数）+ 执行外部函数（执行内部函数定义就会产生闭包，甚至不用调用内部函数） 2、常见的闭包 2.1、将函数作 阅读全文
posted @ 2022-03-05 15:02 踏燕白梅 阅读(203) 评论(0) 推荐(0)
0_9 移动端、媒体查询、响应式布局
摘要：1、像素和视口 1.1 像素： 物理像素：分辨率数 css像素：编写网页时，所用都是css像素 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现 ， 一个css像素最终由几个 物理像素显示，由浏览器决定： 默认情况下在pc端，一个css像素 = 一个物理像素 1.2 视口 屏幕中用来显示 阅读全文
posted @ 2022-03-04 02:21 踏燕白梅 阅读(86) 评论(0) 推荐(0)
0_8 Flex弹性盒
摘要：1、弹性盒 是css的又一种布局手段，主要用来代替浮动来完成页面的布局，使元素具有弹性，可以跟随页面大小的改变而改变。 弹性容器： 要使用弹性盒，必须先把一个元素设置为弹性容器，通过 display 来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 阅读全文
posted @ 2022-03-04 01:32 踏燕白梅 阅读(58) 评论(0) 推荐(0)
0_7 Less的用法
摘要：先留白 阅读全文
posted @ 2022-03-04 00:52 踏燕白梅 阅读(22) 评论(0) 推荐(0)
0_6 CSS的animation
摘要：1、过渡transition 过渡：指定一个属性（需要具体值）发生变化时的切换方式 transition-property: 指定要执行过渡的属性 transition-duration: 指定过渡效果的持续时间 transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 tran 阅读全文
posted @ 2022-03-04 00:47 踏燕白梅 阅读(40) 评论(0) 推荐(0)
0_5 CSS字体、文本和背景
摘要：1、字体样式 color 颜色 font-size 大小（三个单位） font-family 字体族 2、文本样式 水平text-align left（左对齐） right（右对齐） center（居中） justify（两端） 垂直vertical-align baseline（基线对齐） top 阅读全文
posted @ 2022-03-03 23:52 踏燕白梅 阅读(57) 评论(0) 推荐(0)
0_4 CSS定位、层级
摘要：1.定位， 一种更高级的布局手段，可以通过定位把元素摆放在页面的任意位置 使用position属性设置定位 1.1 position可选值： static 默认值 relative 相对定位，参考元素在文档流中的位置，提升层级，不脱离文档流，不改变元素性质（块、行内） absolute 绝对定位，参 阅读全文
posted @ 2022-03-03 22:48 踏燕白梅 阅读(106) 评论(0) 推荐(0)
0_3 CSS文档流、盒模型、浮动、高度塌陷、外边距折叠、BFC
摘要：恢复内容开始 1、盒模型： CSS将页面中的元素都设置为了一个矩形的盒子，布局变为把不同的盒子放在不同的位置 组成：内容区content，内边距padding，边框border，外边距margin box-sizing用来设置盒子尺寸的计算方式（width，height）， 默认值为content- 阅读全文
posted @ 2022-03-03 20:08 踏燕白梅 阅读(78) 评论(0) 推荐(0)
0_2 CSS的长度单位和颜色
摘要：长度单位： px像素：构成屏幕（显示器）的小点，不同屏幕像素大小不同，像素越小越清晰 百分比：相对于父元素属性的百分比，可以使子元素跟随父元素的改变而改变 em：em是相对于所在元素的字体大小来计算，1em = 1font-size，会根据字体大小改变而改变 rem：rem相对于根元素html的字体 阅读全文
posted @ 2022-03-03 16:36 踏燕白梅 阅读(53) 评论(0) 推荐(0)
0_1 CSS的样式、选择器及其权重、伪类伪元素
摘要：恢复内容开始 一、样式修改+vue 有三种途径： （1）第一种（内联样式/行内样式），直接在标签内部通过style属性来设置元素样式 问题：样式只能对一个标签生效，变化时必须要一个一个修改 （2）第二种（内部样式表）将样式写到style标签里面，通过选择器来选中元素并设置 问题：内部样式表只能对一个 阅读全文
posted @ 2022-03-03 16:19 踏燕白梅 阅读(65) 评论(0) 推荐(0)