Ajax 与 Vue 框架应用点——随笔谈

news2024/12/24 3:13:30

老式

  • 在老式的技术中，一个网页通常由前端工程师直接使用 HTML、CSS、JavaScript 编写而成

  • 这种方式的优点很明显：简单粗暴，方便工程师以简单的思维完成工作

  • 当然，缺点也很明显，包括但不限于：

    • 直接原生开发，对工程师技术要求高
    • 每次从零开始，开发效率底下，代码复用性较差
    • 前端项目构建的开放性较大，不方便统一管理

  • 聪明的程序员们怎么会忍受这些？

  • 于是，在众多大神的努力下，新式技术应运而生，百家争鸣

新式

Ajax 技术解决获取资源的问题

引入

  • 在过去，哪怕是现在，依然有很多网页是通过刷新整个页面，进行加载并重组资源
  • 这种技术很好，没有问题。
  • 然而，我们有新的需求：在一些场景下，我们并不希望整个页面重新加载，而只是希望页面里面的某个区域的内容自己更新（比如：当你在百度搜索框输入内容时，下面的提示词会不断变化）
  • 这时候，我们就要用到 Ajax 技术。

详情

Ajax 技术，值得并不是一个具体的技术，而是一个技术统称，一个笼统的概念。

这种技术有什么特点呢？

  • 异步特性
  • 发送资源请求，监听响应
  • 接受资源响应，作出渲染

简单来说，如果你能实现上面的特点，就可以说你使用了 Ajax 技术

下面简单介绍几种实现 Ajax 技术的方式

原生方式：通过原生 JavaScript 技术，实现 Ajax。具体操作是通过 XMLHttpRequest (XHR)发送资源请求 + Promise 处理响应（包括：响应中、响应成功、响应失败）。其中，XMLHttpRequest 负责资源的获取，Promise 负责异步处理结果

使用框架：使用别人开发的框架，实现 Ajax。比如使用 axios 框架，很方便的实现 “异步请求，处理响应”。

新语法糖 + axios框架：ES2017 引入了新的语法糖 async 和 await，它们用于简化 JavaScript 中异步代码的编写。Ajax 技术的重点就是"异步" + “资源（请求资源，处理响应）”，通过新语法糖，我们很方便的解决了 “异步” 的问题，剩下的就是 “资源” 的问题，所以我们还需要借助 axios框架获取资源的这个特性（当然，使用XMLHttpRequest获取资源也可以）

// 定义一个异步函数
async function fetchUserData() {
  try {
    // 使用 await 等待 axios 请求完成
    const response = await axios.get('https://api.example.com/user');
    // 处理响应数据
    console.log(response.data);
  } catch (error) {
    // 处理错误
    console.error(error);
  }
}

// 调用异步函数
PromiseObj = fetchUserData();
  • 通过 async 与 await 语法糖，写一个异步函数
  • await 附近的变量存储的是什么？
  • response 变量存储的是 axios.get 调用成功后返回的结果。这个结果不是 Promise 对象，而是 Promise 被解决后传递给 .then() 方法（或者在 await 表达式中）的值。在 axios 的案例中，这个值通常是包含服务器响应数据的对象。
  • 异步函数的返回值是什么？
  • **这个异步函数总是返回一个 Promise 对象。**无论 async 函数内部的执行是否完成，它都会立即返回一个 Promise 对象。这个 Promise 对象代表了异步函数的最终完成（或失败）状态。
  • 如果 async 函数内部的所有操作都成功完成，并且没有抛出任何错误，那么返回的 Promise 对象最终会被解决（即成功状态）。
  • 如果 async 函数内部抛出了错误，并且这个错误没有被 try...catch 捕获，那么返回的 Promise 对象最终会被拒绝（即失败状态）。
  • 异步函数的返回值有什么用？
  • **异步函数的返回值是一个 Promise 对象，它可以进行链式调用。**比如：你可以使用 .then() 方法来链式调用后续的操作，这在需要按顺序执行多个异步操作时很有用，也可以使用 .catch() 方法来捕获异步函数中可能发生的错误。
  • 在另一个异步函数中，你可能需要等待多个异步操作完成后再继续执行。
