菜鸟小胖砸-CSDN博客

原创 Webpack基本配置

Webpackwebpack的五个核心概念:entry,入口配置,设定webpack以那个文件为入口起点开始打包,分析构建内部依赖图output,输出配置,设定打包后的资源bundles输出位置以及命名loader,处理非js文件,webpack只识别js和json文件,因此需要loader将非js文件翻译解析plugins,执行范围更广的任务,功能扩展,功能强化mode,分为两种:development,开发模式,设置代码本地调试运行的环境production,生产模式,设置代码优化

2021-11-13 16:47:58 1592

原创 Vue3/React-对比实现仿知乎专栏--01

Vue3/React-对比实现仿知乎专栏–01技术栈Vue3：全家桶+TS+bootstrapReact：React全家桶(函数式组件hooks)+TS+Redux+Antd项目创建React ：create-react-app react-version --template typescriptVue3 ： npm install -g @vue/cli npm install -g @vue/cli-init vue create vue3-version初步文件结构/as

2021-10-30 17:18:20 1008

原创 TS+react自建组件库 05

TS+react自建组件库 05KGD的第十个组件-Upload需求分析文件分析：①文件状态：ready、uploading、success、error②文件属性展示：uid、size、name、status、percent、raw、response、error设计实现import { FC, useRef, ChangeEvent, useState} from 'react'import axios from 'axios'import Button from '.

2021-10-24 15:45:49 867

原创 TS+react自建组件库 04

TS+react自建组件库 04KGD的第七个组件-Input需求分析属性分析：能否禁用、图标、规格大小、输入框前缀、输入框后缀设计实现import {FC, ReactElement, ChangeEvent, InputHTMLAttributes} from 'react'import { IconProp } from '@fortawesome/fontawesome-svg-core'import classNames from 'classnames'import Ic

2021-10-21 07:57:51 499 1

原创 TS+react自建组件库 03

TS+react自建组件库 03KGD的第五个组件-Icon引用第三方图标库：fontowesome安装指令：yarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/react-fontawesome引入：import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome

2021-10-18 09:19:47 157

原创 TS+react自建组件库 02

