
前端
文章平均质量分 92
CaraYQ
这个作者很懒,什么都没留下…
展开
-
【前端工程化】
commonjs是nodejs默认模块化规范,每个文件就是一个模块,有自己的作用域,可以维护自己的私有变量,node中cjs模块加载采用同步加载方式,必须等这个模块加载完了再去执行后面的代码,通过require加载模块,通过exports或者module.exports输出模块。所有代码都运行在模块作用域,没有js脚本概念,写一个js文件就是一个模块,所以不会污染全局作用域。模块可以多次加载,第一次加载时会运行模块,模块输出结果会被缓存,再次加载时,会从缓存结果中直接读取模块输出结果。原创 2025-03-22 21:10:51 · 1022 阅读 · 0 评论 -
【leetcode】-【javascript】
请你编写一段代码实现一个数组方法,使任何数组都可以调用方法,这个方法将返回数组最后一个元素。如果数组中没有元素,则返回 -1。你可以假设数组是JSON.parse的输出结果。示例 1 :输入:nums = [null, {}, 3]输出:3解释:调用 nums.last() 后返回最后一个元素: 3。示例 2 :输入:nums = []输出:-1解释:因为此数组没有元素,所以应该返回 -1。方法一:将 Nullish 合并运算符与方法结合使用Nullish:空合并运算符(??原创 2024-06-02 17:35:27 · 599 阅读 · 0 评论 -
【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】
/ 进度条可以用axios的onUploadProgress方法,且发送切片时可以并行发送请求,后续可以自行优化。// 将切割后的Blob对象转成File对象(第二个参数是文件名),之后就可以上传切割后的File对象。// multiple的多文件上传其实很不友好,需要用户在选择文件时按住ctrl多选,否则就会变成单选。// 直接将转换结果赋值给img的src,设置src的大小即可获得浓缩图。//切片上传,在上传的时候进行切片,文件改变时只赋值。// 使用blob的slice方法可以切割文件。原创 2024-05-05 17:04:41 · 9773 阅读 · 2 评论 -
【前端】-【防止接口重复请求】
思路:延续方案二的思路,仍然是拦截相同请求,但这次我们不直接把请求挂掉,而是对于相同的请求我们先给它挂起,等到最先发出去的请求拿到结果回来之后,把成功或失败的结果共享给后面到来的相同请求。思路:对于同一个接口,如果传参都是一样的,一般来说都没有必要连续请求多次吧。问题:文件上传时,上传了两个不同的文件的,但只调用了一次上传接口。按理说是两个不同的请求,可为什么会被我们前面写的逻辑给拦截掉一个呢?问题:在目前项目的接口处理逻辑中还有一些局部Loading,就有可能会出现Loading套Loading的情况。原创 2024-05-01 15:32:22 · 1490 阅读 · 0 评论 -
【前端】-【性能优化常识】
是最好的方案。原创 2024-03-26 13:30:59 · 2177 阅读 · 0 评论 -
【css揭秘】
还可以使用border-radius所对应的各个展开式属性:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius来指定各个角的大小。:针对容器某个角对背景图片做偏移定位,比如让背景图片跟右边缘保持20px的偏移量,同时跟底边保持10px的偏移量,如下图所示:(背景图片即虚线框框出来的范围)(描边)属性来产生外层的边框,如果想得到上图【双重边框的效果】,原创 2024-01-28 00:04:47 · 1285 阅读 · 0 评论 -
【前端】-【electron】
electron技术架构:chromium、node.js、native.apis需求:点击窗口右上角的三个图标,分别执行相应操作index.html代码如下,红框中为三个图标的代码// 创建窗口nodeIntegration:true,// 允许渲染进程使用node集成环境contextIsolation: false,// 如果nodeIntegration:true失效,那么需要添加这行代码enableRemoteModule:true//允许使用远程模式},原创 2023-12-01 18:16:20 · 1740 阅读 · 0 评论 -
SCSS/SASS(下)
目录控制命令@if@for循环@while循环@each循环函数字符串函数unquote()To-upper-case()To-lower-case()数字函数percentage()round():将一个数(可以携带单位的任何数值)四舍五入为一个最接近的整数ceil()/floor():向上/下取整abs():取绝对值min()/max():在多个数之中找到最小/大的一个random():获取[0,1)的随机数列表函数length():返回列表清单中有多少个值nth():用来获取列表中某个位置的值join原创 2022-01-15 22:10:10 · 338 阅读 · 0 评论 -
SCSS/SASS(上)
目录介绍SCSS编译命令编译常见的编译错误解决方案不同样式风格的输出方法嵌套输出方式 nested展开输出方式 expanded紧凑输出方式 compact压缩输出方式 compressed介绍SCSS/SASS是CSS预处理器,为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。Sass和SCSS其实是同一种东西 后者是前者的进化版 改进了语法书写方式Sass和SCSS区别:(1)文件扩展名不同,Sass是以原创 2022-01-14 22:39:04 · 1276 阅读 · 0 评论 -
TypeScript
目录TS是以JS为基础构建的语言 他的目的不是取代JS 而是扩展JS TS完全支持JS 在JS的基础上增加了许多功能 其中最主要的功能是在JS的基础上引入类型 让JS从动态类型的语言变成了静态类型的语言 给变量赋予了类型 可以在任何支持JS的平台中执行 但TS不能被JS解释器直接执行...原创 2021-12-12 15:59:31 · 719 阅读 · 0 评论 -
水平垂直居中
水平居中行内元素:给父元素设置text-align:center块级元素:给该元素设置margin:0 autoflex布局:给父元素设置.parent{ display: flex; justify-content: center;}给子元素设置:.son{ position:absolute; left:50%; transform:translate(-50%,0);}给子元素设置:.son{ position:abs转载 2021-11-29 17:38:44 · 147 阅读 · 0 评论 -
浏览器知识(二)
目录V8引擎是如何执行JS代码的在浏览器中 JS代码是如何被执行的?消息队列和事件循环系统(?)setTimeout是怎么实现的(?)XMLHttpRequest是怎么实现的(?)宏任务和微任务(?)Promise(?)async/await(?)V8引擎是如何执行JS代码的编译型语言在程序执行之前,需要经过编译器的编译过程,并且编译之后会直接保留机器能读懂的二进制文件,这样每次运行程序时,都可以直接运行该二进制文件,而不需要再次重新编译了。比如 C/C++、GO 等都是编译型语言。而由解释型语言编原创 2021-11-25 15:26:14 · 608 阅读 · 0 评论 -
webpack5
目录简介webpack初体验简介当我们使用less等预处理器开发样式 浏览器并不能识别、解析less文件 此时我们需要借助一个工具 将less编译成css 当我们开发js文件时 我们需要用一些ES6或更高的语法 很有可能浏览器不认识这些语法 此时我们也需要一种工具 将浏览器不能识别的语法编译成浏览器能识别的语法 可能将来你还写了一些其他东西 这些东西需要其他东西进行编译处理 上述这些小工具我们需要一个个维护 很麻烦 于是前端提出了一个概念“构建工具”构建工具:我用一个大工具将小工具都包含进来 我只用原创 2021-11-12 17:11:09 · 764 阅读 · 0 评论 -
vue2数据响应式原理
目录Object.defineProperty() 方法defineReactive函数递归侦测对象全部属性Object.defineProperty() 方法Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。const object1 = {};// 在object1对象上定义property1属性的值value为42Object.defineProperty(object1, 'property1', { v原创 2021-11-06 17:16:52 · 347 阅读 · 0 评论 -
前端性能优化
目录图像优化矢量图和位图分辨率压缩的有损和无损图像格式JPEG压缩模式GIFPNG图像优化图像优化的思想:压缩压缩的两个思路:(1)减少对某种颜色的编码数来减小文件的大小(2)损失部分源文件信息 以达到近似的效果 使得压缩后的文件尺寸更小能不用图像就不用图像 若一定要用图像:(1)如果在不同的页面或不同的交互状态下 图像需要呈现不同的的效果(边角的裁切、渐变、阴影等)可以用CSS来将同一张图片处理成所需的不同效果(2)如果图像上要显示字 用代码的形式把字加到图片上面 而不是传递一张带字的图原创 2021-10-30 22:36:15 · 673 阅读 · 0 评论 -
详解constructor、prototype、__proto__
目录constructor:保存自己构造函数引用的属性prototype对象:用于放某同一类型实例的共享属性和方法,实质上是为了内存着想。__proto__原型链constructor:保存自己构造函数引用的属性1.可以通过对象.constructor拿到创建该实例对象的构造函数。2.对象由函数创建,函数都是Function对象实例。function Person() {...}console.log(Person.constructor) // 输出结果:[Function: Function]原创 2021-09-24 19:56:11 · 889 阅读 · 0 评论 -
浏览器知识(一)
目录一个页面包含四个进程TCP 协议是如何保证数据完整传输的HTTP请求流程输入URL到页面展示的过程渲染流程分层图层绘制合成与显示DOM树是如何生成的CSS如何影响首次加载时的白屏时间影响页面展示的因素以及优化策略分层和合成机制:为什么CSS动画比JavaScript高效?生成一帧图像的三种方式:重排 重绘 合成如何系统的优化页面Javascript执行顺序栈溢出块级作用域JavaScript 是如何支持块级作用域的(没看懂)作用域链和闭包this栈空间和堆空间垃圾回收调用栈中的数据是如何回收的堆中的数据原创 2021-08-19 22:09:13 · 434 阅读 · 0 评论 -
HTML+CSS
列表中的标题1描述1列表中的标题2描述2......原创 2021-08-15 15:12:35 · 1166 阅读 · 0 评论 -
Axios学习笔记
1.json-server可以帮助我们快速搭建一个HTTP服务2.在线文档: https://github.com/typicode/json-server3.使用:(1)在终端下载: npm install -g json-server(2)创建数据库 json 文件: db.json"posts": [],],(4)启动服务器执行命令: json-server --watch db.json上面那行代码的意思是:启动 json-server 数据去db.json中找。原创 2021-08-09 22:19:55 · 486 阅读 · 0 评论 -
正则表达式
创建正则表达式1.语法:语法:var 变量 = /正则表达式/匹配模式语法:var 变量 = new RegExp(“正则表达式”,“匹配模式”);2.匹配模式:i 忽略大小写g 全局匹配模式3.使用typeof检查正则对象,会返回object4.使用test()方法可以用来检查一个字符串是否符合正则表达式的规则,如果符合则返回true,否则返回false5.\作为转义字符符号含义|:或[]里面的内容也是或[ab] == a|b[a-z] 任意小写字母[A-Z]原创 2021-07-20 19:40:19 · 130 阅读 · 0 评论 -
前端面试常考代码题
目录promise实现sleep将AJAX封装成promisepromise快排归并instanceof继承数组去重Set(ES6中最常用)for嵌套for,然后splice去重(ES5中最常用)indexOfsort()利用对象的属性不能相同的特点进行去重(这种数组去重的方法有问题,不建议用)includeshasOwnPropertyfilter递归去重Mapreduce+includes[...new Set(arr)]数组扁平化new、apply、call、bind实现深拷贝、浅拷贝setTimeo原创 2021-06-23 19:04:53 · 2009 阅读 · 0 评论 -
JS数据类型及检测方法
目录JS数据类型基本数据类型引用数据类型:两种数据存储方式:两种数据类型的区别:检测方法typeofinstanceofconstructortoString()JS数据类型基本数据类型 Number,String,Boolean,null,undefined,symbol,bigint(后两个为ES6新增)引用数据类型: object,function(proto Function.prototype) object:普通对象,数组对象,正则对象,日期对象,Math数学函数对象。两种数原创 2021-06-15 17:29:51 · 254 阅读 · 0 评论 -
Ajax异步请求
创建ajax过程创建XMLHttpRequest对象,也就是创建一个异步调用对象.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.设置响应HTTP请求状态变化的函数.发送HTTP请求.获取异步调用返回的数据.使用JavaScript和DOM实现局部刷新.<body><!--ajax请求发送前的准备:前端准备:GET 服务器准备:SERVER项目需求:点击按钮向服务端发送请求 服务端返回的响应体结果显示在div中 页面不刷新-->&原创 2021-06-12 21:40:10 · 2279 阅读 · 4 评论 -
隐式类型转换,==,===,isNaN,Object.is
目录=====isNaNObject.is==比较两个数据是否相等,会发生隐式类型转换。console.log(1 == true);// true对于引用数据类型,由于比较的是地址值 所以console.log([]==[]); // false空字符串(""),数字0(0),undefined,null,false本身,NaN的隐式类型转换都为falseif([]){ console.log([] == true);// false}分析:[]的隐式类型转换为true([原创 2021-06-07 11:18:17 · 373 阅读 · 0 评论 -
Array方法、String方法
Array.prototype.map()1.语法:array.map(function(currentValue,index,arr), thisValue)2.参数:(1)function(currentValue,index,arr):函数 必须传 map()方法的返回值就是原数组中每个元素依次执行该函数的结果组成的新数组。参数:currentValue:必须传 代表当前执行函数的元素index:可选 当前元素的索引arr:可选 当前元素属于的数组对象 map方法调用的数组 当前正在处原创 2021-05-12 22:35:54 · 1443 阅读 · 0 评论 -
JavaScript高级
目录一.数据类型基本类型对象(引用)类型判断数据类型的方法相关问题1.undefined与null的区别2.什么时候给变量赋值为null3.严格区别变量类型和数据类型二.数据 变量 内存数据:存储在内存中代表特定信息的“东东” 本质上是01010……内存:内存条通电后产生的可存储数据的空间(临时的)变量:可变化的量又变量名和变量值组成数据 内存 变量三者之间的关系相关问题1.var a = xxx; a内存中到底保存的是什么2.关于引用变量赋值的问题3.在js调用函数时 传递变量参数时 是值传递还是引用传递原创 2021-05-03 22:59:13 · 412 阅读 · 0 评论 -
Promise学习笔记
Promise学习笔记一.Promise是什么?二.为什么使用Promise?Promise的优点三.Promise的状态改变四.Promise对象的值——实例对象中的另一个属性PromiseResult五.Promise的基本流程六.如何使用Promise6.1 Promise API6.1.1 Promise的构造函数:Promise(excutor){}6.1.2 Promise.prototype.then方法:(onResolved,onRejected)=>{}6.1.3 Promise.原创 2021-04-21 14:57:38 · 665 阅读 · 0 评论