async function复合材料() {
  const result1 = await asyncFunction1();
  const result2 = await asyncFunction2();
  // 使用 result1 和 result2
}
  • 组合多个异步操作，使用 Promise.all() 来同时处理多个异步函数的返回值。
Promise.all([asyncFunction1(), asyncFunction2()])
  .then(results => {
    // 处理所有结果
  })
  .catch(error => {
    // 处理第一个失败的 promise 的错误
  });
  • 可以不关心返回值（如果异步函数内部已经处理了所有的逻辑，包括错误处理，那么外部可能不需要关心返回的 Promise）
async function doSomething() {
  try {
    const result = await someAsyncOperation();
    // 处理 result
  } catch (error) {
    // 处理错误
  }
}

// 调用 doSomething()，不需要关心返回的 Promise
doSomething();

Vue 解决数据绑定的问题

在前端中，页面要展示的数据和 js 这种动态的数据，往往需要进行绑定的，比如，我们通常会用 addEventListener 方法进行监听某个操作，如果执行了操作，就更新数据。这个本质上其实就是为了将 js 动态数据和 页面的静态数据进行绑定。由静态数据到动态数据，往往意味着用户输入的静态数据要进行动态处理；而由动态数据到静态数据，往往意味着来自服务器的数据给到了 动态的 js 处理了，就差渲染到页面的这最后一步。

上面的问题其本质就是数据的绑定问题。通常，前端工程师在写项目的时候，往往需要写大量的 dom 操作：“获取元素对象” + “将此对象数据修改”（由动到静） ，或者 “监控用户数据的修改” + “执行计算操作，或者上传服务器”（由静到动）；而如果前端工程师使用了 Vue 框架之后，这个问题就大大被削弱了，因为 vue.js 其中一大特点就是数据绑定（包括：双向数据绑定、单向数据绑定）

https://img-blog.csdnimg.cn/2f9fb673cb5446e9b84bf6fa6c12902e.png

Vue 单页面与路由机制解决加载流畅的问题

question：为什么使用Vue所制作的网页是单页面的呢？

answer：https://blog.csdn.net/qq_53715003/article/details/120658699

vue 单页面本质就是：通过 vue 环境编写代码，通过 vue 构建工具 将vue代码 转变成 类似原生的 html、css、js 组成的浏览器可识别的代码，然后大部分资源都已经发送到客户端，客户端的浏览器运行 vue.js ，就形成了类似 本地小型服务器一样的 东西，而说它是单页面，原因是因为它本质就只有一个 html 文件，只是通过 js 技术，进行页面内容的切换，注意！是页面内容的切换，是内容的切换，本质上页面还是哪个页面，所以在我们使用 vue 中的路由机制时，它大部分都不用请求资源，直接利用本地的资源包，通过 vue.js 将页面的内容改变即可。

所以，大部分普通网站一般都是使用按需加载，就是平常我们刷新一些，加载一个页面，跳转一下，又跳到新的页面，这些都是按需加载的。而 vue 构建的单页面应用网站，当你访问它的时候，如果没有优化的话，大部分情况是你第一次访问此网站时候，需要加载大量的资源到本地，然后 vue.js 运行在浏览器，形成一个类型小型服务器帮助你切换页面和页面效果。之后你第二次访问，基本上速度是很快的，因为只需要少量资源补充，大部分内容你早就有了。

以下是 AI 回答的内容：

  1. Vue代码转变成浏览器可识别的代码： 使用Vue构建工具（如Vue CLI）可以将Vue单文件组件（.vue文件，包含模板、脚本和样式）编译成浏览器可以解析的HTML、CSS和JavaScript代码。这个过程通常涉及打包工具（如Webpack）来处理模块化和资源加载。
  2. 单页面本质： 单页面应用（SPA）确实只有一个HTML文件。当用户首次访问网站时，这个HTML文件会被加载，并且所有必要的JavaScript、CSS和其他资源也会被下载到用户的浏览器中。
  3. 页面内容切换： 当用户在应用内部进行导航时，Vue Router会拦截浏览器的默认行为，阻止页面刷新，并通过JavaScript动态地替换页面的内容。这是通过替换<router-view>组件中的内容来实现的，而不是重新加载整个页面。
  4. 资源加载： 在单页面应用中，一旦初始资源被加载，用户在应用内的进一步导航通常不需要再次下载HTML文件或其他资源，因为它们已经被缓存了。只有当需要新的组件或数据时，才会进行额外的资源请求。
  5. 首次加载与后续访问： 首次访问单页面应用时，由于需要加载整个应用框架和初始视图所需的资源，可能会有较长的加载时间。但是，一旦资源被缓存，用户在后续访问时，应用可以快速加载，因为大部分资源已经存在于本地。
  6. 与普通网站的对比： 传统多页面应用（MPA）每次页面跳转都需要从服务器加载新的HTML文件，而单页面应用则避免了这种重复的资源加载，通过JavaScript动态更新视图。

