Tr4xAwbYZfcx
1、inherit(继承) inherit关键词用于将一个属性值设置为其父元素的相同属性值。 它是一种实现样式继承的方式，使子元素继承父元素的样式属性。 如果父元素没有明确定义该属性，子元素将继承到该属性的默认值。 这个关键词通常用于处理文本属性，如文本颜色、字体等。 <div> <p>这是一个段落</p> </div> div{ color:red; } p{ color:inherit;//p元素继承div元素的color属性值 } 2、initial(初始) initial关键词将属性的值重置css属性中的默认值。 无论之前的...
利用广播通道实现标签页通信 1.什么是广播通道 广播通道是一种新的浏览器原生API，它可以让你在同源的标签页之间传递消息。这个API的目的是为了让开发者可以在不同的标签页之间共享数据，而不需要使用LocalStorage或者其他的存储方式。 2.广播通道的使用 2.1创建广播通道 constchannel=newBroadcastChannel('test_channel'); 2.2发送消息 channel.postMessage('HelloWorld'); 2.3接收消息 channel.onmessage=function(ev){ console.log(ev.data);...
代码不再赘述，直接复制到文件直接运行即可 逻辑很简单，在画布上进行绘制，对js基础有一定要求。 html <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> <linkrel="stylesheet"href="./style.css"> </head> <body> <inputtype="color"> <canvas> </canvas&g...
1、不要使用Object.prototype.toString.call() 正常情况下: constarr=[1,2,3,4,5] constobj={} console.log(Object.prototype.toString.call(arr))//[Object,Array] console.log(Object.prototype.toString.call(obj))//[Object,Object] 过去我们能够通过判断Object.prototype.toString.call(arr)第二个单词是否为Array来判断是否为数组，但是时代变了，现在不行了。因为现在可以使用...
1、什么是AJAX AJAX（AsynchronousJavaScriptandXML）是一种用于在网页上进行异步通信的技术。它允许在不刷新整个页面的情况下，通过在后台与服务器进行数据交换来更新部分网页内容。 传统的网页开发中，当用户与网页进行交互时，需要刷新整个页面才能获取最新的内容。而使用AJAX，可以通过JavaScript和异步请求发送HTTP请求到服务器，并在后台处理数据，然后使用JavaScript将返回的数据动态更新网页上的特定部分，而不必重新加载整个页面。 AJAX的核心思想是利用浏览器提供的XMLHttpRequest对象（现代的fetchAPI也可以），通过异步方式向服务器...
1、响应式本质 就是把数据和函数相关联起来，当数据变化时，函数自动执行。当然这对于函数和数据也是有要求的函数必须是以下几种:rendercomputedwatchwatchEffect数据必须是以下几种：响应式数据在函数中用到的数据 2、例子 2.1 <template> <divclass="responsive"> <h1>responsive</h1> <div>传入的值:{{count}}</div> <br> <div>doubled:{{doubleCount}}</div>...
1、应用范围 一个项目可能有多个页面用到了table，都是从后台请求数据进行渲染。分页。等通用功能。ui或许有些许不同，但是大部分都是重复的功能。所以看了官方文档，我们可以通过作用域插槽封装高级列表组件，一个组件通用所有项目。 2、使用方式 封装通用组件 <FancyList:api-url="url":per-page="10"> <templateitem="{body,username,likes}"> <divclass="item"> <p>{{body}}</p> <p>by{{username}}|{{...
1、使用情景 通过app.component()和app.directive()注册一到多个全局组件或自定义指令。 通过app.provide()使一个资源可被注入进整个应用。 向app.config.globalProperties中添加一些全局实例属性或方法 一个可能上述三种都包含了的功能库(例如vue-router)。 2、使用方法 mian.js注册插件 import{createApp}from'vue' constapp=createApp({}) app.use(myPlugin,{ /可选的选项/ }) 3、实现插件 举个例子，我们要实现一个翻译的插件： 3.1、模版文...
1、作用 在使用异步组件时，由于需要等待组件加载完成后才能显示，因此可能会出现页面空白或显示错误信息的情况。而Suspense组件的作用就是在异步组件加载完成前显示一个占位符，提高用户体验。 2、用法 首先子组件AsyncShow：使用了promise包裹代码 <template> <div> <h1>{{result}}</h1> </div> </template> <scriptlang="ts"> import{defineComponent}from'vue' exportdefaultdef...
1、前言 想象下，你正常在网页上浏览页面。突然弹出一个窗口，告诉你登录失效，跳回了登录页面，让你重新登录。你是不是很恼火。这时候无感刷新的作用就体现出来了。 2、方案 2.1redis设置过期时间 在最新的技术当中，token一般都是在Redis服务器存着，设置过期时间。只要在有效时间内，重新发出请求，Redis中的过期时间会去更新，这样前只需要一个token。这个方案一般是后端做。 2.2双token模式 2.21原理 用户登录向服务端发送账号密码，登录失败返回客户端重新登录。登录成功服务端生成accessToken和refreshToken，返回生成的token给客户端。 在请求拦截器中...
1、Reflect是什么，有什么作用？ Reflect是ES6为了操作对象而新增的API,Reflect对象是一个全局的普通的对象,Reflect的原型就是Object. 作用:将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty)，放到Reflect对象上，那么以后我们就可以从Reflect对象上可以拿到语言内部的方法。 2、实际例子 2.1Reflect.get(target,name,receiver) 该方法是用来读取一个对象的属性。 参数如下解析： target:目标对象 name:是我们要读取的属性。 receiver(可选)：可以理解为上...
大文件上传 前言 在日常开发中，文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上，这在许多场景下都是必需的，比如网盘上传、头像上传等。 但是当我们需要上传比较大的文件的时候，容易碰到以下问题： 上传时间比较久 中间一旦出错就需要重新上传 一般服务端会对文件的大小进行限制 这两个问题会导致上传时候的用户体验是很不好的，针对存在的这些问题，我们可以通过分片上传来解决，这节课我们就在学习下什么是切片上传，以及怎么实现切片上传。 原理介绍 分片上传的原理就像是把一个大蛋糕切成小块一样。 首先，我们将要上传的大文件分成许多小块，每个小块大小相同，比如每块大小为2...
1、什么事LRU 单从代码层面来说，我认为lru算法很容易实现，重点是我们要知道什么是lru算法。 LRU英文全称是LeastRecentlyUsed，英译过来就是”最近最少使用“的意思，假如我们有一块内存，专门用来缓存我们最近发访问的网页，访问一个新网页，我们就会往内存中添加一个网页地址，随着网页的不断增加，内存存满了，这个时候我们就需要考虑删除一些网页了。这个时候我们找到内存中最早访问的那个网页地址，然后把它删掉。这一整个过程就可以称之为LRU算法。如下图所示 2、实现 classLru{ constructor(length){ this.length=length this.dat...
1、什么是WebWorkers？ WebWorkersAPI是一组用于创建并在后台运行脚本的接口，以便在Web应用程序中进行多线程处理。它使得可以将一些耗时的计算任务放在单独的线程中执行，从而避免阻塞主线程，提高了应用程序的响应性能。 2、使用方式 以下是WebWorkersAPI中常用的接口和方法： Worker构造函数：用于创建一个新的WebWorker对象，在新的后台线程中执行指定的JavaScript文件。 constworker=newWorker('worker.js'); onmessage事件处理程序：用于在主线程中接收来自WebWorker的消息。 worker.onm...
1、介绍 本项目是基于element-ui@2.15.14的基础上，二次修改源码，封装的ui组件，在此特别感谢elemen-ui组件库 2、更新功能 2.1在el-cascader组件的基础上，添加了只多选最后一级的功能，效果图如下： 使用方式： 下载依赖： cnpmi@heyu3913/element-ui-customized-S 可以在main.js中按需使用: importVuefrom'vue' importAppfrom'./App.vue' importrouterfrom'./router' import{Cascader}from'@heyu3913/elem...
不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！不要干前端！...
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> </head> <body> </body> <s...