前端学习
月半叫做胖
好好学习 冲鸭
展开
-
vue3-todolist (自带撸个Table和Datepicker组件)
vue3-todolist0. 前言之前已经学了一波vue3,笔记在vue3学习笔记想直接看代码的可以去github1. 实现效果2. 需求分析1. 模块功能分析列表展示(静态展示 + 状态修改)table静态展示table支持自定义列 (自定义slot的插入)事件录入(控制部分)自定义的input输入框日期选择器2. 组件分析通过上面的分析,我们需要撸的组件大概有这么几个:tablebuttoninputdatepicker好了需求明确了,废话不原创 2020-10-08 11:10:05 · 1132 阅读 · 0 评论 -
日常学习:Typescript 4 学习笔记
Typescript 4 学习笔记可变元组类型元组标记class 从构造函数推断成员变量类型短语赋值法将 catch error 判定为 unknown 而非 any0. 准备工作安装 typescript 4 beta 体验版npm initnpm install typescript@beta配置 workspace 启动package.json 文件中增加 script 配置, 一定要使用 node_modules 下的 tsc 不然用全局的编译时候还是会报错,因为原创 2020-08-02 12:24:09 · 515 阅读 · 0 评论 -
Svelte学习笔记八:使用Store完成组件间参数共享
StoreStore主要功能是类似vuex、redux和mobx等工具,用于跨组件之间的状态共享。1. Store注册与更新Store写法只需要写在一个js文件中,然后通过svelte/store中提供的writable方法来向公共仓库中注册一个值作为一个仓库元素,之后在组件内可以通过subscribe来监听仓库元素的变化(理解上来说本质上是一个发布订阅的模式),通过set和update来发布仓库内某一个值的变化。Set:直接将仓库内的某个数指定为某个值Update:接收一个仓库当前值的参数的回原创 2020-06-07 00:12:46 · 3683 阅读 · 0 评论 -
Svelte学习笔记六:谈谈双向绑定的使用
表单元素的双向绑定1. input受控绑定使用bind关键字进行绑定,svelte通过bind关键字来完成类似v-model的双向绑定text<input type="text" bind:value={formData.name} />checkbox<input type="checkbox" bind:checked={formData.checkboxVal} />number<input type="number" bind:check原创 2020-05-23 11:24:12 · 890 阅读 · 0 评论 -
Svelte学习笔记五----列表渲染+异步渲染
列表循环渲染使用 {#each items as item}{/each} 来实现列表循环渲染,这里的item可以通过解构赋值,拿到item里面的值,例如 {#each items as {name, age}} {/each}一个简单的例子<script> let people = [ {name: "Mike", age: 18, math: 90}, {name: "Jack", age: 20, math: 100}, {原创 2020-05-16 17:52:19 · 955 阅读 · 0 评论 -
Svelte学习笔记四——组件传参+条件渲染
9. 定义组件参数之前定义了无props的组件,如果想定义一个有props的组件,需要怎么操作呢?接受props的定义:我们需要在组件内部通过export let 的方式来定义组件从外部接受的props默认值的设置:直接对定义的props赋值,就会作为组件的默认值使用扩展运算符:如果有多个props,可以通过声明一个props对象然后利用扩展运算符…来简写来看例子<!-- Input.svelte --><script> export let value;原创 2020-05-13 00:40:33 · 3224 阅读 · 0 评论 -
Svelte学习笔记三:计算属性+复杂类型更新的坑
7. 声明(计算属性)在官方文档中把定义的变量叫做,声明(declaration),但是我觉得用来说他是计算属性更好一些,类似vue,或者是class中的get方法,react中useMemo定义的变量,其原因是∗∗我们通过定义的变量叫做,声明(declaration),但是我觉得用来说他是计算属性更好一些,类似vue,或者是class中的get方法,react中useMemo定义的变量,其原因是**我们通过定义的变量叫做,声明(declaration),但是我觉得用来说他是计算属性更好一些,类似vue,原创 2020-05-10 21:55:23 · 855 阅读 · 0 评论 -
ES2020整理:?和??,动态加载,BigInt,Promise.allSettled
ES2020 学习笔记原文地址1. babel 环境配置babel 版本在7.8以上,babel-cli 8以上均支持es2020中的语法,具体可参照本项目的webpack配置2. es2020 中值得关注的点对象定义中的私有变量当我们创建一个类的时候,该类会在各个场景下被使用,可能我们并不希望每一个内部的参数都被全局共享,因此在方法或者变量前添加#,使得该方法或者类名只在类内部可用...原创 2020-03-14 10:35:28 · 1588 阅读 · 0 评论 -
开发随笔:React使用IntersectionObserver实现无限下拉
17. 无限下拉的例子参考博文1. 工具介绍IntersectionObserver: 一个元素是否在视窗中可见, 通过该对象实现对于DOM元素的异步监听功能的实现。基本使用方法:创建一个IntersectionObserver的类函数,在类函数创建时,传入需要监听事件的回调处理函数主要用用于当元素和视窗发生交互时候,调用回调函数回调中的entities是所有监听对象组成的数组...原创 2020-03-02 01:37:16 · 5224 阅读 · 0 评论 -
日常开发:Websocket初探
WebSocket使用方法前端使用方法利用WebSocket建立一个WebSocket对象通过监听该对象的 onopen, onmessage方法,实现数据的交互,处理后端传来的信息<!--- Game1 ---><!DOCTYPE html><html lang="en"> <head> <meta charset...原创 2020-02-27 15:11:53 · 198 阅读 · 0 评论 -
日常随笔: 实现拖拽上传文件并展示
19. 拖拽上传图片并展示上传图片1. 解决思路:通过利用,监听drop方法,从dataTransfer中得到上传的源文件利用FileReader类中的readAsDataURL将二进制文件转换成base64字符串将该字符串放入img的src中即可上传功能使用FormData进行处理,利用append方法添加内容之后利用post上传到服务器,获取文件地址1. 核心处理详细内容...原创 2020-02-24 15:47:12 · 453 阅读 · 0 评论 -
开发随笔: useRef获取之前状态以及useEffect的坑小记
16. useEffect中的坑以及利用useRef记录之前的状态1. 场景描述用法在使用useEffect这个hooks的时候,我们通过会通过给他增加一个依赖项,来完成当某个或某些依赖发生改变的时候,完成一些副作用的操作,其正常用法如下:import React, { useEffect, useState } from "react";import "./styles.css";c...原创 2020-01-20 16:39:31 · 8491 阅读 · 0 评论 -
开发随笔:React异步加载组件封装
React异步载入组件封装作者正在开源一个基于React+Typescript+node.js的博客系统,源码在练手开源项目, 有想一起学习的或者有空的大佬可以帮我看看代码,提提意见,顺便给个star最好不过拉。谢谢大家1. 场景叙述今天,碰到这样一个问题,就是当表单重载修改的时候,需要根据接口返回的数据来实现表单的初始化,如果是自己封装的受控组件的话,其实很简单,直接通过value赋值,然...原创 2020-01-18 22:28:06 · 574 阅读 · 0 评论 -
React Hook: 使用Context和useReducer代替Redux (Typescript)
14. React Hook: useContext + useReducer代替redux0. 背景当组件嵌套很深,通过一直传参的方法来实现会非常麻烦,为了共享一些参数,一般可以通过Context来实现参数的托管,如果要对部分参数进行修改,可以通过redux或者mobx来做状态的集中管理。在有了React hooks之后,通过Context + useReducer完成Redux的功能,这里...原创 2020-01-13 11:42:40 · 3188 阅读 · 1 评论 -
开发随笔:在react中使用带参的防抖节流回调
12. 在react中使用防抖和节流1. 原理为什么要使用防抖节流,以及防抖节流的原理可以细看防抖和节流2. 在React中使用防抖节流错误的例子import React from "react";import { debounce } from "lodash";export function ErrorInput() { const onChange = e => {...原创 2020-01-11 12:09:29 · 1152 阅读 · 3 评论 -
开发随笔:React传递图片文件到后端的文件上传组件封装过程
10 . React 图片或者文件上传问题通过 base64 前端处理图片为 base64 的解决方案利用 FileReader 对数据进行读取,如果是图片会将图片读取为 base64 的形式将得到的 base64 的字符串传给后端后端直接保存该html字符串,之后调用接口查询该数据直接前端通过img标签完成自动解析即可参考博文代码实现function App() {...原创 2020-01-09 10:40:41 · 2968 阅读 · 0 评论 -
开发随笔:富文本编辑器简单原理
1. 参考博文富文本编辑器的简单原理2. 所用API文档mdn document.execCommand3. 原理简述通过将div标签设置其contentEditable之后会得到一个可编辑的区域,之后该区域就会获得一个类似4. 简单实现代码import React, { useRef, useState } from "react";import "./styles.css"...原创 2020-01-08 10:29:24 · 361 阅读 · 0 评论 -
开发随笔:利用业务组件zent封装表单组件
zent封装表单组件zent版本7.4.31. 利用zent的几个组件FormControl: 包裹封装组件,用于为封装的表单组件提供label, invalid等参数,与其他封装的表单组件统一格式FieldSet: 包裹封装的外部组件,当FormStrategy.View时,为上级托管的Form组件添加字段nameForm.useField: 初始化一个model,包括初始值,键...原创 2020-01-04 17:01:04 · 550 阅读 · 0 评论 -
React Hooks: useRef, useImperativeHandle, forwardRef的使用方法
1. 三者用处useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件,并调用相对应子组件中的方法)useImperativeHandle:在函数式组件中,用于定义暴露给父组件的ref方法。React.forwardRef: 将ref父类的ref作为参数传入函数式组件中,本身props只带有children这个参数,这样可以让子类转发...原创 2020-01-03 11:32:41 · 13167 阅读 · 0 评论 -
开发随笔:flex:1被内部元素撑开问题解决办法
flex:1由于内部元素被撑开的问题问题描述当flex:1的元素当其子元素过长(文本过长)时,会直接撑开父元素<!---html---> <div class="wrapper"> <div class="left">1</div> <div class="middle"> ...原创 2019-12-27 09:46:58 · 12049 阅读 · 4 评论 -
Canvas学习笔记
Canvas 学习笔记0. 参考文档菜鸟教程1. 兼容性以及获取上下文<script> var canvas = document.getElementById('plot'); let ctx = null; canvas.getContext && (() => { console.log(canvas.getConte...原创 2019-11-21 21:00:15 · 406 阅读 · 0 评论 -
开发随笔:transform: skew
4. Skew的用法transform: skew(x, y)x: x轴不动y轴旋转的角度, 正为逆时针, 负为顺时针y: y轴不动,x轴旋转的角度, 正为顺时针,负为逆时针代码验证<div class="base"></div><div class="box"></div><div class="box2"><...原创 2019-11-20 21:47:55 · 560 阅读 · 0 评论 -
日常随笔: React useEffect中使用异步更新数据方法遇到的问题
开发随笔:react hooks 异步更新的问题1. 问题叙述在使用antd/G2图表更新的时候发现:在useEffect中通过异步函数对图表渲染的data进行更新, 但是由于第一次更新后,数据是延迟更新的,所以好像数据并没有实时进行更新.2. 代码分析定义了一个heatmapData const [heatMapData, setHeatMapData] = useState...原创 2019-11-12 21:27:32 · 9488 阅读 · 0 评论 -
日常随笔: Typescript 中使用 reduce Object.keys的方法
Typescript 中使用 reduce Object.keys的方法export interface IAccurateInfo { rmse: IAccItem; nrmse: IAccItem;}export interface IAccurateList { testSet: IAccurateInfo; trainSet: IAccurateInfo;}...原创 2019-11-08 09:28:21 · 3419 阅读 · 0 评论 -
解决webpack打包css时CssSyntaxError的问题
打包CSS文件时的CssSyntaxError问题// 可以使用的代码const path = require('path');module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },...原创 2019-09-22 18:14:38 · 6968 阅读 · 0 评论 -
TypeScript学习笔记(一):简述及安装
0.参考文献Typescript入门教程Typescript中文文档1. 什么是typescriptTypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,可以理解为预编译的Javascript将typescript可以编译成纯javascript类型系统: 对于每一个变量规定其类型(有点类似于C)理解: 对各类变量进行的严格的定义, 这样...原创 2019-05-04 11:46:57 · 377 阅读 · 0 评论 -
uni-app云打包方法
uni-app打包成安卓app1. uni-app 云打包流程:发行 -> 原生app云打包 -> 使用DCloud公用证书 -> 输入包名 -> 去除广告选项 -> 打包 (如果显示已经成功上传到云平台,只需要等待打包的结果即可)打包的结果会显示在控制台内,打包成功就会返回一个网址,从网址中可以下载打包的apk文件如果失败 很多时候是manifeast.js...原创 2019-04-28 16:40:41 · 17985 阅读 · 0 评论 -
JS的内存泄漏问题
JS中存在的内存泄漏内存泄漏最终将导致页面反应迟缓,崩溃,高延迟1. 什么是内存泄漏我们知道内存是有限的,比如8G,16G, 当我们创建了一些变量,其就会在内存中的对应位置 (堆栈的概念)栈内存一般存储基础的数据类型(Number String Null undefined Boolean Symbol)堆内存一般存储引用类型,包括对象Object和数组Array但是我们如果一味的往里...原创 2019-04-16 11:55:53 · 480 阅读 · 0 评论 -
Vuex的入门指南
Vuex的入门指南Vuex1. 什么是vuex官网描述如下store和全局变量的区别通俗的理解为什么要用vuex2. 概念介绍子组件如何修改store中的参数子组件如何监听响应Vuexvuex是什么(有什么用)概念介绍及使用方法vuex官网1. 什么是vuex官网描述如下每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大...原创 2019-04-12 11:24:05 · 159 阅读 · 0 评论 -
JavaScript确定this的指向
JavaScript确定this的指向this的指向确定1. 参考说明2. Reference介绍几个概念3. this确定的方法4 new 的说明例子:例1例2例3例4例5this的指向确定参考说明Reference介绍this确定的方法new的说明样例1. 参考说明拜读了冴羽大神的深入系列,然后加上自己谷歌的一些理解,让这部分更加容易理解冴羽大神深入系列new操作符理解...原创 2019-03-28 15:05:56 · 148 阅读 · 0 评论 -
面试题:CSS3实现折角效果
今天做面试题的时候碰到一个实现折角效果的问题参考资料:CSS3实现折角效果这里她在做下述第3步的时候,我有些不太理解,不过自己也通过一些方法完成了功能,这里做个简单的记录,实验效果为:主要步骤:1-利用linear-gradient 实现一个剪角的盒子2- 利用::before 补上一个折角的效果3-利用translate把盒子和折角结合起来目录1.linear...原创 2019-03-06 09:16:10 · 1303 阅读 · 0 评论 -
BootStrap4 Tab 遇到的一个问题
<div class="container"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle原创 2019-02-19 16:06:05 · 1105 阅读 · 0 评论 -
em rem vw vh是什么与联系
em:理解为相对于继承的字体大小的比例因子,默认body 为16px, 所以大多浏览器下 1em=16px;具体的理解可以参考参考其中的第一张图如果多个盒子嵌套,则继承的应该是父类对应的字体大小为1em注意:当em为行高时,其对应的为其字体大小的倍数;rem:相对于页面的整体缩放过程1rem = 1/100 × 页面的宽度从ue图到rem的转换 ue图的元素 / ue图...翻译 2019-02-18 20:57:33 · 395 阅读 · 0 评论 -
Cookie,session,cache三者的区别
参考文本1JS设置浏览器缓存,以及常用函数整理转载 2019-02-08 00:04:09 · 222 阅读 · 0 评论 -
VS code 突然HTML无法补全的问题解决
如果安装了VS Great Icons可以看一下所对应的html文件的图标,是否为如果已经是这个类似箭头的图标,说明已经被VScode识别为html文件,那么应该已经可以实现html补全如果部分不能补全,可能是1-未安装插件;2-可能存在插件冲突 如果没有被VScode识别为html文件1-ctrl+shift+p2-change the language mode...原创 2019-01-10 09:38:44 · 8393 阅读 · 4 评论 -
Typescript学习笔记(二): tsc常用的命令简介
0.参考资料小马技术1. tsconfig.json 文件的修改1) 生成tsc目录下的配置文件:tsconfig.jsontsc --init 2) 修改tsc编译生成文件的输出目录和ts文件所在根目录的地址打开tsconfig.ison修改outDir 和 rootDir{ "outDir": "./dist", "...原创 2019-05-04 11:55:01 · 27012 阅读 · 0 评论 -
Typescript学习笔记(三):变量声明
0.参考资料typescript入门手册1. tsc的变量声明(1) tsc中的基础变量nullundefinedStringNumberBooleanSymbol (ES6)(2) tsc中的对象类变量any, objectany 支持任何类型,object 支持的是对象类型, 包括array, object等// booleanlet isDone: boo...原创 2019-05-04 11:58:20 · 166 阅读 · 0 评论 -
yarn安装包出现的Unexpected end of JSON input问题解决方法
问题:在使用create-react react-app时出现:error An unexpected error occurred: “C:\Users\Administrator\AppData\Local\Yarn\Cache\v4\npm-send-0.16.2-6ecca1e0f8c156d141597559848df64730a6bbc1\node_modules\send\.yarn...原创 2019-07-17 23:45:50 · 3568 阅读 · 0 评论 -
防抖和截流
JavaScript中的防抖和节流什么是防抖什么是节流防抖节流的区别应用场景0. 参考博客js的防抖截流为什么要做防抖和节流: 如scroll事件和input中的change事件 等变化频繁的事件,如果我们绑定事件后任由这些事件触发,最后因为频繁出发这些事件,导致性能受到很大影响。1. 什么是防抖函数防抖:一段时间内只能发生一次,如果重复触发只执行一次(将多个事件合并为一次进...原创 2019-09-09 14:48:21 · 1387 阅读 · 0 评论 -
React学习笔记之十四: React hooks初探
React Hooks本文参考主要博文:阮一峰老师的 React-hooks 教程How to fetch data with React Hooks?useEffect 完整指南React-hooks 的官方文档demoReact hooks 的主要功能是让函数式组件能够模拟出自身的状态 state 和生命钩子函数常用的 React Hooks 函数包括useStateus...原创 2019-09-09 11:46:56 · 395 阅读 · 0 评论