值得注意的是，为了优化用户体验和提高性能，开发者通常会采取一些措施，比如代码分割（code splitting）、懒加载（lazy loading）和资源预加载（preloading），以确保应用即使在首次加载时也能快速响应。

Vue 解决项目规范与代码复用的问题

我们在上面粗略的介绍了 vue 的全貌，接下来在这里，我们就进入它的开发环境进行介绍。

Vue.js 框架提供了一系列的特性和最佳实践来帮助开发者解决项目规范和代码复用的问题。以下是一些方法和工具：

项目规范

  1. Vue CLI:
    • Vue CLI 提供了一套预设的项目结构和配置，帮助开发者快速搭建符合Vue最佳实践的项目框架。
    • 它还允许自定义配置，以便于团队根据特定需求来调整项目规范。
  2. ESLint:
    • 通过集成ESLint，Vue CLI可以在开发过程中实时检查代码质量，确保代码风格的一致性。
    • ESLint规则可以根据团队的编码习惯进行配置。
  3. EditorConfig:
    • 通过EditorConfig文件，可以统一不同开发者的编辑器配置，如缩进风格、换行符等。
  4. Style Guide:
    • Vue官方提供了Vue风格指南，建议开发者遵循，以保持代码的一致性和可维护性。
  5. 组件库和命名约定:
    • 组件命名约定可以确保组件的清晰性和可预测性。
    • 使用统一的组件库，如Vuetify、Element UI等，可以保持UI的一致性。

代码复用

  1. 组件化:
    • Vue鼓励开发者将UI拆分成可复用的组件，每个组件包含自己的逻辑和样式。
    • 组件可以跨项目复用，只需导入即可。
  2. Mixins:
    • Mixins允许开发者封装可复用的代码片段，然后在多个组件中混入使用。
    • 但要注意过度使用Mixins可能会导致代码难以追踪和维护。
  3. Vuex:
    • Vuex是Vue的官方状态管理库，它允许跨组件共享状态。
    • 通过Vuex，可以集中管理应用的状态，减少重复的状态逻辑。
  4. 自定义指令:
    • 自定义指令可以将可复用的行为抽象出来，用于不同的元素和组件。
  5. 插件:
    • Vue插件提供了一种方式来全局添加功能，如全局方法、过滤器、指令等。
    • 可以将常用的功能封装成插件，以便在不同项目中复用。
  6. 插槽（Slots）:
    • 插槽允许开发者向组件内部传递内容，从而增加组件的灵活性。
  7. HOC（Higher-Order Components）:
    • 高阶组件是一个函数，接收一个组件作为参数，返回一个新的组件。
    • 它可以用于封装可复用的逻辑和功能。

通过上述方法和工具，Vue.js能够有效地解决项目规范和代码复用的问题，帮助开发者构建高效、可维护的Vue应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2240578.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

鸿蒙动画开发06——打断动画

鸿蒙动画开发06——打断动画

1、前 言 UI界面除了运行动画之外&#xff0c;还承载着与用户进行实时交互的功能。当用户行为根据意图变化发生改变时&#xff0c;UI界面应做到即时响应。 例如用户在应用启动过程中&#xff0c;上滑退出&#xff0c;那么启动动画应该立即过渡到退出动画&#xff0c;而不应该…
阅读更多...
vue2和vue3的区别详解

vue2和vue3的区别详解

