小帅的编程笔记-CSDN博客

原创在Vue中为什么v-for一定要加key

如果你已经很熟悉Vue，一定也会很熟悉v-for指令。如果用过其他的前端框架的话，它们也都提供了在HTML模板中循环数据标记的方法。今天这篇文章让我们搞明白为什么key属性对于v-for这么重要。我在刚开始写Vue时，也很少去写key 属性，因为它也不是必需的，不写也不会报错，也不会耽误数据渲染。但当项目中配了ESLint的规则，必需要写key时，我就统一的都把index索引作为key，然后接着开发，就像下面这样：<h1 v-for="(item, index) in list" :key="in

2021-11-10 22:34:32 3112

原创 JS DOM编程笔记 - 原生表单（二四）

今天我们来学习 JavaScript 表单 API：访问表单、获取元素的值、验证表单数据和提交表单。基础表单在 HTML 中创建表单，使用 <form> 元素：<form action="/signup" method="post" id="signup"></form><form> 元素有两个重要的属性：action 和 method。action 指定处理表单提交的 URL。method 指定用于提交表单的 HTTP 方法。是 po

2021-11-09 22:54:55 421

原创 JS DOM编程笔记 - MutationObserver是干什么的（二三）

今天我们来学习如何使用 JavaScript的 MutationObserver API 来监听对 DOM 树所做的更改。MutationObserver 简介MutationObserver API 允许我们监视对 DOM 树所做的更改。当 DOM 节点发生变化时，我们可以调用回调函数对变化做出反应。使用 MutationObserver API 的基本步骤是：首先，定义DOM变化时将执行的回调函数：function callback(mutations) { // }其次，创建一个

2021-11-08 22:51:12 289

原创 JS DOM编程笔记 - 自定义事件（二二）

今天我们来学习 JavaScript 中的自定义事件，如何创建自定义事件，如何监听调用，为什么要用到自定义事件。JavaScript 自定义事件简介下面函数通过将元素的背景颜色改为黄色来突出显示元素：function highlight(elem) { const bgColor = 'yellow'; elem.style.backgroundColor = bgColor;}要在修改背景颜色后执行一段逻辑，我们可能会使用回调函数：function highlight(elem, c

2021-11-07 21:57:23 149

原创 JS DOM编程笔记 - dispatchEvent() 代码触发事件（二一）

在JavaScript中绑定的点击、键盘等事件，如果要触发它，需要用户手动去触发它。今天我们将通过代码的方式来触发这些事件。我们将会用到Event 构造函数和 element.dispatchEvent()方法。使用代码来生成事件的步骤如下：首先用Event 构造函数创建一个新的 Event 对象。然后，使用 dispatchEvent() 方法触发事件。Event 构造函数使用Event 构造函数来创建一个新事件：let event = new Event(type, [,option

2021-11-06 22:18:24 1798 2

原创 JS DOM编程笔记 - 理解事件委托（二十）

今天我们来了解什么是事件委托，事件委托使我们向父元素绑定一个事件处理程序即可，而无需向子元素绑定多个事件。通过事件捕获和冒泡使我们实现最强大的事件处理模式，——事件委托。什么是事件委托假设我们有一个列表<ul id="menu"> <li><a id="home">首页</a></li> <li><a id="dashboard">工作台</a></li> <li>&l

2021-11-05 21:55:24 92

原创 JS DOM编程笔记 - scrollIntoView()（十九）

今天我们来使用scrollIntoView() 方法来将元素滚动到视口的指定位置。假设有一个元素列表，并且希望某个元素滚动到视口顶部，在没有scrollIntoView() 之前我们可能会用锚点链接，或者使用JavaScript去计算，然后去设置元素的scrollTop值来实现滚动。现在我们可以使用 Element.scrollIntoView()方法。语法element.scrollIntoView() 接受一个布尔值或一个对象：element.scrollIntoView(alignToTop

2021-11-04 22:06:54 503

原创 JS DOM编程笔记 - 滚动事件（十八）

今天我们来学习如何在JavaScript中处理滚动事件，如何优化滚动事件的性能。滚动事件简介当我们滚动页面或者在某个元素上滚动时就会触发滚动事件，我们可以通过以下方式触发滚动事件使用右侧滚动条使用鼠标滚轮点击锚点链接调用JS函数要监听滚动事件，使用addEventListener()方法，事件名称为scroll，代码如下：targetElement.addEventListener('scroll', (event) => { // 处理滚动事件});或者给目标元素的on

2021-11-03 21:39:56 2213

原创 JS DOM编程笔记 - 键盘事件（十七）

曾经遇到一个面试题，如何判断用户按下了回车键？回车键的keyCode是什么？当时回答了大体流程，没有答出keyCode是什么，回来拿电脑跑了一下，是13。今天我们来学习键盘事件的处理。键盘事件介绍当我们使用键盘时就会触发键盘事件，主要有下面三个键盘事件：keydown – 当按下键盘上的一个键时触发，当按住这个键时它会重复触发。keyup – 当松开键盘上的一个键时触发。keypress – 当按下 a、b 或 c 等字符键时触发，按下左箭头键、home 键等不会触发，当按住键盘上的

2021-11-02 20:55:36 218

原创 JS DOM编程笔记 - 详解鼠标事件（十六）

今天我们来学习 JavaScript 中的基本鼠标事件及其属性，包括9个鼠标事件和一些有用的事件对象的属性。Mouse 鼠标事件介绍当我们使用鼠标与页面上的元素进行交互时就会触发鼠标事件，DOM 3级定义了九个鼠标事件。mousedown, mouseup 和 click当我们点击一个元素时，会按照下面顺序触发至少3个鼠标事件当我们在元素上按下鼠标时，mousedown 会触发当我们在元素上松开鼠标时，mouseup 会触发。当元素触发了一个mousedown 和一个mouseup ，就会触

2021-11-01 22:12:36 669

原创 JS DOM编程笔记 - 详解load事件（十五）

今天我们来学习JavaScript中的load事件，包括window的load事件，图片、script的load事件。window load事件对于window对象的load事件来说，当整个HTML页面的所有依赖资源（JS文件、CSS文件、图片等）加载完成时将会触发。处理load事件，可以使用addEventListener() 方法来注册一个事件监听器：window.addEventListener('load', (event) => { console.log('页面已完成加载');

2021-10-31 21:48:32 1614

原创 JS DOM编程复习笔记 - DOMContentLoaded、load、beforeunload 和 unload（十四）

今天我们来学习与页面加载相关的事件，包括 DOMContentLoaded、load、beforeunload 和 unload。简介当我们打开一个页面时，会依次发生以下的事件：DOMContentLoaded – 浏览器完全加载HTML并构建DOM树。但并没有加载外部样式和图片等外部资源。这时我们可以查找DOM节点或者初始化页面等。load – 浏览器完全加载了 HTML 以及图片和样式等外部资源。当我们离开一个页面时，会依次发生以下事件：beforeunload - 在页面被关闭前将触

2021-10-30 21:48:13 314

原创 JS DOM编程复习笔记 - 三种事件绑定方式（十三）

今天我们将学习在JavaScript 中的三种绑定事件的方法。这在面试中也是一道必考题目。目录行内绑定DOM 0级事件绑定DOM 2级事件绑定1）行内绑定事件行内事件名称通常是以on开头，比如点击事件为onclick，要将事件处理程序和元素关联，我们在元素上增加对应的事件属性，比如：<button onclick="alert('点击我!')">保存</button>当然事件处理程序可以调用已定义的函数。例如：<script> functio

2021-10-29 20:29:49 200

原创 JS DOM编程复习笔记 - 事件初识（十二）

今天我们将了解JavaScript DOM事件、事件模型以及如何处理事件。目录事件初识，addEventListener()理解事件流什么是事件冒泡什么是事件捕获DOM 2级事件流事件对象preventDefault()stopPropagation()事件初识事件是用户在浏览器中发生的各种操作，浏览器会反馈给我们。比如，用户点击了网页上的按钮，我们可以通过响应此事件来显示一个对话框。每个事件都可能有一个事件处理程序，它是事件触发时执行的代码块。事件处理程序也称为事件监听器，

2021-10-28 20:52:39 111

原创 JS DOM 编程复习笔记 -- 操作style样式、class、getComputedStyle（十一）

今天我们来复习如何使用JavaScript DOM来进行内联样式修改，CSS class的修改，以及获取元素的真实样式，获取元素的真实宽高等。目录element.stylewindow.getComputedStyle()element.classNameelement.classList设置内联样式我们使用元素 style 属性来操作元素的内联样式。style属性返回CSS属性的CSSStyleDeclaration只读对象，例如要将元素的color设置为红色element.styl

2021-10-27 21:08:21 318

原创 JS DOM 编程复习笔记 -- 属性操作（十）

今天我们来复习HTML属性和DOM对象属性之间的关联和使用。当浏览器加载HTML页面时，会根据文档的DOM节点生成相应的DOM对象。比如，下面的HTML中包含一个input元素<input type="text" id="username">浏览器会生成一个HTMLInputElement对象input元素有两个属性type属性的值为textid属性的值为username生成的HTMLInputElement对象也将具有相应的属性input.type为textinpu

2021-10-26 21:33:22 181

原创 JS DOM 编程复习笔记 -- insertAdjacentHTML（九）

今天我们来复习最后一个关于DOM操作的API，insertAdjacentHTML()，用来将HTML插入到页面中。同样还有两个差不多的方法，insertAdjacentElement()和insertAdjacentText()，他们的用法差不多，只是第二个参数有些区别。语法insertAdjacentHTML() 是 Element 接口的一个方法，任何元素都可以调用。insertAdjacentHTML() 方法解析一段 HTML 文本并将结果节点插入到 DOM 树的指定位置。element.

2021-10-25 19:59:32 147

原创 JS DOM 编程复习笔记 -- replaceChild、cloneNode、removeChild（八）

今天我们继续来去复习DOM操作的三个API，分别为replaceChild、cloneNode、removeChild，替换节点、克隆节点、删除节点，下面一个个来看它们的语法以及使用案例。replaceChild()replaceChild()用来替换DOM中的节点语法：parentNode.replaceChild(newChild, oldChild);例子<ul id="menu"> <li>首页</li> <li>服务</l

2021-10-24 18:55:42 289

原创 JS DOM 编程复习笔记 -- insertBefore、insertAfter、append、prepend（七）

今天我们来继续来复习DOM的一些插入方法，insertBefore()，append()和prepend()方法。前面我们只用到过一个appendChild()方法。我们一个个看语法和示例，包你看完就会。insertBefore()insertBefore()用来在指定的DOM节点前插入DOM元素。语法：parentNode.insertBefore(newNode, existingNode);parentNode为existingNode的父节点existingNode为已经存在的节点n

2021-10-23 21:27:24 829

原创 JS DOM 编程复习笔记 -- innerHTML vs createElement（六）

在DOM编程中，innerHTML和createElement都可以往页面中去追加元素，那么它们之间有什么区别？下面让我们来一步一步看#1) createElement 性能更好假如我们有一个div，然后需要往里插入元素createElement使用createElement来创建元素，然后使用appendChild来插入到页面中<div class="container"></div><script>let div = document.querySe

2021-10-22 20:03:40 190

原创 JS DOM 编程复习笔记--appendChild、textContent、innerText、innerHTML（五）

上一篇文章中我们使用appendChild()方法将我们创建的DOM元素插入到指定的父元素的最后位置。今天我们继续来看看这几个API，textContent、innerText、innerHTML，它们都是比较常用的，用来获取和设置HTML的内容或者标签。下面我们从appendChild开始appendChild()我们来复习一下语法parentNode.appendChild(childNode);appendChild()将传入的childNode插入到parentNode的最后一个子元素的后

2021-10-21 20:36:05 421 2

原创 JS DOM 编程复习笔记--创建元素、插入元素（四）

今天我们来学习使用JS来动态创建DOM元素并插入的已有的HTML中。要创建一个HTML元素，使用 document.createElement() 方法。let element = document.createElement(htmlTag);document.createElement() 方法接受一个HTML标签名称并返回Element 类型的新节点。1) 创建一个div元素我们先来搞一个空的HTML文档<!DOCTYPE html><html><hea

2021-10-20 20:52:39 647

原创 JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）

今天我们来复习DOM中的获取父元素、子元素和兄弟元素的API，它们主要有parentNode、firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children、nextElementSibling、nextSibling、previousElementSibling、previousSibling等。目录获取父元素 - parentNode获取子元素 -firstChild、firstElementChild

2021-10-19 20:08:17 1579

原创 JS DOM编程复习笔记--查找元素（二）

今天我们来复习所有在页面中查找元素的DOM方法。目录getElementById() – 通过ID查找元素getElementsByName() – 通过标签上的name属性来查找元素getElementsByTagName() – 通过标签名称查找元素getElementsByClassName() – 通过元素的class查找元素querySelector() – 通过CSS选择器查找元素querySelectorAll() - 同上getElementById()这应该是最常用的

2021-10-18 20:10:10 325

原创 JS DOM 编程复习笔记（一）

今天我们来复习JavaScript中的文档对象模型----DOM。什么是DOMDOM是三个英文单词的缩写，Document Object Model 简称为DOM，是用来操作HTML和XML的编程接口（API）。DOM文档像一颗节点树，并且提供了API，让我们可以添加、修改和删除文档中的节点。注意，DOM并不是JavaScript所提供的，DOM是一种跨平台且独立于语言的用来操作HMTL和XML的方式。文档中的节点DOM将HTML表示为树形的节点层次结构，比如下面的HTML<html&g

2021-10-17 19:55:57 184

原创什么是 TypeScript 泛型编程

前端的程序员可能对泛型不是很了解，了解Java这种强类型语言可能会知道泛型，使用泛型可以编写动态可重用的TS代码，在TS中泛型一般用于类、接口和函数。今天我们就来学习在TypeScript中如何去使用泛型，以及一般会用到泛型的场景。1. 快速理解泛型可能很多熟悉JS开发的前端搞不懂泛型是啥，下面我们通过一个最简单的例子来明白泛型。这两个功能相同但只是入参和返回的类型不同，如果在TS中不使用泛型的话，就要定义两个函数，只是它的类型不同。// 数字类型function fun(args: numbe

2021-10-16 21:02:42 225

原创 TypeScript 如何进行类型转换

今天，我们来学习TypeScript中的类型转换，我们可以把变量从一种类型转换为其它的类型。在JavaScript没有类型转换的概念，因为JavaScript本身就是动态类型的，我们随时都可以赋给变量的不同类型的值。然而在TypeScript中每个变量都有一个类型，通过类型转换我们可以把变量从一种类型转换为另一种类型。在TypeScript中，我们通过使用as关键字或者<>运算符来进行类型的转换。使用as关键字类型转换假设我们有一个HTML，上面有一个input元素<input

2021-10-15 21:07:07 2943 2

原创 Vue项目性能优化实战总结，7个实用方法

你知道你的项目的首次加载时间需要多久吗？你有给自己的项目做过性能优化吗？据统计53%的用户不会等待超过3秒就会关闭掉网页，所以对于项目的性能优化尤为的重要。闲话少说，今天我们来详细了解如何优化Vue项目的性能。分析项目bundle大小打包后的文件大小直接影响我们访问的加载速度，所以我们要知道哪些打包文件存在性能问题。查看bundle大小主要有两种方法report使用webpack-bundle-analyzer来生成一个报告，可以清晰直观的看出每个打包后文件的大小我们在Vue项目的packa

2021-10-14 22:51:48 2927 2

原创 JavaScript Reflect 学习笔记

今天我们来学习JavaScript中的反射和ES6的Reflect对象。什么是反射？反射机制是指在程序运行期间能够获取自身的信息，比如一个对象能够在运行时就知道自己有哪些属性和方法。在ES6之前，JavaScript已经具有反射的特性，即使社区或者规范没有称之为反射特性。比如Object.keys(), Object.getOwnPropertyDescriptor(), Array.isArray() 等这些方法都具有反射特性。比如我们可以通过for…in语句可以查看对象的所有属性和方法for

2021-10-13 23:37:43 226

原创几分钟内部署一个TS Node.js应用

作为全栈开发者，创建项目是很有趣的，可以设计架构，头脑风暴，开发，但在开发结束之后呢，我们就要部署或发布应用。那么如何正确快速的部署一个TS Node.js项目呢，今天我们来搞定它。创建一个TS Node.js应用如果你已经熟悉创建TS Node.js项目，可以直接跳到“部署发布应用”部分初始化Node.js项目：在我们团队，我们非常喜欢TS，并且在我们的所有新项目中都会使用TS，因此创建一个TS项目并不新鲜。让我们从最基本的开始：npm init 初始化一个Node.js项目，使用-y参数可

2021-10-12 22:37:05 640

原创 JavaScript中 Iterator 是什么

今天我们来学习JavaScript中的Iterator（迭代器），它是个什么东西？能干什么事情？for循环的问题假设我们有一个数组，需要使用数组中的每一个元素，我们就需要写个for循环，像下面这样let ranks = ['A', 'B', 'C'];for (let i = 0; i < ranks.length; i++) { console.log(ranks[i]);}使用for循环要先定义个变量i来作为数组的索引，只要i不超过数组元素的数量，每次i都会自增。这段代码

2021-10-11 21:57:31 628

原创 JavaScript ES6 Symbol 终极教程

今天我们来学习JavaScript新的原始类型Symbol，我们可以使用Symbol来创建唯一值作为对象属性或者值，也可以通过Symbol的well-known来修改JS语言内部的逻辑。创建SymbolES6新增了Symbol作为原始数据类型，和其他原始数据类型，像number、boolean、null、undefined、string，symbol类型没有文字形式。创建一个symbol，我们要使用全局函数Symbol()let s = Symbol('foo');Symbol() 函数每次调用

2021-10-10 18:10:19 272

原创全面理解ES6模块化编程

今天我们来学习ES6的模块化系统，如何从模块中导出变量、函数、类，在其他模块中去使用。在ES6的模块系统中，每个JS文件可以理解为一个模块，模块代码以严格模式执行，所以模块中的变量、函数不会添加全局作用域中。在ES6之前，我们可能需要使用require.js来实现模块化编程，在Node.js中使用commonjs规范来模块化编程，JS并没有一个统一的规范，所以在ES6推出了全新的模块化方案。在浏览器中运行创建一个文件 message.jsexport let message = 'ES6 Modu

2021-10-09 23:36:00 593

原创一文明白ES6新数据类型 Map

今天我们来学习ES6中的另一个新数据类型Map，和Set数据结构不同，Map主要来存储key-value结构数据，让我们来看看它和JS中的对象有何不同。Map 简介在没有ES6之前，我们要用到key-value数据结构时，经常会使用对象，因为对象可以将key对应的值设置成任何数据类型。然而使用对象也有一些问题：JS中的对象都有prototype属性对象的key必须是字符串或者symbol，不能使用对象作为key对象没有表示对象长度的属性，像size或者lengthES6提供了新的数据类型M

2021-10-08 20:41:20 263

原创一文明白ES6新数据类型 Set

今天是国庆假期的最后一天，明天就上班了，不知道大家玩的开心吗今天我们来学习ES6的新数据类型Set，简单来说Set像数组一样存储集合数据，但Set只会存储唯一不重复的数据。Set 简介ES6提供了一种新的数据类型叫Set，来让我们存储一组具有唯一不重复的数据，创建Set，我们可以使用newlet setObject = new Set();Set构造函数接受一个Iterators object（可迭代对象），之后会把这些数据添加到Set中。let setObject = new Set(ite

2021-10-07 23:43:08 119

原创 JavaScript Promise的错误处理（五）

今天我们来学习在Promise中如何处理异常错误。假设有一个getUserById函数用来获取用户，它返回一个promise。function getUserById(id) { return new Promise((resolve, reject) => { resolve({ id: id, username: 'admin' }); });}throw new Error在返回promise之前，如果id参数不合法throw一个异常

2021-10-06 23:01:02 701

原创 JavaScript Promise.race()学习笔记（四）

今天我们来学习Promise.race()方法，race翻译过来是赛跑的意思，与Promise.all()的不同，all是等待所有promise完成后，而race是等最快的promise完成后就会返回。介绍Promise.race()方法接收一个数组形式的promise，并且返回一个promise对象，一旦数组中有一个promise被resolve或者reject就会立刻返回。语法和Promise.all()差不多Promise.race([promise1, promise2, promise3]

2021-10-05 21:51:39 322

空空如也

空空如也