【每日阅读】前端进阶知识点1

news2025/1/11 16:03:41

如何更改网页中语言属性值

声明当前语言类 html标签更改属性值 lang属性中不区分大小写 en-us en-US 一致 具体可使用
window,document.querySelector(“html”)?.setAttribute(“lang”,newValue);


qs库

qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

方法：qs.parse()和qs.stringify()

qs.parse()是将URL解析成对象的形式

   const str = "username='admin'&password='admin'" 
    console.log(qs.parse(str)) // Object { username: "admin", password: "admin" }

qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

   qs.stringify({username:'admin', password:'admin'})
    //username=admin&password=admin

CSS文件中第一## 标题行@charset “utf-8”;的作用

@charset“utf-8”：
告诉该文件浏览器该css文件使用的字符编码集是utf-8
这个指令必须写到第一行，如果没有中文可以不写


ts中的“ as”关键字有什么作用
ts中as代表断言 (path as string)


vue2生命周期

创建阶段 beforeCreate、created
挂载渲染页面阶段 beforeMount、mounted
更新阶段 beforeUpdate、updated
卸载阶段 beforeDestory、destoryed

在vue3中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因此在这个函数中是不能通过this来获取实例的；同时为了命名的统一，beforeUnmount，destroyed改名为unmounted，

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

区别
Vue2--------------vue3 beforeCreate -> setup() created ->
setup() beforeMount -> onBeforeMount mounted -> onMounted
beforeUpdate -> onBeforeUpdate updated -> onUpdated
beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted
activated -> onActivated deactivated -> onDeactivated
errorCaptured -> onErrorCaptured


JS中三个点
在这里插入图片描述

常见状态码

1xx : 消息，这一类型的状态码，代表请求已被接受，需要继续处理。但是一般服务器禁止向客户端发送此类状态码；

2xx : 成功，这一类型的状态码，代表请求已成功被服务器接收、理解、并接受；

3xx : 重定向，这类状态码代表需要客户端采取进一步的操作才能完成请求；

4xx : 请求错误，这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理；

5xx : 服务器错误，这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理


Content-Type

Content-type是Http的实体首部字段，在request的请求行（或response的状态码）之后，也是首部的一部分。用于说明请求或返回的消息主体是用何种方式编码，在request header和response header里都存在。

常见的媒体格式类型如下：
text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式

以application开头的媒体格式类型：

application/xhtml+xml ：XHTML格式
application/xml ： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json ： JSON数据格式
application/pdf ：pdf格式
application/msword ： Word文档格式
application/octet-stream ： 二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）


Blob 是什么
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

var aBlob = new Blob(blobParts, options);

相关的参数说明如下：·

blobParts：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。
options：一个可选的对象，包含以下两个属性：
type —— 默认值为 “”，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
endings —— 默认值为 “transparent”，用于指定包含行结束符 \n 的字符串如何被写入。它是以下两个值中的一个：“native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 “transparent”，代表会保持 blob 中保存的结束符不变。

 var blob = new Blob(["Hello World!"],{type:"text/plain"});

案例1

<!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>Document</title>
</head>
<body>
    <!-- <a href="" id="downloadBtn">下载</a> -->
    <input type="file" id="input" onchange="handleFiles(this.files)">
</body>
<script>
    var blob = new Blob(["Hello World!"],{type:"text/plain"});
    function handleFiles(files){
        //通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
        let url = URL.createObjectURL(files[0])//获取当前文件的一个内存URL
        let image = new Image()
        console.log(image ,'ok')
        image.src = url;
        var link = document.createElement("a");
        link.innerHTML = '下载';
        link.href = url;
        document.body.appendChild(image)
        document.body.appendChild(link);
    }
  </script>
</html>

案例2

<!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>Document</title>
  </head>
  <body>
    <button id="downloadBtn">文件下载</button>
  </body>
  <script>
    const download = (fileName, blob) => {
      const link = document.createElement('a')

      link.href = URL.createObjectURL(blob)

      link.download = fileName

      link.click()

      link.remove()

      URL.revokeObjectURL(link.href)
    }

    const downloadBtn = document.querySelector('#downloadBtn')

    downloadBtn.addEventListener('click', (event) => {
      const fileName = 'blob.txt'

      const myBlob = new Blob(['一文彻底掌握 Blob Web API'], { type: 'text/plain' })

      download(fileName, myBlob)
    })
  </script>