vue2 VS vue3 对比vue2vue3配置脚手架cmd命令行可视化方式创建脚⼿架组件通信props、$emit、provide、$arrts、EventBus等props、$emit、provide、inject、arrts等数据监听watch,computedwatch,watchEffect,computed双向绑定Object.definePropertyProxyAPI⽣命周期四个阶段befo…
阅读更多...
Spring Cloud Eureka 服务注册与发现

Spring Cloud Eureka 服务注册与发现

Spring Cloud Eureka 服务注册与发现 一、Eureka基础知识概述1.Eureka两个核心组件2.Eureka 服务注册与发现 二、Eureka单机搭建三、Eureka集群搭建四、心跳续约五、Eureka自我保护机制 一、Eureka基础知识概述 1.Eureka两个核心组件 Eureka Server &#xff1a;服务注册中心…
阅读更多...
用MVVM设计模式提升WPF开发体验：分层架构与绑定实例解析

用MVVM设计模式提升WPF开发体验：分层架构与绑定实例解析

MVVM&#xff08;Model-View-ViewModel&#xff09;是一种架构模式&#xff0c;广泛应用于现代前端开发&#xff0c;尤其是在微软的WPF&#xff08;Windows Presentation Foundation&#xff09;应用程序中。它旨在通过将视图&#xff08;UI&#xff09;与业务逻辑&#xff08;…
阅读更多...
飞牛云fnOS本地部署WordPress个人网站并一键发布公网远程访问

飞牛云fnOS本地部署WordPress个人网站并一键发布公网远程访问

文章目录 前言1. Docker下载源设置2. Docker下载WordPress3. Docker部署Mysql数据库4. WordPress 参数设置5. 飞牛云安装Cpolar工具6. 固定Cpolar公网地址7. 修改WordPress配置文件8. 公网域名访问WordPress 前言 本文旨在详细介绍如何在飞牛云NAS上利用Docker部署WordPress&a…
阅读更多...
论文笔记 SuDORMRF：EFFICIENT NETWORKS FOR UNIVERSAL AUDIO SOURCE SEPARATION

论文笔记 SuDORMRF：EFFICIENT NETWORKS FOR UNIVERSAL AUDIO SOURCE SEPARATION

SUDORMRF: EFFICIENT NETWORKS FOR UNIVERSAL AUDIO SOURCE SEPARATION 人的精神寄托可以是音乐&#xff0c;可以是书籍&#xff0c;可以是运动&#xff0c;可以是工作&#xff0c;可以是山川湖海&#xff0c;唯独不可以是人。 Depthwise Separable Convolution 深度分离卷积&a…
阅读更多...
【HarmonyOS】鸿蒙系统在租房项目中的项目实战（一）

【HarmonyOS】鸿蒙系统在租房项目中的项目实战（一）

从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…
阅读更多...
/// ts中的三斜线指令 | 前端

/// ts中的三斜线指令 | 前端

第一次看到注意到这行代码&#xff0c;不知道的还以为是注释呢&#xff0c;查了资料才知道这是typescript中的三斜线指令&#xff0c;那有什么作用呢&#xff1f; 1. 这行代码是TypeScript中的一个三斜线指令&#xff08;Triple-Slash Directive&#xff09;&#xff0c;用于…
阅读更多...
学习日记_20241110_聚类方法（K-Means）

学习日记_20241110_聚类方法（K-Means）

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…
阅读更多...
SMA-BP基于黏菌算法优化BP神经网络时间序列预测

SMA-BP基于黏菌算法优化BP神经网络时间序列预测

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…
阅读更多...
ssm103宠物领养系统+vue(论文+源码)_kaic

ssm103宠物领养系统+vue(论文+源码)_kaic

毕业设计&#xff08;论文&#xff09; 宠物领养系统的设计与实现 学生姓名&#xff1a; 二级学院&#xff1a; 班级名称&#xff1a; 指导教师&#xff1a; 年 月 日 录 摘 …
阅读更多...
Elasticsearch如果集群出现节点故障，我应该如何快速定位问题？

Elasticsearch如果集群出现节点故障，我应该如何快速定位问题？

