![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 61
前端Jason
做一个能独立思考的人,有话可说,有事可干,歌以咏志。
展开
-
如何取消xhr / fetch / axios请求
1.从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求。2.使用 cancel token 取消一个请求,此 API 从 v0.22.0 开始已被弃用。fetch()请求发送以后,如果中途想要取消,需要使用AbortController对象。原创 2024-05-06 22:57:52 · 389 阅读 · 0 评论 -
Mac M1使用brew安装nvm
nvm作为node版本管理器,全称,可以管理安装的node和node-sass版本。在macOS系统上的安装步骤如下:*本机使用的是M1芯片,终端配置文件默认使用.zshrc。原创 2022-12-10 22:01:01 · 1853 阅读 · 1 评论 -
js中new关键字的实现原理
// 实现newfunction _new() { let obj = new Object(); // 1. 创建一个空对象 let Con = [].shift.call(arguments); // 2. 获得构造函数 obj.__proto__ = Con.prototype; // 3. 链接到原型 let result = Con.apply(obj, arguments); // 4. 绑定 this,执行构造函数 return typeof result === 'ob原创 2021-11-29 11:07:44 · 379 阅读 · 0 评论 -
垃圾回收机制
我们知道垃圾回收机制是引擎来做的,JS引擎有很多种(各个浏览器都不同),其垃圾回收机制在一些细节及优化上略有不同,本文我们以一些通用的回收算法作为切入,再由 V8 引擎发展至今对该机制的优化为例(为什么以 V8 为例?因为它市场占有率大 ????),一步一步深入来助我们了解垃圾回收机制,因为只有真正了解垃圾回收机制,后面才能理解内存泄漏的问题以及手动预防和优化JavaScript 是门魅力无限的语言,关于它的 GC(垃圾回收)方面,你了解多少呢?想来大部分人是因为面试才去看一些面试题从而了解的垃圾回收,转载 2021-09-06 11:28:36 · 275 阅读 · 0 评论 -
将列表数据转换为树形数据
问题有的时候接口可能会给你列表数据,如何将列表数据转化为树形数据呢???比如:转换为:思路:递归遍历找到children,如果当前项的pid等于传入的id,说明当前项是传入id对应项的子节点闭包保存每次遍历的children实现一下为ts写法步骤详解const tranListToTreeData = <T, K>(list: T[], rootValue: string): K[] => { // 存放子节点的数据 let arr: K[] = [];原创 2021-08-18 11:23:57 · 1631 阅读 · 0 评论 -
dva数据流
一个todolist(土豆丝)案例熟悉dva数据流及如何使用dva开发前端项目项目地址:https://gitee.com/JasonShow/todo-dva.gitdva数据流程图浏览器输入地址(路由router)匹配到对应的模块(Model),模块与视图层(View)通过connect连接,将Model里存放的状态传递给View,View使用dispatch将action传递给Model,更改Model里存放的状态,实现数据完整的单向的闭环回路。Model使用dva-cli构建的项目s.原创 2021-07-22 15:43:10 · 1472 阅读 · 0 评论 -
防抖
防抖 debounce场景搜索提示如果默认情况下,输入一个字符就触发送一次请求,这样太浪费性能。加入防抖后,指定一个最大触发时间,用户在这个时间内输入内容后,就会重新开始计时,只有超过该时间间隔才会发送请求优势:避免频繁触发事件,导致的性能问题其他场景: window 的 resize / scroll 事件等生活中的例子:乘坐电梯,假设你正在电梯里面 电梯门开始关闭,突然,另一个人进入电梯。这个时候,电梯门打开了,它没有升降。 现在又有一个人要进入电梯,又执行了上述相同的功能原创 2021-05-10 13:54:06 · 118 阅读 · 0 评论 -
奶奶都看得懂的canvas和svg绘制多边形
前段时间碰到了绘制多边形的场景,做个总结:1. 使用canvas效果图:代码如下:<!--<!DOCTYPE> 声明必须是 HTML 文档的第一行。位于 <html> 标签之前。--><!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> <title.原创 2021-02-28 15:33:16 · 334 阅读 · 1 评论 -
JS实现复制文本功能
核心api:textArea.select(); 代替手动实现自动选中文本document.execCommand("Copy") 复制选中内容到剪贴板,返回值是一个boolean值,如果是 false 则表示操作不被支持或未被启用。了解更多废话少说直接上代码// 1. 创建// 自调用Clipboard函数返回值为一个对象,该对象有一个copy方法,将该对象挂到全局window上,以便在项目的任何地方都能使用window.Clipboard = (function (window, d.原创 2020-12-01 16:19:06 · 831 阅读 · 0 评论 -
前端面试自闭36问(三)
1. 实现水平和垂直居中的方式使用flexdisplay: flex;justify-content: center;align-items: center;使用定位// 父盒子position: relative;// 子盒子position:absolute;top: 50%;left: 50%;translate: tranforem(-50%, -50%);使用grid// 父 盒子display: grid;// 子盒子justify-self:原创 2020-09-12 21:55:45 · 143 阅读 · 1 评论 -
前端面试自闭36问(二)
1. this 的理解(使用 --为什么要用、实际使用、绑定(显式隐式)常见方法(call apply bind) 作用域 闭包 变量提升 实际使用 、箭头函数 与函数的区别)函数调用模式:如果一个函数不是一个对象的属性时,就是被当做一个函数来进行调用的。此时this指向了window。方法调用模式: 当一个函数被保存为对象的一个属性时,我们称之为一个方法。当一个方法被调用时,this指向被绑定到当前对象。构造函数调用模式:如果函数是通过new关键字进行调用的,此时this被绑定到创建出来的新原创 2020-09-11 18:23:54 · 143 阅读 · 0 评论 -
前端面试自闭36问(一)
1. (必要)布局, 如何实现自适应、定位方式答:定位布局,父相子绝相对定位:position: relative绝对定位:position: absolute固定定位:position: fixedflex布局display: flex阮一峰Flex 布局教程栅格布局是Bootstrap实现响应式的核心所在 其底层也是媒体查询,不管在什么大小的容器里面,都将这个容器分为12份,在不同大小屏幕里面,占的份数不同,在任何大小的屏幕上 都有较好的浏览体验。/*查询屏幕*/@media原创 2020-09-10 18:26:53 · 183 阅读 · 0 评论 -
JS对象深拷贝的几种方法总结
例:var obj = { name: "韩信", age: 18, skin: [ { id: 0, name: '街头霸王', color: 'yellow' }, { id: 1, name: '飞衡', color: 'red' } ]}1. for…in遍历拷贝对象function copy(obj) { var obj2 = {} for (var key in obj) { obj2[key] = typeof ob原创 2020-05-16 14:46:10 · 1361 阅读 · 0 评论 -
障眼法改变复选框样式
复选框的可操作的样式只有width和height,如何做种定制化的复选框?思路:设置一个假盒子,通过伪类 :checked 规定复选框选中状态时假盒子的样式,达到操作复选框切换加盒子的目的关键:复选框的透明度要为0假盒子和复选框位置重叠,且宽高一样复选框层级必须比假盒子高例:<input type="checkbox" name="" id=""><div></div>input[type="checkbox"] { width: 40px原创 2020-05-16 13:37:34 · 253 阅读 · 0 评论 -
ECharts数据可视化插件
EChartsECharts快速上手ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线...转载 2020-02-11 21:14:58 · 1552 阅读 · 0 评论 -
Vue项目打包优化
项目打包的说明项目是写完了, 项目需要打包才能上线~打包命令: yarn build打包完目录文件的说明带 chunk-vendors 的都是 第三方的依赖包我们写的内容在 app.css / app.js打完包的代码, 可以直接于服务器环境 根目录 运行~ 不需要额外配置 插件: live-server 全局安装: npm i live-ser...原创 2020-02-11 21:12:46 · 851 阅读 · 0 评论 -
客户端渲染和服务端渲染的区别
服务端渲染:DOM树在服务端生成,然后返回给前端。例:用nodeJS开发的程序就利用了服务端渲染客户端渲染(SSR):前端去后端取数据生成DOM树。例:用vue或者react等框架开发的单页面应用程序就利用了客户端渲染服务端渲染的优点:1、尽量不占用前端的资源,前端这块耗时少,速度快。2、有利于SEO优化,因为在后端有完整的html页面,所以爬虫更容易爬取信息。服务端渲染的缺点:1、不...原创 2020-02-01 11:38:58 · 330 阅读 · 0 评论 -
响应式布局的两种方式
媒体查询/*@media screen and (条件){ html{ font-siz:值px }}*//*实现rem的适配设计图是 750需要适配的设备:750 720 540 480 424 414 400 384 375 360 320 定义函数 */@media screen and (min-width:320px){ h...原创 2020-02-01 11:04:58 · 635 阅读 · 0 评论 -
vue简介
什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第...原创 2019-12-27 15:01:10 · 159 阅读 · 0 评论 -
SQL语句
SQL 是用于访问和处理数据库的标准的计算机语言存在着很多不同版本的 SQL 语言,但是为了与 ANSI 标准相兼容,它们必须以相似的方式共同地来支持一些主要的关键词(比如 SELECT、UPDATE、DELETE、INSERT、WHERE 等等)sql语句对大小写不敏感、SELECT - 从数据库表中获取数据UPDATE - 更新数据库表中的数据DELETE - 从数据库表中删除数...原创 2019-12-19 11:52:38 · 249 阅读 · 0 评论 -
mysql数据库
基本概念为什么要有数据库没有数据库,我们的数据都是存储在文件当中的,那么文件存储数据的缺点有:文件的安全性问题。文件不利于查询和对数据的管理。文件不利于存放海量数据文件在程序中控制不方便什么是数据库数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行增加、删除、修改、查询等操作。前端程序员只需要对数据库有一定了解即可。浏览器---->...原创 2019-12-19 11:16:24 · 135 阅读 · 0 评论 -
my VScode extensions
扩展名描述Auto Close TagAutomatically add HTML/XML close tagAuto Rename TagAuto rename paired HTML/XML tagbackground-coverAdd a picture you like to cover the entire vscode…Bracket Pai...原创 2019-12-19 11:10:38 · 142 阅读 · 0 评论 -
mongodb简介、安装及配置
什么是MongoDB ?MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统。在高负载的情况下,添加更多的节点,可以保证服务器性能。MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档,数组及...原创 2019-12-09 20:48:10 · 273 阅读 · 1 评论 -
FormData上传进程监听
效果图FromDtata.html<style>.info { width: 500px; min-height: 200px; border: 1px solid red; margin: 0 auto;}.out { width: 80%; height: 20px; margin: 50px auto; border: 1px sol...原创 2019-12-09 20:20:08 · 198 阅读 · 0 评论 -
模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。为什么要使用模板引擎我们通过ajax获取到数据后,需要把数据渲染到页面,在学习模板引擎前,我们的做法是大量的拼接字符串,对于结构简单的页面,这么做还行,但是如果页面结构很复杂,使用拼串的话代码可阅读性非常的差,而且非常容易出错,后期代码维护也是相当的麻烦。...原创 2019-12-09 20:10:34 · 132 阅读 · 0 评论 -
前后端交互的两种方式
方式一:表单提交表单(form):表单用于收集用户输入信息,并将数据提交给服务器。是一种常见的与服务端数据交互的一种方式//1. action:指定表单的提交地址//2. method:指定表单的提交方式,get/post,默认get//3. input的数据想要提交到后台,必须指定name属性,后台通过name属性获取值//4. 想要提交表单,不能使用input:button 必须...原创 2019-12-09 20:07:47 · 10547 阅读 · 6 评论 -
jQuery简介以及选择器
jQuery基本知识为啥学习jQuery过去,写的很多例子,都是可以使用jQuery来实现的,而且会更简单,还有jQuery是前端工程师需要掌握的基础技能.jQuery初体验相比js方式,jQuery有以下优点:1.找对象更加简单2.解决了浏览器兼容性问题3.一些方法不用写for循环4.注册事件不会被覆盖5.实现动画特别简单什么是 jQuery?jquery是个快速地、轻量...原创 2019-11-29 10:15:20 · 105 阅读 · 0 评论 -
jQuery操作样式和节点增删改查
jQuery操作样式css操作功能:设置或者修改样式,操作的是style属性(行内样式)。设置单个样式//name:需要设置的样式名称//value:对应的样式值css(name, value);//使用案例$("#one").css("background","gray");//将背景色修改为灰色设置多个样式//参数是一个对象,对象中包含了需要设置的样式名和样式值...原创 2019-11-29 10:10:32 · 225 阅读 · 0 评论 -
gulp
gulp官网中文网前端自动化构建工具js: function(){//},代码压缩,混淆 : var name = 123,var x = 123css,合并: 1个js 1kb ,有10个js.5个核心方法gulp.task(‘任务名’,function(){}) // 创建任务。gulp.src(’./*.css’) 指定想要处理的文件gulp.dest() // 指...原创 2019-11-23 10:52:07 · 111 阅读 · 0 评论 -
git
git项目版本控制系统为什么要有版本控制系统在开发过程中,经常需要对一个文件进行修改甚至删除,但是@我们又希望能够保存这个文件的历史记录,如果通过备份,那么管理起来会非常的复杂。什么是版本控制系统版本控制系统(Version Control System):是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统。版本控制主要的功能就是追踪文件的变更。它将什么时候、什么人...原创 2019-11-23 10:46:52 · 98 阅读 · 0 评论 -
正则表达式
正则表达式正则表达式:用于匹配规律规则的表达式,正则表达式最初是科学家对人类神经系统的工作原理的早期研究,现在在编程语言中有广泛的应用,经常用于表单校验,高级搜索等。创建正则表达式构造函数的方式var regExp = new RegExp(/\d/);正则字面量var regExp = /\d/;正则的使用/\d/.test("aaa1");元字符正则表达式由一些...原创 2019-11-10 14:05:32 · 161 阅读 · 0 评论 -
css超集-less
less是什么less是css的超集,css有的less有,css没有的less也有。比如函数、变量、新书写规则浏览器不认识less 但是可以借助于插件将less 转换成css 浏览器最终还是识别的是css 只是这个css是有less编译过来的vscode插件:easy less注意:安装less的时候需要在setting.json文件中添加"less.compile": {"...原创 2019-11-01 10:15:49 · 286 阅读 · 0 评论 -
响应式布局-bootstrap
响应式什么是响应式布局响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。为什么要有响应式布局?在移动互联日益成熟的时候,在PC端开发的网页已经无法满足移动设备的要求。通常的做法是针对移动...原创 2019-11-01 10:12:17 · 450 阅读 · 0 评论 -
rem布局
什么是rem ?rem是一个相对单位,思想参考的是em,em相对的是当前文字的font-size大小,但是rem相对的是当前html的font-size的大小。例如当前一个字的大小是16px,当前HTML的font-size:50px,也就是说1em=10px,1rem=50px为什么要用rem目的:实现不同页面宽度和高度都自适应为什么不用em呢?因为em参照的是当前文字的大小 即...原创 2019-11-01 10:04:02 · 120 阅读 · 0 评论 -
冒泡排序究极奥义
原理:两个for循环,外层for循环控制比较轮数(趟数),内层for循环比较每一轮中的前后两项(次数),内层for循环每比较一轮就产生一个当前循环的最大值// 由于个别数组本身的排列的特殊性 导致根本不需要将所有的趟数都排列完才可以 如下数组 只需要排列一次即可var arr = [2, 1, 3, 4, 5, 6, 7, 8];问: 如果知道排好了呢答:如果整个一趟下来 都没有发生...原创 2019-10-24 11:43:09 · 124 阅读 · 1 评论 -
MarkDown语法
一.基本符号:* - + . >基本上所有的markdown标记都是基于这四个符号的组合,需要注意的是,如果以基本符号开头的标记,注意基本符号后有一个用于分割标记符和内容的空格。* - + 三者使用和效果一样,表示无序列表;>表示引用示例:代码部分* aaaaaa * aaaa * aaaa * aaaaaa ...原创 2019-10-21 14:21:02 · 440 阅读 · 0 评论 -
编辑器中的Emmet语法
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CS...原创 2019-10-21 11:38:46 · 256 阅读 · 0 评论