当前位置: 首页> 财经> 股票 > 云卡会员卡管理系统_公司网站建设网络推广_做网站推广好做吗_石家庄限号

云卡会员卡管理系统_公司网站建设网络推广_做网站推广好做吗_石家庄限号

时间:2025/7/15 3:42:01来源:https://blog.csdn.net/hanmo22357/article/details/142692195 浏览次数:0次
云卡会员卡管理系统_公司网站建设网络推广_做网站推广好做吗_石家庄限号

文章目录

    • Blob对象
    • Canvas对象
    • CanvasRenderingContext2D对象
    • FileReader对象
    • FormData对象
    • MediaStream对象
    • Navigator对象(预定义)
    • Promise对象
    • Response对象

Blob对象

基本概念:表示一个不可变的、原始数据的类文件对象。它通常用于表示大型的二进制数据,例如图像、音频、视频文件等。

注意事项

  • 该类型的对象经常都设置为const类型。
  • 使用表单将该对象作为一个文件上传,这个文件是没有扩展名的,需要手动为文件增加扩展名。

Canvas对象

基本作用:表示HTML页面中的画布(<canvas>)元素。

常用方法

  • getContext('2d')
    • 功能介绍<canvas> 元素的一个方法,用于获取2D绘图上下文(简单来说就是有了画布以后获得一个可以进行2D图像绘制的工具箱)。这个上下文对象提供了各种绘图方法和属性,用于在画布上绘制图形、文本、图像等。
    • 返回值:返回一个 CanvasRenderingContext2D 对象。
  • toDataURL(type encoderOptions)
    • 功能介绍: 将画布的内容转换为Data URL。Data URL是一种将小文件直接嵌入到文档中的方法,通常用于将图像嵌入到HTML或CSS中。
    • 参数介绍type表示图像的MIME类型,默认是'image/png',其他类型还有'image/jpg' 'image/jpeg' 'image/webp'等;encoderOptions一般是一个介于0和1之间的数字,表示图像的质量。

CanvasRenderingContext2D对象

基本介绍getContext('2d') 函数的返回值,它包含了许多用于绘制图形、文本、图像等的方法和属性。通过这个对象可以在画布上进行各种二维绘图操作。

常用方法

  • drawImage(image, x, y, width, height):在指定位置绘制图像,并指定宽度和高度。下面给出其image参数的可选类型:
    • 一个<img>元素:表示一个静态图像。
    • 一个<video>元素:表示一个正在播放的动态视频中当前的一帧。
    • 一个<canvas>元素:表示一个画布。可以将一个画布的内容绘制到另一个画布上。

FileReader对象

基本作用:对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

  • 异步读取的概念:在执行读取操作时,不会阻塞或中断其他JavaScript代码的执行。

创建语法

var reader = new FileReader()

常用事件(新方式下的):这些事件会分别在读取过程中的某个阶段触发:

  • loadstart: 当读取开始时触发。
  • progress: 在读取过程中触发,可以用来显示进度。
  • load: 当读取成功完成时触发。
  • abort: 当读取操作被中断时触发。
  • error: 当读取操作发生错误时触发。
  • loadend: 当读取操作完成时(无论成功还是失败)触发。

常用方法

  • readAsArrayBuffer(blob): 读取指定的 BlobFile 对象,并在读取完成后以 ArrayBuffer 对象的形式存储结果,表示原始二进制数据。
  • readAsDataURL(blob): 读取指定的 BlobFile 对象,并在读取完成后以数据URL(Base64编码)的形式存储结果。
  • readAsText(blob, encoding): 读取指定的 BlobFile 对象,并在读取完成后以文本形式存储结果。encoding 参数指定文本的编码类型,默认为 “utf-8”。

获取读取结果:可以通过 FileReader 对象的 result 属性获取读取的结果。

FormData对象

基本概述:在HTML5中引入的一个JS内置对象,主要用于通过一组键值对的方式表示表单字段和其对应的值。该对象可以模拟HTML中表单提交的行为,向服务器发送一组表单数据,而不需要真正在HTML界面中创建一个表单。

创建语法:有两种常用的创建方式:

  • 创建一个空的对象var 对象名 = new FormData()
  • 基于已有的表单数据创建一个对象var 对象名 = new FormData(HTML表单元素)

向表单中添加数据

FormData对象名.append('数据的键', ‘数据的值’)

判定表单中是否存在某个键

FormData对象名.has(键名)

读取表单中的数据:由于表单数据主要是装配后用来发送,因此读取操作使用情况很少。

  • 读取表单中某个键的第一个值:FormData对象名.get(键名)
  • 读取表单中某个键的所有值:FormData对象名.getAll(键名)

删除表单中的数据

FormData对象名.delete(键名)

向服务器发送表单数据

  • 可以通过 XMLHttpRequest 对象发送表单数据,具体语法略。
  • 可以通过 fetch API 发送表单数据,具体语法略。

MediaStream对象

基本概念:表示一个媒体流对象,这个媒体流可以包含来自摄像头、麦克风、屏幕共享等来源的视频和音频轨道。

获取方法

  • navigator.mediaDevices.getUserMedia():通过访问用户的摄像头和麦克风来获取一个包含视频和音频轨道的 MediaStream 对象。
  • navigator.mediaDevices.getDisplayMedia():请求访问用户的屏幕或窗口,并返回一个包含屏幕共享视频轨道的 MediaStream 对象。

常用方法

  • getTracks():返回一个包含所有媒体轨道的数组,其中每个轨道可以是音频轨道或视频轨道。
  • stop():对于每一个媒体轨道对象,可以使用该方法来停止该轨道,从此该轨道不再提供媒体数据。结合上面的getTracks方法,常用于使用完媒体资源后的资源释放工作。

