
前端基础
文章平均质量分 90
前端基础视频对应课件
前端 贾公子
博主写了对element-plus的表格和表单的封装
[表格]https://gitee.com/childe-jia/table-vue3
[表单] https://gitee.com/childe-jia/form-render
大家支持一下
展开
-
前端工程化 - 快速通关 - vue
快速创建前端项目脚手架●统一的工程化规范:目录结构、代码规范、git提交规范 等●自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作,可以通过集成自动化部署脚本,自动将代码部署到测试、生产环境等;原创 2024-05-14 20:02:25 · 798 阅读 · 0 评论 -
谈谈前端路由的实现原理【hash&history】
这样写会有个问题,就是页面刚加载完毕的时候不会去加载当前的路由,想要hashchange在页面初次加载的时候触发一次,那就给一个监听dom结构的事件,dom一出来就会执行,也就是说页面加载完毕就调用一次hashchange。我们不可能给按钮添加一个点击事件,如果项目大起来,按钮很多,每次点击一个按钮都判断一次url的变化,会非常的不优雅。后的值就是哈希值,按道理url变了,页面一定会刷新,但是哈希是个特例,放个哈希值就是不会刷新页面,这样,我们就解决了第一个问题,修改url不引起页面的刷新。原创 2024-05-21 17:00:10 · 1219 阅读 · 0 评论 -
前端 MVC 分层的实践
前面我们讲了 JavaScript 面向对象编程,这篇文章我们会介绍一下面向对象中的经典编程模式 —— MVC。MVC、MVVM、MVP 这三个概念在前端领域是老生常谈了,但这节课不会只在概念层面讲述三者的区别,而是更偏向实践、从编写业务代码层面讨论一下 MVC 模式在前端开发中的意思。虽历经几十年的洗礼,MVC 架构依然没有过时,在各种语言中我们也经常能看到对应的 MVC 框架。在前端开发中,我们也可以借鉴 MVC 的思想来对项目进行重新组织和解耦,这样可以大大提高项目的灵活性。原创 2024-05-23 09:18:11 · 1275 阅读 · 0 评论 -
前端全栈 === 快速入 门 Redis
提到数据库,大家可能会想到 mysql,它是通过表和字段来存储信息的,表和表之间通过 id 关联,叫做关系型数据库。它提供了 sql 语言,可以通过这种语言来描述对数据的增删改查。mysql 是通过硬盘来存储信息的,并且还要解析并执行 sql 语句,这些决定了它会成为性能瓶颈。也就是说服务端执行计算会很快,但是等待数据库查询结果就很慢了。那怎么办呢?计算机领域最经常考虑到的性能优化手段就是缓存了,能不能把结果缓存在内存中,下次只查内存就好了呢?原创 2024-11-24 12:29:55 · 1328 阅读 · 0 评论 -
前端工程化 - 快速通关 - ES6
Promise 是现代 JavaScript 中异步编程的基础,是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。函数体内允许使用 await 关键字,这使得我们可以更简洁地编写基于 promise 的异步代码,并且避免了显式地配置 promise 链的需要。这使得代码在该点上等待,直到 Promise 被完成,这时 Promise 的响应被当作返回值,或者被拒绝的响应被作为错误抛出。fetch 是浏览器支持从远程获取数据的一个函数,这个函数返回的就是 Promise 对象。原创 2024-05-14 19:29:10 · 777 阅读 · 0 评论 -
从0-1实现一个前端脚手架
脚手架本质就是一个工具,作用是能够让使用者专注于写代码,它可以让我们只用一个命令就生成一个已经配置好的项目,而不用我们再花时间去配置和安装相关依赖,可以在很大程度上提升我们的开发效率。比如我们常用的create-vue和就是脚手架,很多大厂也都有自己的脚手架。原创 2024-07-07 13:28:04 · 1096 阅读 · 0 评论 -
前端文件导出设置responseType为blob时遇到的问题及解决
这时我们打印一下接口返回的数据类型,发现接口会返回一个blob类型的数据,并且blob中属性type是application/vnd.ms-excel,这就说明我们导出的文件类型是excel格式的。这篇文章主要给大家介绍了关于前端文件导出设置responseType为blob时遇到的问题及解决方法,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下。是一个 Web API,它允许网页读取用户选择的文件或Blob对象中的数据。它提供了几种读取文件的方法,例如。原创 2024-07-12 16:37:25 · 2332 阅读 · 0 评论 -
使用sendBeacon进行前端数据上报
这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在unload事件处理器中产生的异步。过去,为了解决这个问题,统计和诊断代码通常要在发起一个同步来发送数据。创建一个<img>元素并设置src,大部分用户代理会延迟卸载(unload)文档以加载图像。创建一个几秒的 no-op 循环。原创 2024-06-21 09:54:15 · 1548 阅读 · 0 评论 -
彻底搞懂前端跨域&解决方案
同源策略是浏览器为确保资源安全,而遵循的一种策略,该策略对访问资源进行了一些限制。。1源的组成部分2下面表格中,只有最后一行的两个源是同源。源 1源 2是否同源⛔非同源️⛔非同源⛔非同源✅同 源︎3同源请求4非同源请求5总结:『所处源』与『目标源』不一致,就是『非同源』,又称『异源』或『跨域』原创 2024-07-12 11:03:09 · 3036 阅读 · 0 评论 -
彻底理解前端 ==== 表单,FormData 对象
<label for="name">用户名:</label></div><div><label for="passwd">密码:</label>原创 2024-07-23 11:04:27 · 904 阅读 · 0 评论 -
若伊代码分析(前端 vue2 登录页)
上面请求的是list数据,但如果public文件夹下有list这个文件,那么这个请求后返回的资源就是public下面的list文件,并不是服务器返回的数据。①xhr:可以说xhr是发送ajax请求的鼻祖,也就是我们使用的new XMLHttpRequest(),在原生js里面是最常见的(开发中直接使用的比较少),常见的api有xhr.open()表示配置请求信息,xhr.send()发送请求信息等等。个人觉得最大的用处就是不同环境加载不同的变量,比如开发环境和测试、正式环境的请求域名不同,直接在。原创 2023-09-04 17:15:21 · 809 阅读 · 0 评论 -
开发调试秘籍--前端Debugger实战
调试工具的面板有很多,先掌握做常用的4个元素(Element)控制台(Console)源代码(Sources)网络(Network)掌握Chrome调试工具的基本使用认识常见报错的种类能够在报错中提取关键信息能够通过调试工具、二分注释排除法,准确定位代码Bug位置。原创 2024-06-21 15:52:46 · 1636 阅读 · 0 评论 -
让CSS flex布局最后一行列表左对齐的N种方法
由于每一列的数目都是固定的,因此,我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。例如,假设每行4个元素,结果最后一行只有3个元素,则最后一个元素的大小是“列表宽度+间隙大小”的话,那最后3个元素也是可以完美左对齐的。然后,借助树结构伪类数量匹配技术。说明最后一行,要么3个元素,要么7个元素……说明最后一行,要么2个元素,要么6个元素……<style>/* 两端对齐 */.list {width: 24%;/* 如果最后一行是3个元素 */原创 2024-09-29 17:01:34 · 2582 阅读 · 0 评论 -
最强大的 CSS 布局 —— Grid 布局
应该注意的是,当我们定义网格时,我们定义的是网格轨道,而不是网格线。一般而言,是从左到右,从上到下,1,2,3 进行编号排序。一些常见的 CSS 布局,如居中,两列布局,三列布局等等是很容易实现的。:可以简化重复的值。布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。上面例子的始终都是三列的,但是需求往往希望我们的网格能够固定列宽,并根据容器的宽度来改变列的数量。上面看到的效果中,右侧通常会留下空白,这是我们不希望看到的。原创 2024-09-30 15:56:28 · 10920 阅读 · 0 评论 -
彻底弄懂css filter滤镜 === 使用filter将彩色图片变成黑白
CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。改进方法:在image标签外面套一层view,在view上面降低暗度,这样圆角就有效果了。HSL色彩模型就是色相、饱和度和明暗度三者混合组成的颜色模型。需求:用户在线头像为原始的彩色图片,离线将用户头像改为黑白色。可以使用单个滤镜函数,也可是同时使用多个滤镜函数。发现class b-r100也就是border-原创 2024-09-16 23:18:42 · 1944 阅读 · 0 评论 -
JavaScript中 FileReader 对象详解
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。其中 File 对象可以是来自用户在一个 < input > 元素上选择文件后返回的 FileList 对象,也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。原创 2024-07-24 11:31:03 · 3958 阅读 · 0 评论 -
JavaScript中的自定义事件
我们不仅可以分配事件处理程序,还可以从 JavaScript 生成事件。自定义事件可用于创建“图形组件”。例如,我们自己的基于 JavaScript 的菜单的根元素可能会触发open(打开菜单),select(有一项被选中)等事件来告诉菜单发生了什么。另一个代码可能会监听事件,并观察菜单发生了什么。我们不仅可以生成出于自身目的而创建的全新事件,还可以生成例如click和mousedown等内建事件。这可能会有助于自动化测试。要从代码生成一个事件,我们首先需要创建一个事件对象。通用的。原创 2024-06-20 13:16:51 · 1578 阅读 · 0 评论 -
如何在 JavaScript 中检查函数是否异步
检查非异步函数是否返回 Promise 的唯一方法是调用它。请注意,如果函数状态发生变化,则调用该函数可能不安全,例如写入数据库。检查该函数是否是异步的 – 然后它会返回 100% 的承诺 时间。检查函数的返回值是否是具有属性的对象 类型函数。原创 2024-07-23 09:09:42 · 1362 阅读 · 0 评论 -
JavaScript 中 unescape() 和 escape() 函数有什么区别
escape() 函数可以将字符串中的非 ASCII 字符转义为十六进制表示的字符串,以便在 URL 编码或者HTML编码中使用。unescape() 函数与 escape() 函数功能相反,可以将经过转义的十六进制字符转回为原始的 Unicode 字符。escape() 和 unescape() 函数是 JavaScript 中用于字符转义和解密的函数。escape() 函数将字符串中的非 ASCII 字符转义为十六进制表示的字符串,以便在 URL 编码或者 HTML 编码中使用。原创 2024-05-22 09:40:33 · 1101 阅读 · 0 评论 -
JavaScript 数据结构 ==== 二叉树
二叉树中的节点最多只能有2个子节点,一个是左侧子节点,一个是右侧子节点,这样定义的好处是有利于我们写出更高效的插入,查找,删除节点的算法。二叉搜索树是二叉树的一种,但是它只允许你在左侧子节点存储比父节点小的值,但在右侧节点存储比父节点大的值。接下来我们将按照这个思路去实现一个二叉搜索树。原创 2024-08-24 12:53:14 · 1310 阅读 · 0 评论 -
JavaScript 中那些不常见的 for 循环命名与高阶用法
JavaScript 的for循环提供了极高的灵活性,但非常规用法往往伴随着可读性和维护性风险。建议:在团队协作中优先选择清晰明了的写法。在性能关键路径或特殊算法中,可谨慎使用高阶技巧。结合 ESLint 等工具限制危险模式(如空语句循环)。通过理解这些“隐藏”特性,开发者可以更深入地掌握 JavaScript 的底层逻辑,从而在特定场景下写出更高效、简洁的代码。原创 2025-04-04 23:23:49 · 896 阅读 · 0 评论 -
用 JavaScript 实现归并排序
在本文中,我们了解了Merge Sort算法背后的逻辑,并用 JavaScript 实现。它是基本排序算法之一,可以帮助我们更好的了解分治法策略。原创 2024-08-21 18:07:10 · 925 阅读 · 0 评论 -
让你彻底了解 JavaScript 解构赋值
解构赋值(Destructuring assignment)是 JavaScript ES6 引入的一种语法特性,它使得我们可以从数组和对象中提取值,并以一种更便捷的方式赋值给变量。这种语法可以大大减少代码量,提高代码的可读性和维护性。原创 2025-01-01 21:09:19 · 987 阅读 · 0 评论 -
一文搞懂Javascript中的函数柯里化(currying)
在使用JavaScript编写代码的时候,有一种函数式编程的思想,而提到函数式编程,一定绕不开一个概念,那就是柯里化。柯里化是编程语言中的一个通用的概念(不只是Js,其他很多语言也有柯里化),是指把接收多个参数的函数变换成接收单一参数的函数,嵌套返回直到所有参数都被使用并返回最终结果。f(a,b,c)f(a)(b)(c)的过程。柯里化不会调用函数,它只是对函数进行转换。柯里化是一个把具有较多 arity 的函数转换成具有较少 arity 函数的过程 -- Kristina Brainwave。原创 2024-05-23 10:42:32 · 3684 阅读 · 0 评论 -
JavaScript 中的类型相等性比较 (宽松比较的小问题)
在 JavaScript 中,比较两个值是否相等是一个常见的操作,但这个过程可能比你想象的要复杂。==(等于)和===(严格等于)。这两种操作符在比较值时的行为有很大的不同,特别是在处理不同类型的值时。本文将详细探讨 JavaScript 中的类型相等性比较,包括特殊值(如NaNundefined和null)的处理,以及原始值和对象之间的转换。原创 2024-10-28 15:01:06 · 539 阅读 · 0 评论 -
JavaScript 中的作用域
作用域是定义变量和函数可访问性的范围。js 中的作用域主要分为全局作用域和局部作用域,以及 ES6 引入的块级作用域。作用域链是 JavaScript 中用于查找变量和函数的作用域链。var 的变量提升,在 for 循环中,var 声明的变量会被提升到函数作用域的顶部,定时器是异步执行的,所以会等到循环结束后再执行,此时访问的 i 都是同一个变量,其值为最终值。let 的块级作用域,在 for 循环中,let 声明的变量每次循环都会创建新的绑定,保留当时的值。原创 2024-10-30 14:24:25 · 575 阅读 · 0 评论 -
javascript 中的原型 & 原型链
每个函数都有一个 prototype 属性,这个属性指向一个对象,这个对象就是原型对象。每个对象都有一个 __proto__ 属性,这个属性指向它的原型对象。当我们访问一个对象的属性时,如果这个对象本身没有这个属性,那么就会沿着__proto__向上查找,这个查找的过程形成的链条就叫做原型链。原创 2024-10-30 14:29:20 · 258 阅读 · 0 评论