低头不说一句 - 个人主页动态

05-11 20:31

已编辑

模板字符串是ES6引入的一种新型字符串表示法，使用反引号( ` ) 包裹内容，相比传统字符串具有更强大的功能。1.核心特性多行字符串：直接支持换行。字符串插值：使用 ${ 对象 } 嵌入变量和表达式。标签模板：可以自定义字符串处理函数。1.1 基本语法 // 传统字符串 const name = 'Alice'; const greeting = 'Hello, ' + name + '!'; // 模板字符串 const greeting = `Hello, ${name}!`; 1.2 多行字符串处理 // ES5实现多行字符串 var message = '第一行\n' + '第二行\n...

0 点赞评论收藏

05-06 18:19

中南财经政法大学 Web前端

前端学习25 浏览器缓存（强缓存、协商缓存）和本地缓存

浏览器缓存是性能优化的一个非常重要的指标，而前端缓存也是我们在开发中必不可少的模块。1.浏览器缓存1.1 缓存流程通常来说，浏览器首次加载资源会返回200，并且下载服务器文件，缓存资源及版本号，再次加载资源的时候就可根据资源请求头字段（强缓存&协商缓存）去判断是否使用缓存资源。HTTP Cache 是我们开发中接触最多的缓存，它分为强缓存和协商缓存。强缓存：直接从本地副本比对读取请求头，不去请求服务器，返回的状态码是200。协商缓存：会去服务器对比，若梅该百年才直接读取本地缓存，返回的状态码为304。1.2 强缓存（expires\Cache-Control）强缓存就是像浏览器缓存中查...

0 点赞评论收藏

05-06 16:56

中南财经政法大学 Web前端

前端学习24 http 状态码

1.HTTP状态码HTTP状态码是由三位数字组成的代码，用于表示客户端向服务器发起请求后，服务器对请求的响应状态。这些状态码可以大致分为五类，包括信息性状态码、成功状态码、重定向状态码、客户端错误状态码和服务器错误状态码。1.1 信息性状态码：1xx100（Continue）：客户端应继续其请求。1.2 成功状态码：2xx200（Ok）：请求成功。201（Created）：请求已经被实现，并因此创建了一个新的资源。204（No Content）：服务器成功处理了请求，但没有返回任何内容。1.3 重定向状态码：3xx301（Moved Permanently）：请求的资源已被永久移动到新的URL...

0 点赞评论收藏

05-06 15:36

中南财经政法大学 Web前端

前端学习23 http和https

1.概念HTTP：超文本传输协议（Hyper Text Transfer Protocol）是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。HTTPS：超文本传输安全协议（Hypertext Transfer Protocol Secure，简称：HTTPS）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由 HTTP 进行通信，利用 SSL/TLS 来加密数据包。HTTPS 的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。2.http和https区别HTTP是明文传输，连接很简单，是无状态的。https协议是有SSL...

0 点赞评论收藏

05-03 13:45

中南财经政法大学 Web前端

前端学习22 CSS 伪类和伪元素

1. 伪类伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。伪类由冒号（:）后跟着伪类名称组成（例如，:active）,函数式伪类还包含一对括号来定义参数（例如，:dir（））。1.1 表示状态的伪类:link 所有为访问的链接:visited 所有访问过的链接:hover 鼠标点击标签的状态:activate 鼠标点击标签的状态:focus 标签获得焦点时的样式注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。注意：在CSS定义中，a:active 必须至于 a:hover 之后，才是有效的。 <a href="w...

0 点赞评论收藏

05-02 14:19

中南财经政法大学 Web前端

前端学习21 原型和原型链

原型和原型链都是来源于对象而服务于对象的概念，所以我们要明确一点：JavaScript的一切引用类型都是对象，对象就是属性的集合。1.原型和原型链每一个对象从被创建开始就和另一个对象关联，从另一个对象上继承其属性，这个另一个对象就是原型。当访问一个对象的属性时，先在对象的本身找，找不到就去对象的原型上找，如果还是找不到，就去对象的原型（原型也是对象，也有它自己的原型）的原型上找，如此继续，直到找到为止，或者查找到最顶层的原型对象中也没有找到，就结束查找，返回undefined。这条由对象及其原型组成的链就叫做原型链。原型存在的意义就是组成原型链：引用类型皆对象，每个对象都有原型，原型也是对象，...

0 点赞评论收藏

05-01 19:05

中南财经政法大学 Web前端

前端学习20 垃圾回收机制

在前端中，内存管理是一个非常重要的领域。浏览器的垃圾回收机制（Garbage Collection ,GC）是现在浏览器中的核心的部分之一，它可以自动管理内存的分配与回收，帮助开发者避免手动管理内存，从而减少内存泄露和性能问题的风险。1.垃圾回收机制垃圾回收是一种自动内存管理机制，用于识别和释放不再使用的内存，垃圾回收的核心目标是释放不在使用的内存空间。在浏览器中，当页面中的某些对象不在被需要时，垃圾回收机制会自动将他们从内存中移除，确保不会发生内存泄露。JavaScript是一种内存自动管理的语言，内存管理的核心就是垃圾回收。它主要通过两种方式来检测和释放内存：引用计数（Reference ...

0 点赞评论收藏

05-01 17:54

中南财经政法大学 Web前端

前端学习19 重排与重绘

在前端开发中，CSS性能对页面的加载速度和交互体验起着关键作用，其中重排（Reflow）和重绘（Repaint）机制是影响CSS性能的核心因素。深入理解并有效优化重排与重绘，能显著提升页面性能。在Vue使用环境下，重排和重绘有着独特的触发场景和优化策略。1. 重排（reflow） 和 重绘（repaint）重排：也叫回流，适当DOM的变化影响了元素的集合属性，如宽度、高度、位置、外边距、内边距、边框厚度等，浏览器需要重新计算元素的布局，并重新构建渲染树的过程。重绘：当一个元素的外观发生变化，比如改变元素的 color 、 background - color 、 visibility 、 ou...

0 点赞评论收藏

05-01 16:14

中南财经政法大学 Web前端

前端学习18 requestldleCallback和requestAnimationFrame

requestldleCallback(rAF) 和 requestAnimationFrame(rIC) 都是浏览器提供的异步调度API，但是它们的执行时机和用途完全不同。注意：requestIdleCallback()既不属于宏任务，也不属于微任务。requestAnimationFrame()用途：高优先级更新执行：下一帧渲染前（通常在16.67ms之内）一定执行（下一帧到来时）适合场景：动画、滚动、WebSocket实时数据可视化requestIdleCallback()用途：低优先级任务执行：浏览器空闲时（时间不确定）不一定执行（如果浏览器一直忙）适合场景预加载、日志统计、AI计算、...

0 点赞评论收藏

04-30 21:12

中南财经政法大学 Web前端

前端学习17 事件循环（Event Loop）机制

JavaScript作为一门单线程语言，却能够高效处理异步任务，这一特性使其在处理网络请求、用户交互等场景下表现出色。而这一切的背后，都离不开Event Loop（事件循环）这一核心机制。1.JavaScript的单线程JavaScript是一门单线程语言，这意味着它只有一个主线程用于执行代码。这一设计决策主要是为了简化DOM操作的复杂性，避免多线程可能导致的并发问题。然而，单线程也带来了一个明显的问题：如果某个任务执行时间过长，会导致整个应用"卡住"，无法响应用户交互。为了解决这个问题，JavaScript引入了异步编程模型，而Event Loop就是这个模型的核心机制。...

0 点赞评论收藏

04-29 18:31

中南财经政法大学 Web前端

前端学习16 JavaScript事件监听

在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。事件监听器可以用于响应用户的操作（如点击、鼠标移动、键盘输入等），也可以用于响应浏览器的事件（如页面加载完成、窗口大小改变等）。本文将详细介绍 JavaScript 事件监听的相关知识，并通过丰富的示例帮助你更好地理解。 1.事件监听的概念 事件监听器是一种函数，它在特定事件发生时被调用。事件监听器可以附加到 DOM 元素上，当该元素上发生指定的事件时，事件监听器就会被触发。 2.事件监听的类型 JavaScript 支持多种类型的事件，常见的事件类型包括：  鼠标事件：click, d...

0 点赞评论收藏

04-29 15:57

中南财经政法大学 Web前端

前端学习15 防抖和节流

在前端开发中，处理频繁的事件触发是一项常见任务，例如窗口的 resize、页面滚动的 scroll 事件、用户输入的 keyup 或 keydown 事件等。如果不加以控制，这些事件会频繁触发，从而导致性能问题。因此，防抖（Debounce）和节流（Throttle）这两种技术就显得尤为重要。本文将详细介绍防抖和节流的概念、区别、应用场景以及实现方法。 1.防抖 1.1 防抖概念 防抖是一种延迟执行的技术。它的原理是，当事件被触发时，延迟执行事件处理函数，并且在延迟时间内如果事件再次被触发，则重新开始计时。只有当事件在指定的时间内没有再次触发，事件处理函数才会执行。这样可以避免某些高频率的操作...

0 点赞评论收藏

05-01 18:15

已编辑

中南财经政法大学 Web前端

前端学习14 闭包

1.闭包 闭包是 JavaScript 中的一个核心概念，它允许函数访问其定义时的词法作用域中的变量。这种特性使得闭包在数据封装、回调函数、模块模式等场景中有着广泛的应用。 1.1 闭包的定义： 闭包是指有权访问另一个函数作用域的变量的函数。在JavaScript中，闭包可以通过函数嵌套和变量应用实现。 function a() { let x = '我在outer函数里!'; function b() { console.log(x); } return b; } const c = a(); c(); // 输出: 我在outer函数里!  在这个例子中，b函数引用了x变量，因此JavaS...

0 点赞评论收藏

04-27 21:24

中南财经政法大学 Web前端

前端学习13 git使用

1.git 概述 Git 是一个分布式版本控制系统，用于跟踪文件的变化，尤其是程序代码的变化。它由 Linus Torvalds（Linux 操作系统的创建者）于 2005 年开发。Git 允许开发者在本地创建代码仓库，进行文件修改、提交等操作，直到准备好与远程仓库同步。Git 提供强大的分支管理功能，可以在不干扰主分支的情况下开发新功能或修复 bug。 Git 与其他版本控制系统的区别 集中式版本控制系统（如 SVN）：所有的代码版本保存在一个中央服务器中。每次操作都需要连接到服务器。 分布式版本控制系统（如 Git）：每个开发者的工作站都有完整的代码历史记录，可以脱离服务器工作，直到需要同...

0 点赞评论收藏

04-22 20:18

中南财经政法大学 Web前端

前端学习12 pinia 和 vuex 状态管理

在现代前端开发中，状态管理是一个至关重要的方面。尤其是在大型应用中，如何高效、清晰地管理状态不仅影响着代码的可读性和可维护性，还对应用的性能有直接的影响。在 Vue3 中，Vuex 和 Pinia 是两种主要的状态管理库，这两者各有不同的设计理念和使用方式。 1.vuex Vuex 是 Vue.js 官方的状态管理库。它采用了 Flux 的思想，提供了一个集中式存储，允许组件以不同的方式共享状态。Vuex 的核心概念包括 State、Getters、Mutations 和 Actions。 其中： 1.State: 应用的状态存储。 2.Getters: 类似于计算属性，用于计算基于状态的派生...

0 点赞评论收藏

创作者周榜

关注他的用户也关注了：