TS+react自建组件库 02KGD的第二个组件-Alert需求分析类型分析-type：成功、默认、危险、警告功能分析-：默认弹出框、可添加描述弹出框设计实现import React, {FC, useState} from 'react'import classNames from 'classnames'export enum AlertType { Success = 'success', Default = 'default', Danger = 'dange

2021-10-14 22:14:53 453

原创 TS+react自建组件库 01

TS+react自建组件库 01Hello World组件测试import {FC} from 'react'interface IHello { message?: string; }const Hello:FC<IHello> = function(props){ let {message} = props; return ( <h2>{message}</h2> )}Hello.defaultPro

2021-10-12 22:16:54 481

原创 0929 NOTE

0929 NOTE–TS学习定义js的超集，可以在任何浏览器、计算机和操作系统上运行，但是执行时会先编译成js代码执行。优势①、有些错误如：未传参，js在浏览器中编译运行时才会报错，而ts在代码执行前便会报错提示②、代码提示友好程度更高③、代码中变量的类型声明使语义更清晰易懂环境搭建安装ts：npm i typescript -g / yarn add typescript -g编译ts文件：tsc demo.ts //执行后编译生成一个js文件，执行插件：np

2021-09-29 22:56:57 86

原创 antd的craco实现按需引入样式

antd的craco实现按需引入样式插件安装：yarn add antd @craco/craco babel-plugin-import 项目根目录下craco.config.js配置：const CracoLessPlugin = require('craco-less');module.exports = { babel: {//支持装饰器 plugins: [ [ "import",

2021-09-23 10:16:17 1348

原创 react后台管理系统---0922

react后台管理系统—0922①报错：Error: Invariant failed: You should not use outside a 原因：在Router外使用NavLink标签解决：给根组件套上BrowserRouter外标签②报错：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you

2021-09-22 22:44:16 204

原创 react后台管理系统 ---0921

react后台管理系统 —0921引入antd库：报错：Manifest: Line: 1, column: 1, Syntax error.原因：创建react-app项目时候删除了manifest.json文件，但是在public的index.html中还有它的引入没有删除。解决：删除index.html中的：样式出现问题：原因：未引入样式解决：引入样式，代码：import ‘…/…/…/node_modules/antd/dist/antd.less’;引入axios：

2021-09-21 22:38:16 253

原创 0920 NOTE

0920 NOTEredux数据共享(1).定义一个Pserson组件，和Count组件通过redux共享数据。(2).为Person组件编写：reducer、action，配置constant常量。(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。纯函数一个函数的返回结果只依赖于它的参数，并且在执行过程里面

2021-09-21 09:55:37 79

原创 0919 NOTE

0919 NOTEredux的简单使用①安装：npm i redux②引用举例：//store.jsimport {createStore} from ‘redux’import reducer from ‘./reducers’export default createStore(reducer)//reducer.jsconst initState = 0;export default function countReducer(preState=initState,action

2021-09-19 22:54:53 65

原创 0918 NOTE

0918 NOTEredux的三个核心概念action动作的对象包含2个属性： type：标识属性, 值为字符串, 唯一, 必要属性 data：数据属性, 值类型任意, 可选属性例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }reducer 用于初始化状态、加工状态。加工时，根据旧的state和action，产生新的state的纯函数。store将state、action、reducer联系在一起的对象如

2021-09-18 16:42:44 75

原创 0917 NOTE

0917 NOTE路由的基本使用原生html中可以通过a标签调转不同页面react中通过路由链接实现切换组件//1.安装react库npm i react-router-dom//2.组件中引入import {Link,BrowserRouter,Route} from "react-router-dom"//3.Link标签类似a标签 to属性用于链接跳转<Link className="" to="/about">About</Link><Link c

2021-09-18 07:22:51 120

原创 0916 NOTE

0916 NOTEtodoList案例总结 1.拆分组件、实现静态组件，注意：className、style的写法 2.动态初始化列表，如何确定将数据放在哪个组件的state中？ ——某个组件使用：放在其自身的state中 ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升） 3.关于父子之间通信： 1.【父组件】给【子组件】传递数据：通过props传递 2.【子组件】

2021-09-16 23:23:16 94

原创原始类型和对象类型

原始类型和对象类型原始类型有哪几种？null是对象么？答： js中原始类型有6种：Number，Boolean，String，Symbol，undefined，null；原始类型与对象类型的区别在于，原始类型存储的是值，而对象类型存储的是指向堆中对应数据的指针，原始类型存于栈中，对象类型存于堆中，虽然，比如，类似123.toString()可以执行转化，但是其实过程中是发生了类型强制转化，证据是通过instanceof判定123是否是Number类型，打印结果为false，代表原始类型没有原

2021-09-16 08:07:49 338

原创 0915 NOTE

0915 NOTE新生命周期生命周期流程图（新）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JGxOTqb-1631716995505)(0915%20NOTE.assets/image-20210915101237823.png)]对比旧生命周期流程图：下述生命周期方法即将过时，在新代码中应该避免使用它们：UNSAFE_componentWillMount()UNSAFE_componentWillUpdate()UNSAFE_compo

2021-09-15 22:44:22 74

原创重构call、apply、bind

重构call、apply、bind逻辑梳理：第一个参数为改变后this指向，第一个参数不存在则默认指向windowcall后续参数不限制，apply只能拥有两个参数，且第二个参数必须为类数组call与apply改变this指向后调用函数，bind改变this指向后返回一个新函数，不执行call、apply、bind所有函数均可调用，因此，这三个方法均为函数原型对象上的属性callFunction.prototype.myCall = function (invoke) {

2021-09-15 09:42:54 242

原创 0914 NOTE

0914 NOTErefsreact的refs属性字符串类型ref：class InputAlert extends React.Component { render() { return ( <div> <input type="text" placehoder="点击按钮弹出输入值" ref="left"/> &

2021-09-14 22:37:33 78

原创 axios

axios什么是axios？基于Promise的HTTP客户端，运行环境为浏览器与node.jsaxios的特点：1.在浏览器创建AJAX请求2.在服务器端创建http请求3.支持promise的相关操作4.请求/响应拦截器5.转换请求/响应数据6.自动将结果转换为JSON数据7.阻挡跨站攻击，提供保护axios的基本使用：//获取按钮 const btns = document.querySelectorAll('button');

2021-09-14 08:14:56 268

原创 0913 NOTE

0913 NOTEReact是什么？一个将数据渲染为HTML视图的js库React的特点：1.采用组件化模式，声明式编码，提高开发效率及组件复用率2.React Native中可以使用React语法进行移动端开发3.虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互React实现：数据=>虚拟DOM=>真实DOM虚拟DOM的两种创建方式1.js创建React.createElement('h1',{id:"title"},React.createElement

2021-09-13 22:39:46 75

原创 AJAX基础

AJAX全拼：asynchronous javascript and XML 异步的js和XMLXML：可扩展标记语言，与HTML不同的是，没有预定义标签，全为自定义标签。AJAX的优缺点：优点： 1.无刷新获取数据 2.允许根据用户事件更新部分页面内容缺点： 1.没有浏览历史，不能回退 2.存在跨域问题 3.对于SEO（搜索引擎优化）不友好，AJAX异步请求获取的数据爬虫无法获取HTTP协议：超文本传输协议(hyper transport protocol)，纤细规定

2021-09-11 16:24:08 139

转载自定义封装实现Promise

自定义封装实现Promise//原promise对比// let p = new Promise((resolve, reject) => { // var ids = setTimeout(()=>{ // resolve("success"); // reject("false"); // },1000) // clearTimeout(ids); // reject(

2021-09-08 09:39:22 184

转载原型和原型链

原型和原型链名称prototype:原型__proto__:原型链(准确说为原型链的节点，所有节点构成的关系链才是原型链)从属关系prototye:函数属性__proto__:Object属性两者都是对象!!!对象的__proto__保存着该对象的构造函数的prototype!!!基本认知function a(){}console.log(a.prototype) //函数a的构造函数constructorlet b = new a;console.log(b.__prot

2021-09-05 19:27:32 72

转载 js——多态

js——多态1."多态性"模拟多态的实际含义：同一操作作用于不同的对象上，可以产生不同的解释和不同的执行结果。一个发出声音的方法makeSound一个猫的类Cat一个狗的类Dog当调用makeSound并且传入的是一只猫则打印出"喵喵喵～"当调用makeSound并且传入的是一只狗则打印出"汪汪汪！"function makeSound(who){ who instanceof Cat ? console.log("喵喵喵～") : who instanceof Dog ? co

2021-08-31 15:46:17 2864

转载 js——继承

js——继承继承概念继承就是子类可以使用父类的所有功能，并且对这些功能进行扩展。1.原型链继承将子类的原型对象指向父类的实例1.1function Parent () { this.name = 'Parent' this.sex = 'boy'}Parent.prototype.getName = function () { console.log(this.name)}function Child () { this.name = 'child'}Child.pr

2021-08-31 15:13:06 109

转载 js——封装

js——封装封装基本概念// 1. 构造函数function Cat (name) { this.name}// 2. 构造函数原型对象Cat.prototype// 3. 使用Cat构造函数创建的实例'乖乖'var guaiguai = new Cat('guaiguai')// 4. 构造函数的静态方法,名为fnCat.fn = function () {}// 5. 原型对象上的方法,名为fnCat.prototype.fn = function () {}

2021-08-30 21:23:03 3247

转载 this面试题

this面试题最近想刷点this的面试题，这部，呆呆大佬的文章让我激动不已，对症下药，获益良多，此处做个记录。知识参考：《你不知道的javascript上卷》原文链接：呆呆大佬的酸爽this面试题知识点预备：this指向this总是指向调用的对象，就是说this指向谁与函数声明的位置没有关系，只与调用的位置有关。this的指向大概分为如下四种：1.new绑定new方式是优先级最高的一种调用方式，只要是使用new方式来调用一个构造函数，this一定会指向new调用函数新创建的对象：2.显式绑

2021-08-29 13:21:04 260

原创 0822 NOTE

0822 NOTE资料参考：Express 框架的使用Node之中间件nodejs学习之中间件nodejs的中间件1、中间件就是一种功能的封装方式，就是封装在程序中处理http请求的功能，2、中间件是在管道中执行3、中间件有一个next()函数，如果不调用next函数，请求就在这个中间件中终止4、中间件和路由处理器的参数中都有回调函数，这个函数有2,3,4个参数如果有两个参数就是req和res；如果有三个参数就是req,res和nex

2021-08-23 08:13:53 96

原创 0818 NOTE

0818 NOTE1.文件filefs.readFile异步读取文件.注意地址中会有转义字符,所以\使用的时候要多敲一个异步读取方法1var fs=require("fs");fs.readFile("E:\\test\\test10\\server\\config.json","utf8",function(err,data){ console.log(err); console.log(data.toString());})异步读取方法2fs.readFile('./

2021-08-22 08:15:40 149

转载 promise面试题

promise理解整理eventloop的执行顺序：脚本运行→整个脚本作为一个宏任务开始执行→同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列→当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完→浏览器UI线程的渲染工作开始执行→web worker任务的检查，有则执行→依次轮询，直至所有任务队列为空ps：Web Worker参考：阮一峰的网络日志——Web Worker使用教程浅谈HTML5 Web Worker微任务：MutationObserve

2021-08-21 13:18:17 2042

原创 0817 NOTE

0817 NOTE从输入url到显示页面的整个过程是什么？1.DNS解析，建立TCP连接，发送http请求2.server接收到http请求，处理，并返回3.客户端接收到返回的数据，处理数据1.node的模块化开发commonjs//单个module.exports = function(){}//多个exports.a=function(){}exports.b=function(){ }//导入var main=require("./a");var {a

2021-08-18 08:48:22 257

原创 Day 0816

0816 NOTENodejs基础概念解析内核 :chrome v8基于Chrome’s JavaScript runtime（运行时）runtime : 实时运行时Node不仅仅简单的使用了V8,还对其进行了优化node优点1、基于V8虚拟机，可构建高性能服务器跟java比，不算高性能2、单线程3、可利用Javascript进行后台开发4、非阻塞IO向文件系统发送一个请求时，无需等待硬盘（寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。阻塞IO:同步，比如加载本地图

2021-08-16 22:54:38 82

原创 0807-0815原生js模拟实现真快乐网站

0807-0815原生js模拟实现真快乐网站功能实现首页：无缝轮播图：自动播放，鼠标移入暂停，鼠标移入浮标切换图片，按钮切换上下图片二级菜单鼠标移入商品分类列表弹出相关二级菜单楼层电梯鼠标下滑至指定位置出现楼层电梯，点击实现平滑跳转登录与注册：输入用户名和密码实现注册与登录，注册成功则跳转登录页，登录成功跳转首页商品列表页：数据渲染生成商品列表，点击跳转对应详情页商品详情页：数据渲染：根据对应id渲染对应详情页面放大镜：鼠标移入，出现蓝色透明遮幕块，显示移动位

2021-08-15 19:45:38 371

原创 0805 NOTE

0805 NOTEcanvascanvas-变形入栈和出栈：实际指图形状态的保存和恢复，通过save()保存，restore()恢复。 save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。可以调用任意多次 save 方法。每一次调用 restore 方法，上一个保存的状态就从栈中弹出

2021-08-06 08:53:00 418

原创 0804 NOTE

0804 NOTECanvasHTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.canvas标签只是图形容器，必须使用脚本来绘制图形。创建canvas标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.var c=document.getElementById("myCanvas"); //获取canvas元素var ctx=c.getContext("2d"); //创建conte

2021-08-04 22:42:59 245

原创 0803 NOTE

0803 NOTE边框线和背景border-radius/*border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性*/border-radius /*圆角边框*/border-left-radius /*圆角左边框*/border-top-radius /*圆角上边框*/border-right-radius /*圆角右边框*/border-bottom-radius /*圆角下边框*//*语法：border-radius: 1

2021-08-04 08:34:10 113

原创 0801 上周知识点-面试题整理

0801 NOTE部分知识自查面试题整理，原型部分后为收集资料，未思考总结，后续补上JQUERYJquery的美元符号$有什么作用？答：是Jquery的别名，可以通过是Jquery的别名，可以通过是Jquery的别名，可以通过生成Jquery对象，调用Jquery的方法Jquery中有哪几种类型的选择器？答：从个人角度而言根据css样式选择器进行划分： 1.简单选择器，将css样式的基本选择器如id选择器，class选择器，标签选择器等作为对象参数传入符，获取到所需dom元素，如获取

2021-08-02 22:56:56 162

原创 0802 NOTE

0802 NOTEGitee方法1：1.git clone https://gitee.com/用户个性地址/远程仓库名.git2.git config --global user.name “你的用户名称”3.git config --global user.email “你的邮箱” //配置本地的git配置信息4.git add 文件名 //添加准备推送的文件，也可以是“.”，“.”表示推送所有文件5.git commit -m “注释” //推送文件信息备注6.git push ori

2021-08-02 22:50:11 76

空空如也

空空如也