当 Elasticsearch (ES) 集群发生故障时&#xff0c;快速定位问题源头非常重要。Elasticsearch 是一个分布式系统&#xff0c;故障可能由多种原因引起&#xff0c;涉及到硬件、配置、网络、集群本身的健康状况等多个层面。以下是一些定位问题的步骤和工具&#xff1a; 检查集群…
阅读更多...
k8s-service、endpoints、pod之间是怎么进行网络互通的

k8s-service、endpoints、pod之间是怎么进行网络互通的

k8s-service、endpoints、pod之间是怎么进行网络互通的 1、service2、endpoints3、service、endpoints、pod通信图4、不同服务pod内部间访问 1、service 在K8S中&#xff0c;Service是一种抽象&#xff0c;定义了一组Pod的逻辑集合和访问这些Pod的策略。首先&#xff0c;我们需…
阅读更多...
dbeaver 连接日常是数据库工具类似navicat

dbeaver 连接日常是数据库工具类似navicat

官网下载安装包 DBeaver Community | Free Universal Database Tool 登录mysql为例 字体调整 sql 美化&#xff0c;关键字大写 快捷键 执行 ctrlenter 单个语句执行 alt x 执行sql脚本 事务提交&#xff0c;默认自动&#xff0c;可以改成手动 创建数据库 新建表 添加主键 …
阅读更多...
Chromium 中chrome.webRequest扩展接口定义c++

Chromium 中chrome.webRequest扩展接口定义c++

一、chrome.webRequest 注意 &#xff1a;从 Manifest V3 开始&#xff0c;"webRequestBlocking" 权限不再适用于大多数扩展程序。以 "declarativeNetRequest" 为例&#xff0c;它允许使用 declarativeNetRequest API。除了 "webRequestBlocking&quo…
阅读更多...
【MySQL】数据库必备知识：全面整合表的约束与深度解析

【MySQL】数据库必备知识：全面整合表的约束与深度解析

前言&#xff1a;本节内容讲述表的约束的相关内容。 表的约束博主将会通过两篇文章进行讲解&#xff0c; 这是第一篇上半部分。 讲到了约束概念。 以及几种常见约束。下面友友们开始学习吧&#xff01; ps:友友们使用了mysql就可以放心观看喽&#xff01; 目录 表的约束概念 …
阅读更多...
堆排序，学习笔记

堆排序，学习笔记

目录 一、概念 二、堆排序的基本思路 三、堆排序的基本步骤 1. 构建初始堆&#xff1a; 2. 排序过程 四、示例 五、应用场景 1. 优先级队列相关场景 2. TopK 值问题 一、概念 堆排序是一种基于二叉堆数据结构的排序算法。二叉堆是一种完全二叉树&#xff0c;它分为两种…
阅读更多...
分享 pdf 转 word 的免费平台

分享 pdf 转 word 的免费平台

背景 找了很多 pdf 转 word 的平台都骗进去要会员&#xff0c;终于找到一个真正免费的&#xff0c;遂分享。 网址 PDF转Word转换器 - 100%免费市面上最优质的PDF转Word转换器 - 免费且易于使用。无附加水印 - 快速将PDF转成Word。https://smallpdf.com/cn/pdf-to-word
阅读更多...
llama-cpp模型轻量化部署与量化

llama-cpp模型轻量化部署与量化

一、定义 定义配置环境遇到的问题&#xff0c;交互模式下模型一直输出&#xff0c;不会停止模型量化Qwen1.5-7B 案例demo 二、实现 定义 主要应用与cpu 上的部署框架。由c完成。配置环境 https://github.com/ggerganov/llama.cpp https://github.com/echonoshy/cgft-llm/blo…
阅读更多...
2024最新版JavaScript逆向爬虫教程-------基础篇之Proxy与Reflect详解

2024最新版JavaScript逆向爬虫教程-------基础篇之Proxy与Reflect详解

目录 一、监听对象的操作二、Proxy基本使用2.1 创建空代理2.2 定义捕获器2.2.1 Proxy的set和get捕获器2.2.2 Proxy(handler)的13个捕获器 三、Reflect的作用3.1 Reflect的使用3.2 Reflect其余方法(9个)3.3 Proxy与Reflect中的receiver参数3.4 Reflect中的construct方法 ECMAScr…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023