- 博客(19)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 keep-alive 源码的理解
keep-alive 概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。keep-alive 组件中name选项作用项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤DOM 做递归组件时需要调用自身 namevue-devtools 调试工具里显示的组见名称是由vue中组件name决定的keep-alive 基础用法
2021-08-12 11:17:23
608
原创 BOM对象的核心技能
文章目录BOMBOM与DOM（Document Object Model）的关系BOM对象包含的内容windowwindow对象属性window对象方法Navigator对象Navigator 对象属性Navigator 对象方法History对象History 对象属性History 对象方法Location对象Location 对象属性Location 对象方法Screen对象Screen 对象属性BOMBOM(Browser Object Model) 是指浏览器对象模型。主要处理浏览器窗口和框架
2021-10-22 17:14:41
401
1
原创 DOM/BOM基本操作
文章目录DOM/BOM基本操作查看滚动条的滚动距离查看视口的尺寸元素基本操作查看元素的几何尺寸查看元素的尺寸查看元素的位置让滚动条滚动脚本css读写元素css属性DOM/BOM基本操作查看滚动条的滚动距离window.pageXOffset/pageYOffsetIE8及IE8以下不兼容document.body.scrollLeft/scrollTopdocument.documentElement…scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为
2021-10-22 16:36:37
306
原创 javaScript 闭包的理解
文章目录javaScript 闭包的理解javaScript 闭包的理解什么是闭包函数执行后返回结果是一个内部的函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成闭包var f = function () { var num = 0 return function () { return num ++ }}var fn = f()fn() // 0fn() // 1// fn = null // 释放闭包可以在内部函
2021-10-14 16:42:13
131
原创 网络的基础知识点
一个页面输入一个URL到页面加载完成的过程中都发生了什么事情加载过程浏览器根据dns 服务器解析得到域名的 IP 地址向这个IP 的机器发送 HTTP 请求服务器收到，处理并返回 HTTP请求浏览器得到返回的内容渲染过程根据 HTML 结构生成 DOM 树根据 css 生成 cssom将 DOM 和 cssom 整合形成 RenderTree根据RenterTree 开始渲染和展示在这个过程中遇到script 标签时，会堵塞渲染Web 前端应该从那些方面优化网站性能减.
2021-05-24 17:40:23
289
5
转载 对于箭头函数与普通函数理解
箭头函数与普通函数的区别普通函数function fun() { console.log("普通函数");}箭头函数let fun = () => { console.log("箭头函数");}let bar = () => 2 > 1 ? true : false箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return
2021-05-14 17:44:01
120
原创 对于数组方法forEach，filter，map，reduce 理解
1.forEachvar personArr=[ {name:'a',src:'/img/1.png',des:'hhhh',sex:'f'}, {name:'b',src:'/img/2.png',des:'fff',sex:'f'}, {name:'c',src:'/img/3.png',des:'eeee',sex:'m'}, {name:'d',src:'/img/4.png',des:'hb',sex:'m'}, {name:'e',src:'/img/5
2021-04-29 18:07:49
128
原创 JavaScript 事件处理（下）
文章目录拖拽应用事件分类鼠标事件键盘事件文本操作事件窗体操作类(window上的事件)拖拽应用应用 mousedown 鼠标按下 mousemove 鼠标移动 mouseup 鼠标抬起随机移动的方块mouseover<div id="box" style="width:100px; height:100px; position: absolute;top: 0px;left: 0px; background:yellow;"></div>var div = docu
2021-03-25 14:38:48
67
原创 JavaScript 事件处理（上）
文章目录如何绑定事件事件处理程序的运行环境封装兼容性的 addEvent(elem, type, handle);方法解除事件处理程序事件处理模型 — 事件冒泡、捕获事件冒泡事件捕获取消冒泡和阻止默认事件取消冒泡阻止默认事件事件对象事件委托如何绑定事件ele.onxxx = function (event) {}兼容性很好，但是一个元素只能绑定一个处理程序基本等同于写在HTML行间上(行间直接写执行语句)var div=document.getElementsByTagName('div'
2021-03-25 14:37:42
70
原创 css 常用属性的详细理解
文章目录一、css选择器二、 css复合选择器三、css 字体,文本,背景四、盒子模型 content /padding /border /margin五、display属性六、浮动 Float七、清除浮动 clear八、溢出处理 overflow九、定位网页元素 position十、z-index 属性十一、设置元素透明度 opacity一、css选择器标签选择器 div span a p类选择器 :activeID选择器 id = item二、 css复合选择器后代选择器在css选
2020-12-24 11:07:00
512
4
原创 浏览器的渲染原理，重排与重绘
浏览器渲染原理1.处理HTML 生成DOM树2.处理CSS 生成CSSDOM树3.将两树合并成render 树4.对render树进行布局计算5.将render树中的每一个节点绘制到屏幕上细化分析：1.浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)，当然这里包含用js动态创建的dom节点2浏览器把所有样式(主要包括css和浏览器的默认样式设置)解析成样式结构
2020-12-12 21:01:44
303
1
原创 1.5 css带你实现完美响应式布局
响应式布局媒体查询的引用方法有很多种link标签@importcss3新增的@media<link rel="stylesheet" media="screen and (max-width:800px)" href="index.css">媒体类型（Media Type): all(全部)、screen(屏幕)、print(页面打印或打印预览模式)媒体特性（Media features): width(渲染区宽度)、device-width(设备宽度)...Media
2020-12-12 20:56:20
129
原创 1.4 优雅的flex弹性盒子布局
文章目录columns 多列布局hack1hack2盒模型==弹性盒子display:flex==1.flex-grow2.flex-shrink3.flex-basis4.flex5.order6.align-selfflex容器上的属性1.flex-direction 决定主轴的方向2.flex-wrap属性3.flex-flow4.justify-content属性5.align-items属性6.align-content属性透明色颜色值 transparent前端开发人员来说，网页布局是c
2020-12-11 22:00:10
622
3
原创 2.3 javaScript 如何实现递归
文章目录递归递归何为递归？程序反复调用自身即是递归，我们需要关心的主要是以下三点：整个递归的终止条件。一级递归需要做什么？应该返回给上一级的返回值是什么？因此，也就有了我们解递归题的三部曲：找整个递归的终止条件：递归应该在什么时候结束？找返回值：应该给上一级返回什么信息？本级递归应该做什么：在这一级递归中，应该完成什么任务？一定要理解这3步，这就是以后递归秒杀算法题的依据和思路。但这么说好像很空，我们来以题目作为例子，之后再解这种套路递归题都能直接秒了写一个函数，实现n的
2020-12-05 15:32:16
179
原创 1.3 css3动画
文章目录属性选择器初级伪类选择器1.:root 根标签选择器2.:not 否定选择器3.:empty 空标签选择器4.:target 目标元素选择器伪类选择器条件选择属性选择器 li[class~='last']{ color:red; }E[att^=“val”] {…} 选择匹配元素E, 且E元素定义了属性att,其属性值以val开头的任何字符串E[att$=“val”]{…}选择匹配元素E, 且E元素定义了属性att,其属性值以val结尾的任何字符串
2020-12-04 16:04:47
61
原创 1.2 css3选择器
文章目录属性选择器初级伪类选择器1.:root 根标签选择器2.:not 否定选择器3.:empty 空标签选择器4.:target 目标元素选择器伪类选择器条件选择属性选择器 li[class~='last']{ color:red; }E[att^=“val”] {…} 选择匹配元素E, 且E元素定义了属性att,其属性值以val开头的任何字符串E[att$=“val”]{…}选择匹配元素E, 且E元素定义了属性att,其属性值以val结尾的任何字符串
2020-12-04 16:04:37
143
原创 2.1 js基础点的详解
文章目录js三大部分主流浏览器原始值 stack引用值 heapjs运算操作符比较运算符 逻辑运算符 条件语句 循环语句比较运算符逻辑运算符被认定为false的值(布尔值)条件语句条件语句补充typeof,类型转换typeof 六种数据类型（区分数据类型）类型转换隐式类型转换不发生类型转换js三大部分ECMAScript、DOM、BOM主流浏览器IE tridentChrome webkit/blinkfirefox Grcko
2020-11-30 16:01:51
101
1
原创 2.2 函数基本形式
文章目录函数声明函数表达式组成形式,函数名称,参数练习函数声明函数的命名小驼峰 theFirstNamefunction theFirstName（）{ }document.write(theFirstName) ;函数表达式1.命名函数表达式var test=function abc（）{ document.write(a) }test（）;2.（匿名）函数表达式var test=function（）{ document.write(test) }tes
2020-11-30 16:01:32
442
原创 1.1 css3多级导航栏菜单组件
文章目录CSS3的功能border-radius — 圆角box-shadow — 盒子阴影text-shadow — 文本阴影颜色值RGBA渐变的背景颜色 Gradient文字边界换行font-face.border-image — 边框应用背景背景图片起始位置background-origin裁剪背景background-clip背景图片尺寸background-sizeCSS3的功能提供了更加强大且精准的选择器，提供多种背景填充方案，可以实现渐变颜色，可以改变元素的形状、角度等，可
2020-11-30 15:29:41
481
前端开发3-5怎么突破瓶颈，怎么去学习？
2021-10-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人