</html>

在这里插入图片描述


vue3+ts声明 @vue/runtime-core 模块会导致 vue 方法导出错误

app.config.globalProperties.api = api; // 向所有组件注入 api 对象

注入之后是不能在组件中使用的，因为 ts 类型的原因，组件实例是没有 api 的声明的，所以需要额外声明

//bug:https://www.zhihu.com/question/437009843
declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    /**
     * vuex存储库
     */
    $store: Store<IObject>;
    /**
     * ref引用
     */
    $refs: any;
}

.d.ts是干嘛的
在.d.ts声明变量或者模块等东西之后，在其他地方可以不用import导入这些东西就可以直接用，且有语法提示。
但是也不是说创建了.d.ts文件，里面声明的东西就能生效了，毕竟归根到底也是.ts文件，需要预编译，所以需要在tsconfig.json文件里面的include数组里面添加这个文件.
在这里插入图片描述
include数组里面可以不用写.d.ts文件的绝对路径，可以通过glob通配符，匹配这个文件所在的文件夹或者是“祖宗级别”文件夹。

支持的glob通配符有：

*匹配0或多个字符（不包括目录分隔符）

?匹配一个任意字符（不包括目录分隔符）

**/递归匹配任意子目录

declare是干嘛的

d.ts 文件中的顶级声明必须以 “declare” 或 “export” 修饰符开头。

通过declare声明的类型或者变量或者模块，在include包含的文件范围内，都可以直接引用而不用去import或者import type相应的变量或者类型。https://www.tslang.cn/docs/handbook/tsconfig-json.html
在编辑ts文件的时候，如果你想导入一个.css/.less/.png格式的文件，如果没有经过declare的话是会提示语法错误的
在这里插入图片描述
ps

1…d.ts文件顶级声明declare最好不要跟export同级使用，不然在其他ts引用这个.d.ts的内容的时候，就需要手动import导入了

2.在.d.ts文件里如果顶级声明不用export的话，declare和直接写type、interface效果是一样的，在其他地方都可以直接引用

iframe的简单介绍，优点 缺点

iframe也称作嵌入式框架，可以把一个网页的内容呈现在现有网页中

优点

  1. 可重用性
  2. 只需要重载页面中的一个框架页

缺点

  1. 蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名
  2. onload事件以及连接池(connection pool)，即iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。

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

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

相关文章

09_FreeRTOS任务调度器

09_FreeRTOS任务调度器

目录 开启任务调度器vTaskStartScheduler函数 xPortStartScheduler开启任务调度器函数 启动第一个任务 prvStartFirstTask开启第一个任务函数 vPortSVCHandler SVC中断服务函数 出栈/压栈汇编指令详解 开启任务调度器vTaskStartScheduler函数 作用:用于启动任务调度器,…
阅读更多...
LaoCat带你认识容器与镜像（实践篇一上）

LaoCat带你认识容器与镜像（实践篇一上）

实践篇主要以各容器的挂载和附加命令为主。 本章内容 Dockerfile基础命令详解。 本文实操全部基于Ubuntu 20.04 宿主机 > linux服务器本身 Docker > 20.10.22 从该章开始&#xff0c;我们就进入了Docker实践篇系列了&#xff0c;主要介绍Docker相关附加命令&#xff0c;…
阅读更多...
Python中的字符串多样的操作方法

Python中的字符串多样的操作方法

文章目录1.字符串中大小写字母的转变2.字符串的左右中对齐3.字符串查找的方法4.字符串的替换5. 字符串的判断6.字符串的截取7.字符串的拆分8.字符串的拼接9.格式化字符串10.格式化字符串的语法10.12.1 对齐选项&#xff08;[align]&#xff09;10.2 填充选项&#xff08;[fill]…
阅读更多...
切入点（pointcut）的申明规则

切入点（pointcut）的申明规则