Navigator对象(预定义)

基本概念navigator 对象是一个可以直接使用的JS内置对象,表示浏览器的信息和状态。

常用属性

  • mediaDevices:navigator 对象的一个属性,本身是一个对象。该对象提供了一个接口,用于访问连接到计算机的媒体输入设备(如摄像头、麦克风)。
    • getUserMedia(constraints)mediaDevices 对象的一个方法,用于请求访问用户的媒体输入设备。出于安全性考虑,浏览器通常会要求用户明确授予访问摄像头和麦克风的权限。在用户授予权限的情况下,返回一个 Promise 对象,并且会被自动解析为 MediaStream 类型的对象。该方法的参数中 constrains 也是一个对象,用于指定请求的媒体设备类型和相关参数。常用的 constrains 对象如下:
      • { video: true }: 请求访问用户的摄像头,并且只请求视频流,不请求音频流。
      • { audio: true }: 请求访问用户的麦克风,并且只请求音频流,不请求视频流。
      • { video: true, audio: true }:同时请求摄像头和麦克风,也就是视频流和音频流。

Promise对象

基本作用:用于表示异步操作最终完成或失败的一个对象,提供了一种更为优雅的方式来处理异步操作的结果,也就是可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数,提高了代码的可读性和可维护性

对象状态:一个Promise对象有以下三种状态。对象状态只能由待定变为已兑现或已拒绝,并且状态一旦改变,就不会再变。

  • 待定(Pending):初始状态,既不是成功,也不是失败状态。
  • 已兑现(Fulfilled):意味着操作成功完成。
  • 已拒绝(Rejected):意味着操作失败。

创建语法:可以通过 new Promise() 构造函数来创建一个新的Promise对象。构造函数接收一个执行器函数(executor function),该函数接收两个参数:resolvereject(可选)。

  • resolve:当异步操作成功时调用,并将结果作为 resolve 方法的参数传递出去。
  • reject:可选参数。当异步操作失败时调用,并将错误信息或拒绝的原因作为参数传递出去。

使用方式:该对象的一种典型使用语法如下所示:

Promise.then(function(result) {// 处理成功结果
}).catch(function(error) {// 处理错误
}).finally(function() {// 总是执行
});
  • .then() 方法用于注册当 Promise 成功时的回调函数。
  • .catch() 方法用于注册失败时的回调函数。尽管在 .then() 方法中可以修改 reject 参数来设置 Promise 被拒绝时的回调函数,但是更推荐使用 .catch 方法来进行处理,因为其语义更加清晰。
  • .finally() 方法用于无论成功或失败都会执行的回调函数。

链式调用:这是 Promise 最强大的特性之一,允许将多个异步操作串联起来,使代码更加清晰和易于维护。

  • 基本概念:链式调用在一个 Promise 完成后,直接返回另一个 Promise,从而形成一个操作链。每个 .then() 方法都可以返回一个新的 Promise ,这样就可以继续调用下一个 .then()
  • 执行逻辑:在链式调用中,每个 .then() 方法都可以接收到前一个 .then() 返回的值。如果 .then() 没有返回值,则默认返回 undefined。如果返回一个普通值(非Promise),这个值会被传递给下一个 .then()
  • 错误处理:在链式调用中,如果任何一个 Promise 被拒绝,错误会被传递到最近的 .catch() 方法。如果没有 .catch() ,错误将会被抛出。
  • 中断方式:可以在 .then().catch() 中返回一个处于 Pending 状态的 Promise。这样,后续的 .then().catch() 将不会被执行。

箭头函数:在 Promise 对象中常以箭头函数作为该函数的参数。下面对箭头函数进行介绍:

  • 基本概念:是 ECMAScript 2015 中引入的一种编写函数表达式的新语法,提供了一种更简洁的方式来书写函数。
  • 使用语法(param1, param2...) => {...函数体...}
    • 如果传入的参数只有一个,则可以省略括号,表示为:param => {函数体}
    • 如果函数体中只有一个表达式,则可以省略花括号,语法为:(param1, param2...) => expression。并且,该表达式的值就会作为函数的返回值。

Response对象

基本概念:在JavaScript中,特别是在使用 Fetch API 进行网络请求时,Response 对象是网络请求成功后返回的响应结果。这个对象是一个Promise被成功解决后的返回值,它包含了从服务器返回的响应信息。

常用属性

  • status: 一个整数(例如200),代表响应的HTTP状态码。
  • statusText: 一个字符串代表响应的状态信息,例如"OK"。
  • ok:一个布尔值,如果HTTP状态码为200-299,则为true。
  • headers: 一个包含响应头信息的 Headers 对象。
  • type: 一个枚举值,表示响应类型,可以是basic, cors, default, error, opaque, 或 opaqueredirect。
  • url:响应的URL。

常用方法

  • arrayBuffer():返回一个 Promise,它将响应体解析为一个 ArrayBuffer
  • blob(): 返回一个 Promise,它将响应体解析为一个 Blob
  • formData():返回一个 Promise,它将响应体解析为一个 FormData 对象。
  • json():返回一个Promise,它将响应体解析为一个 JSON 对象。
  • blob():返回一个Promise,它将响应体解析为一个Blob对象。
  • text(): 返回一个Promise,它将响应体解析为一个字符串。
  • clone(): 创建一个 Response 对象的克隆。
关键字:云卡会员卡管理系统_公司网站建设网络推广_做网站推广好做吗_石家庄限号

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: