前端学习笔记和总结
文章平均质量分 68
前端开发和学习笔记和总结
Joey_Tribiani
这个作者很懒,什么都没留下…
展开
-
手写拖动上传组件(Vue3/React)
【代码】手写拖动上传组件(Vue3)原创 2023-01-14 13:34:10 · 1741 阅读 · 0 评论 -
NextJs 学习笔记
之前使用过 Nuxt3 基于前端框架 Vue3 来开发网站,因为 Nuxt3 很多地方借鉴了基于 React 的 SSR 框架 Next,因此最近抽时间开始学习一下 Next 这个框架。如果想用 typescript 开发则可以在上面的命令后面加上选项。Next 框架的页面开发语法是 React,关于 React 有关用法这里不在赘述。和 Nuxt 一样(准确地讲应该是 Nuxt 和 Next 类似,毕竟 Next 前辈,是 Nuxt 的借鉴对象),在项目根目录下有 pages 目录,这个目录的文件系统路原创 2022-12-07 13:53:01 · 842 阅读 · 0 评论 -
JS执行上下文与闭包的理解
所谓的执行上下文,其实就是代码运行的环境,JS 执行上下文分为全局执行上下文,函数执行上下文以及 eval 执行上下文。原创 2022-11-07 15:43:16 · 272 阅读 · 0 评论 -
react和vue3使用hook对比
既然hook这么好用,当然有时候需要自己根据自己的业务需求来封装自己的hook来时先代码复用,这点我认为vue和react差距不大,都很好用。hook的本质就是函数,普通函数不同的是hook的具有状态的,hook函数内部是可以调用其他的hook的import {import {} , });}这样useLoading这个hook的简单封装就已经完成了,可以看到。在这个hook中我们也使用了useStore这个外部hook和toRefconst {直接在组件中引入并且使用即可。原创 2022-09-20 15:20:19 · 1787 阅读 · 0 评论 -
vue3问题记录(持续更新)
在没有使用的组件中,props的定义和之前是一样的,反之props需要通过defineProps来定义,并且可以通过也可以给每个props定义类型,这个和之前vue2的写法相同但是如果我们的类型是通过interface去定义的,上面的方法是无法去实现类型定义的,我们通过给defineProps传递泛型参数的方式来定义props的类型这种方法的弊端是无法给props设置默认值,如果需要定义默认值则需要用到...原创 2022-08-26 17:26:17 · 1562 阅读 · 0 评论 -
electron+vue3 实战
创建后使用为工程添加插件然后项目基础搭建完成进程: electron 程序运行由两个进程来控制主进程(main)和渲染进程(render)Preload 脚本官方解释:预加载(preload)脚本包含了那些执行于渲染器进程中,且先于网页内容开始加载的代码 。 这些脚本虽运行于渲染器的环境中,却因能访问 Node.js API 而拥有了更多的权限。预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。我的理解:由于 electron 的主进程可以原创 2022-07-06 10:06:49 · 4034 阅读 · 2 评论 -
React.lazy 按需引入资源
Vue 中路由可以使用回调的方法动态按需加载,如下:这样在运行的时候加载页面不会全部加载而是根据路由按需加载,这样对首页加载速度的优化有很大的帮助。那么在 React 中,从 react 的官方文档中我们也找到了 react 提供的解决方案。按照 React 官方文档:React.lazy 接受一个函数,这个函数需要动态调用 import()。它必须返回一个 Promise,该 Promise 需要 resolve 一个 default export 的 React 组件。然后应在 Suspense原创 2022-06-20 20:12:40 · 415 阅读 · 0 评论 -
基于 Mui 封装常用 React 组件
Mui 是基于的设计风格开发的基于框架的 UI 框架,之前的名称为。Mui 提供了非常强大的主题解决方案,使用提供的方法可以自定义配置生成主题:生成的主题数据只需要传给暴露的组件即可,之后,组建的所有后代的 Mui 组件都会使用到该主题:动态切换主题动态切换主题只需要生成主题数据传递给组件即可。Mui 提供了一些自定义样式的 Api,下面记录一些常用的是 Mui 暴露的一个 api,我们可以使用该 api 对 Mui 甚至 React 其他组件进行样式改造,比如对 Mui 的 TableRow 组件进原创 2022-06-20 18:13:30 · 3457 阅读 · 2 评论 -
pkg打包node工程(express)
如果报错找不到 bin就在 package.json 中添加“bin”: “./bin/www”,注意需要在 package.json 中配置 pkg 需要打包的静态文件目录配置静态文件目录后在使用这些目录的时候就要注意路径的问题了原创 2022-06-16 11:43:05 · 1360 阅读 · 0 评论 -
简单手写debounce防抖函数和throttle节流函数
function debounce(cb, timeout = 300) { // 闭包一个上次触发时间 let lastEmitTime; return function () { // 每次调用更新上次触发时间 lastEmitTime = new Date().valueOf(); setTimeout(() => { // 设置的timeout时间过后去比较最后一次调用时间是否已经是超过了设置的timeout 超过了就调用callback原创 2022-05-27 15:21:04 · 205 阅读 · 0 评论 -
Vue使用Iconfont图标库
Vue使用Iconfont图标库创建vue项目先基于Vue脚手架vue-cli搭建Vue2.x项目vue create icontest安装依赖并运行// 安装yarn (npm install)// 运行yarn serve (npm run serve)创建iconfont项目仓库正在iconfont官网找到资源管理下拉菜单的我的项目选项,进去后点击加号创建项目创建好项目后就可以尝试添加图标到项目引入到前端项目在刚刚创建好的vue项目中的/src/assets目录下原创 2022-04-24 20:33:03 · 1483 阅读 · 2 评论 -
leaflet地图在React中的使用
leaflet地图在React中的使用关于Leafletleaflet是一款开源且易用于web开发的地图库。它拥有大多数开发者所需要的所有地图功能。,之前使用基本是在vue中使用,踩在巨人的肩膀上使用别人基于**leaflet二次封装过的vue-leaflet**,该插件封装使用起来非常简单,直接参考 官方文档 和教程使用即可。React中使用显然react中是不可以使用vue-leaflet插件去绘制地图的,这是我们就是要直接去啃leaflet这个骨头leaftlet官网https://lea原创 2022-04-21 16:55:34 · 3175 阅读 · 0 评论 -
处理前后端枚举变量不同的需求场景(Map的应用)
处理前后端枚举变量不同的需求场景(Map的应用)需求描述现在后端有个任务以及任务状态的概念,前端需要做展示,后端的状态有八种,但是前端需要整合为五种,也就意味着后端返回的某些状态前端需要整合为一个状态,这时我们前后端的枚举变量就不能一样了,前端需要做特殊处理方法目前想到的比较易于逻辑和代码易读性的就是用Map这种数据类型生成服务端的status到前端的status的映射,然后每次判断用map.get方法去获取后端status在前端所对应的status关系后端枚举变量export enum Ser原创 2022-04-13 14:01:42 · 968 阅读 · 0 评论 -
使用debounce在react函数组件中做防抖
使用debounce在react函数组件中做防抖背景在项目中有这样的常见需求: 提供一个搜索输入框,输入框需要响应用户的输入并且不需要用户点击搜索按钮直接发起搜索。思路1. 普通实现其实这样的需求很常见,也并不难,第一反应就是监听用户输入,只要用户有输入操作立即拿到用户输入的数据直接发起搜索查询优点:响应迅速,并且确实可以达到需求的效果。缺点:发送多洗无效请求,浪费服务器的性能资源,增加服务器负担。2. 防抖函数使用防抖函数(debounce或者lodash.debounc原创 2022-03-16 14:55:22 · 2223 阅读 · 0 评论 -
React使用formik+yup创建表单
React使用formik+yup创建表单简述在React中,react提供了ref来让我们获取react元素对应的真实的dom元素,利用这个特性我们确实可以获取表单域所对应的值import React, { Fragment, useRef, useState } from "react";export default function A() { const inputRef = useRef<any>(); const [value, setValue] = useSt原创 2022-02-28 13:27:48 · 1070 阅读 · 0 评论 -
Vue自定义插件以及指令
Vue自定义插件以及指令Vue提供了强大的插件注入功能来增强vue定义// myPlugin.tsimport moment from "moment";import { PluginObject } from "vue/types/umd";export const myPlugin: PluginObject<any> = { install(vue, options) { console.log(vue, options) // Vue构造函数 “MY_PLU原创 2022-01-06 13:57:16 · 942 阅读 · 0 评论 -
react + typescript + materialUI(Mui)系统基础搭建
react + typescript + materialUI(Mui)系统基础搭建首先根据 React with TypeScript and Less 这篇教程的介绍搭建基于TypeScript+Less的React项目然后安装react需要用到的库react-router-dom和react-reduxyarn add react-router-domyarn add react-redux技术选型框架: React + reatc-router + react-redux编程语言:原创 2022-01-05 09:19:01 · 3651 阅读 · 0 评论 -
react插件react-i18next的使用配置
react 双语 国际化原创 2022-01-05 09:15:55 · 2638 阅读 · 0 评论 -
VUE实例的生命周期
VUE实例的生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了我们在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行代码:new Vue({ data: { a: 1 }, ...原创 2020-03-11 22:38:01 · 133 阅读 · 0 评论 -
Node.JS服务器搭建的完整流程(依赖express脚手架)
Node.JS服务器搭建的完整流程(依赖express脚手架)1、进入工程文件夹,创建主服务器以及下载依赖2、创建代理服务器以及下载依赖(下文讲到)3、然后开始主服务器的创建4、先拉出三层架构,Dao,service文件夹的创建 (工程化管理和维护代码更方便)5、Dao里面创建db.js,以及xxDao.js,链接数据库6、然后创建models文件夹,创建xxModels.js文件...原创 2020-03-11 20:04:26 · 535 阅读 · 0 评论 -
理解JS执行上下文
代码分类首先我们将JS代码分为全局代码和函数代码,全局代码就是全局作用域写的代码,全局都有效的代码,函数代码就是写在函数体内的代码,只在函数体重有效执行上下文全局执行上下文:JS代码在执行之前会进行预解析,对全局数据进行预处理,分为以下三个步骤:1、将var定义的全局变量添加为全局对象的属性,并且赋值undefined;2、function声明的全局函数,添加为全局对象的方法,赋值fun...原创 2019-12-29 21:48:38 · 147 阅读 · 0 评论 -
React组件介绍
React组件介绍React里面最小的单位:React元素/虚拟节点在React中,有一个叫做组件的概念 组件化:页面划分的颗粒程度比模块化划分的更细。创建组件的方法:class(类的继承):class app extends { };2020.02.13组件的两个核心概念:state和propsstate:用来描述一个组件中的内部状态(动态数据)[外链图片转存失败,源站可能有...原创 2020-02-23 21:45:16 · 164 阅读 · 0 评论 -
NodeJS搭建代理服务器
前面已经创建了主服务器,但是为了实现跨域访问,还得写一个代理服务器(proxy server)下面是代理服务器的创建步骤:首先安装依赖:cd proxyApp npm inpm i http-proxy-middleware --save //安装代理自动转发中间件npm i request -- savenpm i request-promise -- save //手动转发需要...原创 2020-03-11 20:06:05 · 1103 阅读 · 0 评论 -
JWT(JSON Web Token)介绍
什么是JSON Web TokenJSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。首先是跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。1、用户向服务器发送用户名和密码。2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、登录时间等等。3、服务器向用户返回一个 session_id,写入用户的...原创 2020-02-14 21:49:09 · 226 阅读 · 0 评论 -
JS寄生组合继承
寄生组合继承这种继承方式对组合继承进行了优化,组合继承缺点在于继承父类函数时调用了构造函数,我们只需要优化掉这点就行了。function Parent(value) { this.val = value}Parent.prototype.getValue = function() { console.log(this.val)}function Child(value) {...原创 2020-03-13 18:15:08 · 162 阅读 · 0 评论 -
React Hook 简介以及使用
Hook 简介Hook 是 React 16.8 的新增特性。它可以让我们在不编写 class 的情况下使用 state 以及其他的 React 特性。hook主要是为了提升性能的,因为我们的页面其实就是一棵树(DOM树),树上有很多分支节点,如果其中任何一个节点变化都重新渲染树对性能极为不友好,hook就是解决这个问题的。注意:hook只适用于函数组件,不适于类组件(类组件性能优化也有Pur...原创 2020-02-24 23:48:48 · 827 阅读 · 2 评论 -
vue路由
vue路由随着前端的发展,越来越多的项目开发都选择用spa(单页应用:Single Page Application)应用的方式开发,与此同时对应的前端路由配置也是必不可少的,如果我们用原生的JS开发应用,或者利用jQuery之类的轻便JS库搭建应用,我们可以用到director.js等来配置路由,在vue中,我们可以通过vue-router来配置。Vue Router 是 Vue.js 官方...原创 2020-03-13 18:11:54 · 186 阅读 · 0 评论 -
练习题
什么是变量提升?在js代码执行之前,会进行预解析,形成全局执行上下文,var声明的变量会被提升为全局对象的属性,赋值undefinedJavaScript 中有哪几种数据类型?基本数据类型和引用数据类型基本:number,string,Boolean,NaN,undefined,symbol引用:Array,Object,Set,functionNaN 是什么数据类型?它的...原创 2020-03-11 20:03:29 · 198 阅读 · 0 评论 -
JS中的继承
JS继承首先我们先说说面向对象,编程范式主要分为面向对象和面向过程两种思想,JS中,我们用面向对象的方式编码。面向对象的编程思想:根据需求分析对象,找到对象有什么特征和行为,通过代码的方式来实现需求,要想实现这个需求,就要创建对象,要想创建对象就应该先有构造函数,然后通过构造函数来创建对象,然后再通过对象来调用对应的属性和方法来实现相应的需求和功能即可。面向对象的特征:封装,继承,多态继承和...原创 2020-03-11 19:52:42 · 164 阅读 · 0 评论 -
React中的setState原理
setState原理React中的页面更新核心思想围绕着state来进行,那么更新state也就是setState的原理是什么样呢?分析以下代码:import React from "react";export default class extends React.Component{ state={ count:1 } add = ()=&...原创 2020-02-23 22:15:40 · 1865 阅读 · 0 评论 -
事件-Event
事件所谓事件,就是指发生了一件事情,一个完整的事件流是从window对象开始,最后回到window的一个过程。事件流分为三个阶段,捕获阶段,目标阶段,以及冒泡阶段。事件监听发生了一件事需要作出对应的响应就得有事件监听(函数)的存在,事件监听器根据对发生的事件的解析来确定是否要作出相应的反应。事件监听我们一般常用以下几种监听器安装(监听函数的创建)方法:1、dom0级,2、dom2级,3、...原创 2019-12-26 22:50:10 · 237 阅读 · 0 评论 -
对js广义闭包的新的理解
广义:函数就是闭包狭义:函数调用完成后,内存空间无法被GC清除,形成封闭的内存空间,就叫闭包常见闭包举例举例:function bar (){ return 1;}let a = bar()调用bar后返回基本类型1,赋值给变量a,此时bar函数调用产生的内存空间会被垃圾回收了因此并没有产生闭包。function bar (){ return {};}...原创 2020-02-24 23:55:23 · 178 阅读 · 0 评论 -
React项目的创建以及入门概念
React入门什么是脚手架工具?它能够帮助我们做些什么事情?在 React 中,如何快速搭建开发环境,有哪些步骤?什么是虚拟节点?它的本质是什么?它有哪些属性?React、ReactDOM 两个核心对象的分工是什么?谈一谈 JSX(JavaScriptXML) 语法,它的本质是什么以及表达式的用法?1、创建项目需要的很多文件都通过脚手架来搭建,可以让我们开发人员能够最快速度地去开...原创 2020-02-23 21:43:50 · 219 阅读 · 0 评论 -
vue导航守卫
vue导航守卫在vue的路由功能里面提供了导航守卫,顾名思义,vue的导航守卫主要用来通过跳转或取消的方式守卫路径导航。让我们开发者有多种机会植入路由导航过程中,比如权限验证控制跳转等等。vue导航守卫分为三种:全局的, 单个路由独享的, 组件级的。全局前置守卫router.beforeEach((to, from, next) => { // ...})其实看名字就能大概...原创 2020-03-13 18:12:29 · 475 阅读 · 0 评论 -
React生命周期
React的生命周期分为3部分:1、挂载阶段(mounting)2、更新阶段(updating)3、卸载阶段(unmounting)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpLDiUKn-1582467524362)(C:\Users\joey\AppData\Roaming\Typora\typora-user-images\image-202002...原创 2020-02-23 22:19:05 · 187 阅读 · 0 评论 -
React受控组件和非受控组件
React受控组件和非受控组件React里面最小的单位:React元素/虚拟节点在React中,有一个叫做组件的概念 组件化:页面划分的颗粒程度比模块化划分的更细。创建组件的方法:class(类的继承):class app extends { };2020.02.13组件的两个核心概念:state和propsstate:用来描述一个组件中的内部状态(动态数据)[外链图片转存失败...原创 2020-02-23 22:17:58 · 405 阅读 · 0 评论 -
React函数式组件
React组件:可以分为类组件和函数式组件1、函数式组件中没有state2、函数式组件中没有生命周期(重点,涉及到生命周期的方法只能在类组建中定义)可以借助react提供的hooks在函数式组建中做状态和方法react对象有个useState函数,可以通过该函数创建状态,并且该函数是有返回值的:const [count,setCount] = useState(0); console....原创 2020-02-23 22:12:02 · 5315 阅读 · 0 评论 -
vue发送服务器请求和token验证
vue发送服务器请求和token验证之前我们已经提到了token验证,现在我们通过vue搭建的项目中也必不可少的需要向服务器请求数据,类似react,我们还是使用axios来做服务请求的发送。关于axios的详细操作和文档可以移步GitHub的axios文档,我这里不过多介绍。只说一下具体用法,直接上代码:import axios from "axios"export default {...原创 2020-03-13 18:10:36 · 518 阅读 · 0 评论 -
Js数据类型-数组
数组介绍在Java Script语言中(以下简称Js),数据类型分为基础(简单)数据类型和引用(复杂)数据类型,其中我们常用的一种引用数据类型-数组,接下来我们一起来看看数组的一些基本知识。数组基础数组(Array),是大多数计算机语言里常见的数据结构,同时也是JS中最常见的数据结构之一,数组的重要性不言而喻。数组是一个有序的数据的集合。在Js中,数组的各个值成为数组的元素,Js中数组的特点...原创 2019-11-28 23:42:29 · 2108 阅读 · 0 评论 -
纯css实现网页内容的隐藏和点击后下拉查看
纯css实现网页内容的隐藏和点击后下拉查看在我们进行网页开发的时候经常会有这样的需求,我们一段文本内容可能会比较冗长,为了提升用户体验,我们必须考虑到并非所有用户都喜欢,都需要去查看所有文本内内容,但毕竟内容又是必须的,不能舍弃,于是我们可以完成一个功能,并将部分内容隐藏,然后用户点击“查看更多”后,我们便将隐藏的内容展示给用户看,这样子不仅不会让不需要的用户感到内容冗长,同时也满足了去他用户对...原创 2019-11-20 22:14:41 · 2692 阅读 · 0 评论