Spring AOP 用户可能会经常使用 execution切入点指示符。执行表达式的格式如下&#xff1a;execution&#xff08;modifiers-pattern? ret-type-pattern declaring-type-pattern? name-pattern&#xff08;param-pattern&#xff09; throws-pattern?&#xff09;ret-type-p…
阅读更多...
HandlerInterceptorAdapter拦截器多个拦截器时执行的顺序

HandlerInterceptorAdapter拦截器多个拦截器时执行的顺序

前提&#xff1a;拦截器加载顺序是 1 2 3.Configuration public class InterceptorConfig implements WebMvcConfigurer {Autowiredprivate Test1neInterceptor test1neInterceptor;Autowiredprivate Test2neInterceptor test2neInterceptor;Overridepublic void addIntercepto…
阅读更多...
【Android -- 开源库】权限适配 RxPermissions 的基本使用

【Android -- 开源库】权限适配 RxPermissions 的基本使用

运行时权限 从 Android 6.0&#xff08;API 级别 23&#xff09;开始&#xff0c;用户开始在应用运行时向其授予权限&#xff0c;而不是在应用安装时授予。 系统权限分为两类&#xff1a; 正常权限&#xff1a;只需在你应用的 Androidmanifest.xml 中列出&#xff0c;安装时…
阅读更多...
大数据---Hadoop安装教程（一）

大数据---Hadoop安装教程（一）

Hadoop安装教程前期工作 以下步骤基于网络配置完成&#xff0c;并且能连接xshell和xftp工具 Linux安装: Linux—CentOS 7 64位安装教程 Xshell连接: Linux—Xshell连接 文章目录Hadoop安装教程前期工作安装vim编辑器免密登录ssh登录过程免密登录的原理操作1.免密登录2.开启远程…
阅读更多...
比较排序——三路快速排序

比较排序——三路快速排序

快速排序&#xff08;Quicksort&#xff09;&#xff0c;计算机科学词汇&#xff0c;适用领域Pascal&#xff0c;c等语言&#xff0c;是对冒泡排序算法的一种改进。一、单路排序流程快速排序算法通过多次比较和交换来实现排序&#xff0c;其排序流程如下&#xff1a; (1)首先设…
阅读更多...
e^(-x^2)的原函数（本求法为负面典型，仅供参考）

e^(-x^2)的原函数（本求法为负面典型，仅供参考）

先放正确答案 ∫−∞∞e−x2π\int _{-\infin} ^{\infin} e^{-x^{2}}\sqrt{\pi}∫−∞∞​e−x2π​ 证法有许多 这是选自点我的一个证明方法。 首先要明确这是一个超越函数 求不了原函数 所以以下部分……纯属失败案例 注&#xff1a;原本在desmos上完成的推导&#xff0c;复制…
阅读更多...
stable-diffusion-webui的基础功能手动安装，了解代码结构、依赖、模型出处

stable-diffusion-webui的基础功能手动安装，了解代码结构、依赖、模型出处

前言 虽然&#xff0c;当前有很多stable-diffusion-webui 的一键安装包&#xff0c;但是不易于彻底理解该项目 主要介绍了&#xff0c;手动安装 stable-diffusion-webui 基础功能的过程&#xff0c;手动安装&#xff0c;了解代码结构、依赖、模型出处 一、手动下载stable-dif…
阅读更多...
2023 如何学好 Python web 开发？走心局送给大家

2023 如何学好 Python web 开发？走心局送给大家

1.走心 我在没有接触互联网这个行业的时候&#xff0c; 就一直好奇网站是怎么构建的。 我现在虽然从事互联网相关的工作&#xff0c; 但是也一直没有接触过Web开发之类的东西&#xff0c; 不过兴趣终归还是要有的&#xff0c;还要自己动手去实践的。 Web开发的途径有好多种&am…
阅读更多...
Linux 三剑客命令之 awk 详解

Linux 三剑客命令之 awk 详解

目录 一、Awk 实战讲解 1.1 awk 的原理 1.2 BEGIN 和 END 模块 1.3 运算符 1.4 常用 awk 内置变量 1.5 awk 正则 1.6 awk 常用字符串函数 一、Awk 实战讲解 awk 是一种很棒的语言&#xff0c;它适合文本处理和报表生成&#xff0c;其语法较为常见&#xff0c;借鉴了某些…
阅读更多...
Fisco Bcos区块链五（后端区块链应用开发框架及流程）

