- 博客(58)
- 收藏
- 关注
RSS订阅原创 异步的相关知识
前言我们知道Javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。在h5中js引入了web worker这个标准，允许js创建多个子线程，但是子线程完全
2022-02-15 21:03:50
309
原创 keep-alive的使用
keep-alive是什么？keep-alive是一个抽象组件，他本身不会渲染DOm元素，也不会出现在父组件链中，使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们2.作用以及使用场景在组件切换过程中将状态保存在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性使用场景：3.实现的原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name .
2022-02-14 13:34:55
167
原创 iconfont字体图标的使用
先传个我能轻易理解的文章链接：https://blog.csdn.net/weixin_52703987/article/details/114523474?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242.2
2021-11-04 09:59:00
83
原创 前端模块化
前端模块化为什么要使用模块化在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。直接将代码写在
2021-06-17 16:21:47
103
2
原创 vue插槽
vue插槽为什么使用插槽组件的插槽：组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。栗子：移动网站中的导航栏。移动开发中，几乎每个页面都有导航栏。导航栏我们必然会封装成一个插件，比如nav-bar组件。一旦有了这个组件，我们就可以在多个页面中复用了。插槽的基本使用在子组件中，使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们通过一个简单的例子，来给子组件定义一个插槽：中的内容表示，如果没有在该组件
2021-06-17 15:40:07
55
原创 组件之间的通信
组件之间的通信1.组件之间为什么要通信？默认情况下，组件只能使用自己的data,兄弟组件或者父子组件之间，都不会互相使用对方data中的数据。但是，在实际项目中，我们经常会需要组件和组件之间进行数据传递，所以，在Vue中组件间的通信是非常重要的2.组件间通信的6种方式组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，
2021-06-03 00:03:59
307
2
原创 VUE的组件化开发
VUE的组件化开发1.什么是组件化？我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块。而每一个组件又可以进行细分。2. 组件化思想的应用好处：有了组件化的思想，我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。4. 注册组件的基本步骤：创建组件构造器注册组件使用组件这里的步骤都代表什么含义呢？1.Vue.extend()：调用Vue.extend()创建的是一个组件构造器。
2021-05-25 18:28:02
62
原创 VUE基础知识
VUE基础知识学习之前实现一个简单的vue dome<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
2021-05-18 14:26:41
174
1
原创 vue的三种安装方式
vue的三种安装方式**方法一：Vue.js用cdn方式引入第一种方式，下面引入的是2.5.16版本，开发环境的cdn版本(开发环境版本，包含了有帮助的命令行警告，这里可以查阅2.6.10版本：https://cdn.jsdelivr.net/npm/vue/dist/vue.js下面引入生产环境的cdn版本(生产环境版本，优化了尺寸和速度，这里可以查阅2.6.10版本：https://cdn.jsdelivr.net/npm/vue<!DOCTYPE html><html
2021-05-11 23:41:39
683
1
原创 JavaScript本地存储
JavaScript本地存储为什么会用本地存储随着互联网的发展，页面的运用越来越普遍，同时也越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，html5提出了相关的解决方案本地存储的特性（1）数据存储在用户浏览器中，（2）设置读取方便，甚至刷新页面也不会丢失数据（3）容量较大， localStorage约20M，约sessionStorage 5M(4)只能存储字符串，可以用json.stringfy()编码后存储...
2021-05-02 16:27:36
36
原创 立即执行函数
立即执行函数概念：立即执行函数: 不需要调用，立马能够自己执行的函数语法：1.(function() {})() 或者 2. (function(){}()); (function(a, b) { console.log(a + b); var num = 10; })(1, 2); // 第二个小括号可以看做是调用函数 (function sum(a, b) { console.log
2021-05-02 16:14:14
60
原创 元素的偏移offset 系列
元素的偏移offset 系列offset 概述offset翻译过来就是偏移量的意思，我们使用offset的相关属性可以动态获得该元素的位置大小获得元素距离需带有定位父级元素的位置可以获得元素自身的大小（宽度和高度）注意：返回的数值都不带单位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten
2021-05-02 15:18:45
120
原创 JS的执行机制
JS的执行机制js语言的最大特点就是单线程，意思就是同一时间只能做一件事单线程就意味着，所有的任务需要排队，前一个任务结束后，才会执行后一个任务，这样所导致的问题就是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞为了解决，单线程可能造成的问题，利用多核CPU的计算能力，HTML5提出web worker标准，允许JS脚本创建多个线程，于是JS中出现了同步和异步同步：前一个任务结束后，再执行后一个任务，程序的执行顺序和任务的排列顺序是一致的异步：同时做多个任务、同步
2021-05-02 12:43:51
93
原创 this的指向问题
this的指向问题this 指向问题 一般情况下this的最终指向的是那个调用它的对象全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window） console.log(this); function fn() { console.log(this); } window.fn(); window.setTimeout(function() {
2021-05-02 11:48:22
39
原创 BOM
BOM什么是BOM？BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。关于BOM知识的思维导图浏览器的顶级对象window页面加载事件以及注意事项代码执行都是从上向下，js的代码必须在元素下才有效，如果在文档中js放在任何地方都能正常使用，必须使用 页面加载事件，当文档内容完全加载完毕之后才
2021-05-01 10:16:39
41
原创 DOM事件高级
DOM事件高级注册事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2021-05-01 09:28:14
62
1
原创 dom的重点核心
dom的重点核心关于DOM主要针对元素的操作，主要有创建增删，改，查属性操作，事件操作创建元素的三种方法增加元素appendChild 指定元素后面添加节点insertBefore 指定元素前面添加节点删除元素 删除节点用 removeChild(父节点.子节点)查询元素: 主要查询dom 的元素dom提供的API方法h5提供的新方法利用节点操作获取元素：父 （parentNode） 子（children） 兄（previousElementSibling nextElemen
2021-04-30 16:34:46
31
1
原创 三种创建元素方式的区别
三种创建元素方式document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘innerHTML 创建元素 通过拼接i字符串的方式，效率会慢，但会导致页面重绘，采用数组形式拼接效率更高document.createElement() 创建元素，重新创建一个元素，效率稍微低一点，但是结构更清晰<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
2021-04-30 14:27:04
140
原创 DOM的节点操作
DOM的节点操作为什么要节点操作？因为获取元素的两种常用的方法：（1）利用DOM提供的方法获取，比如通过 document.querySelector(“div”) document. 的方式获取元素逻辑性不强 ，比较繁琐 （2）利用节点层级关系获取元素，会更方便节点的概述：一般的节点一般会有，nodeType(节点类型)，nodeName(节点名称) ，nodeValue(节点值) 这三个基本属性值元素节点 nodeType为1属性节点 nodeType为2文本节点 node
2021-04-22 00:34:46
36
原创 操作元素Tab栏切换
Tab栏切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
2021-04-20 23:27:01
84
原创 操作元素自定义属性的操作
自定义属性的操作获取元素的属性值的方法<body> <div id="damo"></div> </body><script> var div=document.querySelector("div") // 获取元素的属性值 // 通过element.属性值获取 console.log(div.id); // 方法二：通过element..getAttribute("属性名")
2021-04-15 19:36:15
352
原创 表单的取消和全选
表单的取消和全选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
2021-04-15 19:02:11
43
原创 鼠标经过和鼠标离开事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-04-15 17:23:59
691
原创 js点击切换图片
注意字符串的拼接<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
2021-04-15 16:57:50
132
原创 DOM的基础知识
DOM的基础知识什么是DOMDOM:Document Object Model 文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口 B:浏览器O:对象M:模型，W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式DOM的简介DOM树：如何获取页面元素document文档对象提供了一系列的api方法，可以方便我们操作dom数上面的节点getElementById根据id属性获取到页面上唯一的一个元素https://developer.mo
2021-04-09 01:00:05
241
原创 简单数据类型和复杂数据类型
简单数据类型和复杂数据类型简单数据类型的内存分配简单数据类型存放到栈当中，里面直接开放一辟一个空间存放的是值简单数据类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型值类型：在存储时变量种存储的是值本身该，因此叫做值类型：string number boolean undefined nullnull 返回的是一个空的对象，object 如果有一个变量以后打算存储为对象，暂时没想好放啥，这个时候可以就给null复杂数据类型的内存分配 存放在堆中，首先在栈里面存放地址然后地址指向堆里面的数
2021-04-04 00:58:09
207
原创 typeof与instanceof和indexOf（）区别
typeof与instanceof和indexOf（）区别typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。它返回值是一个字符串，该字符串说明运算数的类型。typeof 可以用来检测给定变量的数据类型。instanceofinstanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。a instanceof b：判断a是否为b的实例，可以用于继承关
2021-03-30 00:00:54
647
1
原创 javascript的内置对象
javascript的内置对象什么是内置对象在javascript中的对象分为3种：自定义对象，内置对象，浏览器对象前面两中对象是JS基础内容，属于ECMAScript,第三个浏览器对象属于JS独有的内置对象：就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是基本而必要的功能，（属性和方法）内置对象最大的有点就是帮助快速开发javascript提供多个内置对象：Math,Date,Array,String等根据文档查询指定API的使用方法math对象的常用
2021-03-26 00:20:53
61
原创 javascript对象
对象对象的概念在javascript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串数组，函数等对象是由属性和方法组成的属性：事物的特征，在对象中用属性来表示，方法：事物的行为，在对象中用方法来表示为什么需要对象？保存一个值时，可以使用变量，保存多个值时，可以使用数组，如果要保存一个人的完整信息，则需要对象，js中的对象表达结构跟清晰，更强大创建对象的三种方式：（1）利用字面量创建对象<script> //里用字面量创建对象 var ob
2021-03-24 00:08:40
35
原创 作用域
作用域作用域：作用域就是代码的执行环境，通常来说一段程序代码中，代码名字（变量）在某个范围内起作用和效果，作用域的使用提高了程序逻辑的局限性增强了程序的可靠性，减少了名字的冲突javascript的两种作用域：全局作用域：在整个script标签，都能使用局部作用域：这个代码的名字只在函数内部起效果和作用变量的作用域：全局变量：在全局作用域下用var声明的变量，在i全局下都可以使用 注意:如果在函数内部没有声明直接赋值的变量也属于全局变量局部变量：在函数内部声明的变量，在局部作用域下
2021-03-23 00:56:07
31
原创 函数
函数概念：函数是代码的容器，可以装一段代码，可以封装一段代码，以后里面的代码可以多次调用而无需重复编写，可以消除页面上很多冗余重复的代码，俗称代码复用。创建函数函数的声明：匿名函数（函数表达式）：依然可以在代码中定义一个函数，只是当前函数没有直接命名，而通过一个变量来接受，因为javescript的变量可以包含任何内容，数组、字符串、对象、甚至是函数。被称为一个匿名函数，但是fun可以当做前函数的引用，可以理解为fuc的名字函数命名驼峰式命名法 :小驼峰：多个单词组成函数名字的时候，第一个单
2021-03-22 00:17:53
25
原创 javascript的流程控制结构
javascript的流程控制结构本质：改变代码执行顺序的js语法1. 分支结构：由上到下执行代码的过程中，根据不同的条件条件执行不同的路径代码，从而得到不同的结果JS提供了两种分支结构语句（1）if语句（2）swich语句2. 循环结构：让流程代码反复执行3. 顺序结构：按照写代码的先后顺序依次执行...
2021-03-20 01:02:21
176
原创 javascript的运算符
javascript的运算符1. 算数运算符:±*/%;++;–2. 关系运算符:=;;=;!=;!==;>;<;>=；<=3. 赋值运算符：=；+=；-=；/=；%=;*=4. 逻辑运算符:||两种条件，满足其中一种；&&：两种条件必须都要满足：！：取反**逻辑中断逻辑与：**注意逻辑与短路运算：如果表达式1 结果为真，则返回表达式2，如果表达式1为假，那么返回表达式1**逻辑中断逻辑或：**注意逻辑与短路运算：如果表达式1 结果为真，则返回表达式1，如
2021-03-20 00:51:43
35
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人