前端
codeAX
GitHub:https://github.com/whut-xgp
Blog:https://xgpax.top
展开
-
通过js实现一个异步并发调度器
笔者字节一面的时候遇到了下面这个面试题://支持并发的调度器, 最多允许2两任务进行处理const scheduler = new Scheduler(2)scheduler.addTask(1, '1’); // 1s后输出’1'scheduler.addTask(2, '2’); // 2s后输出’2'scheduler.addTask(1, '3’); // 2s后输出’3'scheduler.addTask(1, '4’); // 3s后输出’4'scheduler.star原创 2021-01-03 19:26:03 · 1298 阅读 · 0 评论 -
【练习小demo】使用React+TS实现一个拖动换位置效果(同时应用节流)
本练习demo旨在练习ts的使用,同时熟悉drag相关的事件1.思路分析drag拖拽事件,通常有三个非常重要的过程:onMouseDown(鼠标按下) onMouseMove(鼠标拖动) onMouseUp(鼠标松开),通常我们在使用drag这一事件的过程中,大概就是在这三个事件中进行相应的处理我们最终要实现的demo效果,就是在鼠标按下后能够带动方块随鼠标位置移动,松开后固定在最后的位置。如图:移动后:而这,只需要控制相关的定位:left和top就能实现这个功能(注意,left和top使用原创 2020-11-15 11:20:47 · 1171 阅读 · 1 评论 -
【js手写】防抖和节流函数
防抖和节流1.防抖1.1 防抖的概念防抖:当某个事件触发的频率过高时,为了避免不必要的性能开销,我们规定这个事件触发后,需要等待一段时间再执行其绑定的逻辑代码,如果在这一段时间内,该事件没有再次触发,就执行这个事件对应的逻辑,否则就重新进行计时等待,确保该事件不被过于频繁的触发。比如我们为鼠标的移动绑定一个事件,显然这个事件会被过于频繁的触发,势必会带来很大的开销,甚至影响到UI的渲染,导致页面卡顿。1.2 实现思路构建一个debouce函数,这个函数中保存一个timeout变量用于记录设置的原创 2020-11-14 10:27:05 · 1363 阅读 · 0 评论 -
【重学js】有关于this指针的四种指向和三种改变方法
this的四种指向和三种改变方法一、this指针:下面是MDN上关于this指针的表述:当前执行上下文(global、function 或 eval)的一个属性,在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。—MDN从字面上的意思,this也就是当前对象主体的一个代指。二、this指针在JavaScript中的四种指向:直接调用的情况下this指向window,即直接调用一个可以直接调用的函数,this指向window通过new运算符,new这个函数,则this指向当前ne原创 2020-10-04 19:47:33 · 648 阅读 · 0 评论 -
【备查】tsconfig.json compilerOptions的配置项及其意义
tsconfig.json 配置文件会有如下结构:{ "compilerOptions": { }, "files": [ "app.ts", "foo.ts", ]}compilerOptions用来配置编译选项,files是数组,用来指定待编译文件。编译选项配置compilerOptions:配置编译选项"incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件,第二次编译会在第一次的基础上进行增量编译,可以原创 2020-08-21 16:46:19 · 20607 阅读 · 2 评论 -
【文件上传】Flask与axios结合,通过ajax上传文件
文件上传flask按照后端官网示例:# 导入flask基本内容from flask import Flask, request, jsonifyimport flask_cors# 用于设置文件安全名from werkzeug.utils import secure_filenameapp = Flask(__name__)# 允许跨域flask_cors.CORS(app)@app.route("/uploadfile", methods=['post'])def upload_fil原创 2020-08-06 11:38:05 · 872 阅读 · 0 评论 -
【备忘】展示图片等文件,window.URL.createObjectURL方法使用
我们需要实现一个图片上传后预览的效果:html部分:这部分很简单,不多赘述<input type="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png" /> <div> <img src="" alt=""> </div>js部分:我们通过onchange触发文件选择后的方法,然后通过浏览器提供给我们的window.URL.create原创 2020-08-06 11:37:27 · 1440 阅读 · 0 评论 -
【React】基于react-transition-group实现转场切换路由跳转动画
一、效果演示react-transition-group转场动画:(如果无法播放可点击另存为下载查看)二、安装这个演示界面是通过路由实现的,谈到这个我们就不得不提到成熟的react动画库:react-transition-group首先我们通过npm进行安装(这里假定你已经学会了使用react-router-dom,react-router,react-router-config)如果你还没有学习,那我建议你稍微进行学习后再来了解路由动画。安装命令:npm install react-tra原创 2020-07-26 19:46:57 · 1762 阅读 · 0 评论 -
【React整理系列】事件处理
一、React事件命名不同于Vue,React的事件处理机制更加接近于原生事件的写法、对于事件类型的指定,基本上是采用原生的写法(但是具体事件回调函数的指定有所不同):<button onClick={activateLasers}> Activate Lasers</button>即使用on+大写事件类型的形式二、React事件参数:event对象React中会默认传入event对象,这个event对象遵循W3C规范(也就是原生类似)三、React阻止html元原创 2020-07-02 22:43:15 · 193 阅读 · 0 评论 -
【React整理系列】Props和State
【React整理系列】Props和Stateprops作为对象,将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件。组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。 文档声明:React 非常灵活,但它也有一个严格的规则:所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。如果需要改变的变量,则使用state: state 是私有的,并且完全受控于当前组原创 2020-07-02 16:20:19 · 184 阅读 · 0 评论 -
【React整理系列】JSX语法学习
【React整理系列】JSX语法学习这是对官方文档的所涉及概念的补充,更多具体概念描述还请移步官方文档-JSX简介JSX语法学习:const element = <h1>Hello, world!</h1>;JSX:既不是字符串也不是 HTML,是一个 JavaScript 的语法扩展。具有 JavaScript 的全部功能。这里需要注意的是:JSX自身也是一个表达式 !!!a. 在JSX中中使用变量:如果需要在JSX中使用变量,则需要使用{}单个大括号对其表达式进行相原创 2020-07-01 09:54:13 · 296 阅读 · 0 评论 -
(自学/初学者普及)浅谈前后端与前后端分离(别再说你不懂什么是前后端分离)
程序员都在说前后端分离,开发岗位也被很明确的分成了前后端工程师,很多大学的刚进入计算机专业的小伙伴和打算进入计算机行业的朋友,通常会有这些问题:究竟什么是前后端呢?前后端分离又是什么呢?为什么会有所谓的前后端分离这一概念呢?如何实现前后端分离呢?前后端各自该做些什么?1.1 前端的基本概念:要理解什么是前后端,首先让我们从最简单的字面意思来理解,前端指的...原创 2020-04-04 01:12:43 · 3110 阅读 · 2 评论 -
vue-router的使用方式
vue-router的使用过程: 一.创建vue-router组件 一般使用vue-router的组件都是视图级别的,也就是由多个组件组成,为了区分router组件与常规的小组件components,我们创建与components同等级的新文件夹:views,用于存放相关的router组件。 二.配置vue-router相关路由信息 1.创建与views,main.j...原创 2020-03-11 23:06:11 · 167 阅读 · 0 评论 -
关于前后端路由与渲染的那些事
路由:这是一个网络工程术语,指分组从源到目的地时,决定端到端路径的网络范围的进程。通俗地将,就是数据从服务器分发到客户端(可反向)的过程,也可粗暴的理解为url的不同后端路由:根据url(统一资源调配符)的不同,后端(如jsp Java server page)通过对url的解析,从数据库读取数据然后动态地生成html界面,并返回该界面给前端展示的过程。由于界面是后端生成的,所以叫做后端路由。...原创 2020-03-11 23:05:23 · 312 阅读 · 0 评论 -
轻松手上ES6中的箭头函数!(告别复杂的讲解,快速掌握ES6最核心的部分!)
ES6中的箭头函数(之前确实是通过阮一峰老师的书籍学过,但是学的很模糊哦,呜呜呜)基本语法:(参数)=>{函数内容}注意:箭头必须和参数在同一行(显然这也是必要的)如果只有一个参数,则括号()可以省略,如果函数只有一个语句,则{}可以省略,另外后者的写法将会默认return其属性但不需要手写return(但是这个写法,在返回对象为{}对象字面量(注意此处对象的含义,咳咳)时必须加上re...原创 2020-03-11 23:04:46 · 286 阅读 · 0 评论 -
(3k字)入门Vue,看这一篇!
还在死看官方文档学Vue?看这一篇就完事了基本内容:{{ 属性变量名 }}花括号 大胡子写法var app = new Vue({ el: '#app',//选择器 data: { message: 'Hello Vue!' }})常用指令:1. v-bindv-bind:属性名称=“data数据” 因为相当常用,所以可以省略v-bind:属性名称=...原创 2020-02-20 22:30:19 · 191 阅读 · 0 评论 -
JavaScript念念碎(一)整体概述以及数据类型
JavaScript念念碎(一)整体概述以及数据类型总体概述:JavaScript由三部分构成,分别为ECMAScript,DOM,BOM。其中ECMAScript是指JavaScript的语法内容,也就是一门语言的核心语言功能,ECMA是European Computer Manufactuters Association的缩写。个人理解为语言本身,也就是语言的骨架。DOM,官方说...原创 2020-01-19 22:09:21 · 179 阅读 · 0 评论 -
CSS3特性
CSS3特性transform示例:div{transform:rotate(30deg);}用于元素的偏转(不再是一个简单的块状)deg:角度顺时针旋转## border-image,border-radius,box-shadowborder-image利用border-image可以自定义边框:border-image用法:div{border-ima...原创 2020-01-19 12:42:05 · 271 阅读 · 0 评论 -
w3c搬运CSS念念碎
w3c搬运CSS念念碎基本使用当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。如果值为若干单词,则要给值加引号p { font-family: "sans serif";}是否包含空格不会影响 CSS 在浏览器的工作效果,不...原创 2020-01-13 21:43:36 · 263 阅读 · 2 评论 -
个人网页中利用表单实现跳转B站和QQ音乐搜索(仿百度搜索)
HTML利用标签接入B站搜索功能最近在制作个人网页的时候,想在网站中插入两个搜索接口,一个用来对接B站**搜索视频,另一个用来对接QQ音乐,搜索音乐。搜索了一下后发现有使用百度进行搜索的例子:利用HTML中的form标签进行验证,很是惭愧,HTML5并没有认真仔细的学习完,也没有上手做个不错的项目,于是重新学习了一下这个标签的用法,实现了一个大概这样的效果:首先对于bilibili,...原创 2019-11-24 12:19:14 · 898 阅读 · 0 评论 -
原生JS实现照片墙
原生Javascript实现照片墙最近跟着网易云课堂的JS学习视频的案例篇实现了一个类似这样的界面:具体页面(GitHub Page)实现思路很简单,大致如下:1.首先布局html:<ul id="ps"></ul>仅一个ul标签,其余元素之后再通过JS添加2.通过js循环添加图片与元素: var ul=document.getElementByI...原创 2019-11-03 10:35:33 · 1314 阅读 · 1 评论