Fisco Bcos区块链五（后端区块链应用开发框架及流程）

文章目录项目框架&#xff1a;开发流程&#xff1a;1、创建一个Java工程2、引入FISCO BCOS Java SDK3、配置SDK证书4、业务逻辑开发第一步.将3编译好的Java合约引入项目中第二步.开发业务逻辑5. 运行应用项目框架&#xff1a; |-- build.gradle // gradle配置文件 |-- gradle …
阅读更多...
element-ui组件的使用，导航菜单（NavMenu）组件、分页组件的使用

element-ui组件的使用，导航菜单（NavMenu）组件、分页组件的使用

一、ElementUI 1、简介&#xff1a;是饿了么公司推出的基于Vue2的组件库 2、使用方法&#xff1a;具体可见官网https://element.eleme.cn/#/zh-CN/component/installation ​ &#xff08;1&#xff09;在vue项目中安装&#xff1a;npm install element-ui ​ &#xff08;…
阅读更多...
win10 在线、离线安装microsoft store 版 WSL

win10 在线、离线安装microsoft store 版 WSL

实验环境&#xff1a; 操作系统&#xff1a;windows版本 10.0.19045.2486 WSL版本&#xff1a;Microsoft.WSL_1.0.3.0_x64_ARM64.msixbundle 离线安装 获取WSL安装包&#xff1a; 在此页面获取发布网址&#xff1a; Microsoft Store 中适用于 Linux 的 Windows 子系统的发行…
阅读更多...
深度卷积对抗神经网络 基础 第七部分 StyleGAN

深度卷积对抗神经网络 基础 第七部分 StyleGAN

深度卷积对抗神经网络 基础 第七部分 StyleGAN 深度卷积神经网络模型已经应用在非常多的领域&#xff0c;但是其总包含了很多潜在的问题&#xff0c;比如说训练速度过慢&#xff0c;生成器与判别器的进化程度不平衡等等。那么&#xff0c;随着各种方法和算法的普及和进化&…
阅读更多...
就业秘籍！这些软件测试的面试话术你要知道

就业秘籍！这些软件测试的面试话术你要知道

近些年&#xff0c;各行各业找工作都不太容易&#xff0c;虽然身处技术岗位的软件测试因企业需求大&#xff0c;要比之其他行业容易&#xff0c;但&#xff0c;稍有不慎&#xff0c;也会让求职者与自己心仪的offer失之交臂&#xff0c;因此&#xff0c;大家在准备前面前&#x…
阅读更多...
关键点匹配——商汤LoFTR源码详解

关键点匹配——商汤LoFTR源码详解

源码地址见文末 1.项目与参数配置解读 首先，进入目录，使用pip install -r requirements.txt配置环境。 首先，对于demo的运行，首先需要准备好需要用于关键点匹配的数据，提供的代码中置于了image文件夹下，然后是训练的权重，代码中下载了室内场景和室外场景的训练权重。 …
阅读更多...
抓包展示vlan报文（8021Q）

抓包展示vlan报文（8021Q）

VLAN数据帧格式要使交换机能够分辨不同VLAN的报文&#xff0c;需要在报文中添加标识VLAN信息的字段。IEEE 802.1Q协议规定&#xff0c;在以太网数据帧的目的MAC地址和源MAC地址字段之后、协议类型字段之前加入4个字节的VLAN标签&#xff08;又称VLAN Tag&#xff0c;简称Tag&am…
阅读更多...
什么护眼台灯比较专业？2023央视推荐的护眼灯

什么护眼台灯比较专业？2023央视推荐的护眼灯

台灯作为最常见的照明工具&#xff0c;也是因为有许多孩子都有近视的现象&#xff0c;从儿童青少年的近视人数可以看出&#xff0c;我国的近视人数是全国第一的&#xff0c;所以选择一款好的护眼台灯是很关键的&#xff0c;有哪些专业的护眼台灯呢&#xff1f;挑选台灯最主要是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023