情非得已小猿猿-CSDN博客

原创前端技术栈相关面试知识点总览

部分栏目预览（持续更新中🏃）more >> 相关链接：1️⃣ GitHub 2️⃣ 个人技术博客 3️⃣ 设计作品集 4️⃣ CSDN博客一、VuenextTick()原理more >>二、ReactAnt Design全局改变主题色react项目组件通信AntDesign表单Form实例方法（useForm/ref）… more >>三、TypeScriptTS中type与interface区

2022-03-08 17:28:38 344

一、同程旅行一面自我介绍技术提问sessionStorage是否共享数据 window.openvue、react 源码有没有看过说一下react17 react18区别webpack loader plugin，有没有自己写过vuex、reactx 刷新数据丢失怎么做的持久化反问2、同程旅行二面自我介绍技术提问vue3与vue2的区别wepack loader plugin 有没有自己写过写plugin用过哪些勾子整体项目的项目的性能优化Fle

2024-03-13 10:40:38 676

原创设计模式 — — 代理模式

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果。使用代理模式后，图片本地对象负责往页面中创建一个img标签，并且提供一个对外的setSrc接口；代理模式（Proxy Pattern）是为一个对象提供一个代用品或占位符，以便控制对它的。代理对象负责在图片未加载完成之前，引入预加载的loading图，负责了图片预加载的功能。虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建，，起到的作用就是代理。

2024-03-13 10:34:31 281

原创设计模式 — — 工厂模式

就需要将创建实例的工作从调用方（A类）中分离，与调用方解耦，也就是使用工厂方法创建实例的工作封装起来（减少代码重复）在一个 A 类中通过 new 的方式实例化了类 B，那么 A 类和 B 类之间就存在关联（耦合）使用工厂最终达到的效果是：多态，和类与类之间的松耦合。把具体的产品放到了工厂函数的prototype中。

2024-03-13 10:31:51 339 2

原创设计模式 — — 单例模式

页面存在一个模态框的时候，只有用户点击的时候才会创建，而不是加载完成之后再创建弹窗和隐藏，并且保证弹窗全局只有一个。第三方库都是单例模式，多次引用只会使用同一个对象，如jquery、lodash、moment。单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象。全局态管理库也应用单例模式的思想。

2024-03-13 10:29:06 440

原创设计模式 — — 前端

保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。的对象依赖关系，当被依赖的对象的状态发生了改变，所有依赖它的对象都会得到通知；很多第三方库都是单例模式，多次引用只会使用同一个对象，如。比如你订阅了某个博主的频道，当有内容更新时会收到推送。，把他们一个个封装起来，并且使他们可以相互替换。代理模式：为对象提供一个。观察者模式定义了一种。，以便控制对它的访问。

2024-03-13 10:20:30 365

原创 SolidJs与React区别

（React中叫Fiber树），每当发生更新，虚拟DOM会进行比较（Diff算法），比较的结果会执行不同的DOM操作（增、删、改）在发生更新时，可以直接调用编译好的DOM操作方法，省去了虚拟DOM比较这一步所消耗的时间。用来创建响应式数据，它可以跟踪单个值的变化。

2023-10-24 16:29:57 409

原创 JS如何实现继承（面试）

因为 Object.create 方法实现的是浅拷贝，多个实例的引用类型属性指向相同的内存，存在篡改的可能。寄生式继承在上面继承基础上进行优化，利用这个浅拷贝的能力再进行增强，添加一些方法。借助 Object.create 方法实现普通对象的继承。借助 call调用 Parent 函数。构造函数继承（借助 call）问题：与原型式继承一样。

2023-04-28 09:53:00 200 2

原创如何使用AES加解密提高项目安全性

项目使用AES加解密，非对称加解密：前后端用公钥加密，AES 解密，对称加密：用aesKey、偏移量iv加解密 CryptoES.AES.encrypt

2022-11-21 15:40:53 770

原创 React项目中redux使用

通过 this.props 获取传的 key 的 value 值。通过 this.props 获取对应的触发 action 函数。

2022-09-05 15:24:54 429

原创 Taro + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序

跳转的公众号需要是企业认证的，才能配置业务域名，个人公众号暂不支持。在 global.d.ts 中添加以下内容，微信内置 API 需要小程序开发工具调试，EChart 相关文档。

2022-08-23 13:56:32 4534

原创 React Hooks使用（useEffect、useMemo、useCallback）

调用useEffect时就是在告诉React在完成对DOM的更改后运行你的“副作用”函数。把“创建”函数和依赖项数组作为参数传入useMemo，避免不必要的执行渲染，以达到优化性能的目的。

2022-07-19 11:28:48 801

原创 Ant Design Mobile上拉刷新/加载更多

1、引入组件定义参数import { PullToRefresh, List, Image, InfiniteScroll, Empty } from 'antd-mobile';interface States { list: any hasMore: boolean params: GoodsListDto}this.state = { list: [], hasMore: false, params: { pageSize: 1

2022-05-16 16:30:56 1292

原创 create-react-app / UmiJS创建React项目

react项目的几种创建方法：creat-react-app、umi、pro-cli

2022-05-11 23:17:01 2866

原创 Vue3 + Vite + Typescript + Element Plus创建项目

体验对比vite 启动、打包体验都比vue-cli快1、启动vue-cli：vite：2、打包vue-cli：vite：vue-clivue create vue3-cliDefault Vue 3orManually select featuresvitenpm i -g create-vite-appyarn create @vitejs/appyarn create vite hello-vue3 --template

2022-01-28 11:56:15 1026

原创 react项目封装富文本编辑器

一、富文本组件封装1、安装依赖yarn add react-quill 富文本依赖yarn add quill-emoji 表情依赖2、引入依赖// react-quill 富文本依赖样式import ReactQuill, { Quill } from 'react-quill';import 'react-quill/dist/quill.snow.css';// quill-emoji 表情依赖样式import quillEmoji from 'quill-emoji';

2021-10-12 09:56:16 1372

原创 react项目封装省市区选择组件

一、地址选择器组件封装1、引入antd的Select组件import React, { Component } from "react";import { Select } from "antd";import { api } from '../api/modules/services/src/api';const { Option } = Select;2、定义组件Props & StatesonSelectData 最后选中后的所有值provinceList 省的数据c

2021-10-08 14:36:56 2264

原创 AntDesign表单Form实例方法（useForm/ref）

1、获取表单实例函数式组件:const AppletModal: React.FC<any> = (props) => { const [form] = Form.useForm();}class类组件:import { FormInstance } from 'antd/lib/form';class AppletEdit extends React.Component<any, any> { form: any = React.cr.

2021-08-30 15:50:44 7814

原创 Typescript类（class）的继承

1、extends 声明类的继承关系class Person构造器函数 constructorEmployee 继承 Person 属性和方法new 关键字 Employee 实例, 赋值给变量e1通过实例调用Person类中eat方法class Person { constructor(public name: string) { this.name = name } eat(){ console.log(this.name) }}// 继承Pers

2021-06-24 14:27:18 461

原创 react项目组件通信

父-子、子-父、跨组件通信

2021-03-03 15:23:56 614 2

原创 react项目页面跳转/传值

1、history.push 跳转引用 withRouter导出组件时使用import { withRouter } from 'react-router-dom'；class Header extends React.Component {}export default withRouter(Header);2、路由传值 query/paramsthis.props.history.push({ pathname: 'login', query: {

2021-02-28 18:01:12 4646

原创 react项目Menu菜单栏、iconfont图标引用

1、操作步骤加入购物车添加至项目Symbol方式引入，复制代码2、react 引用 iconFontimport { createFromIconfontCN } from '@ant-design/icons';const IconFont = createFromIconfontCN({ scriptUrl: [ '//at.alicdn.com/t/font_2196242_dq7mz11miut.js', // icon-home icon-gouwucheman ]

2021-02-27 17:55:59 1471

原创 react项目添加ts

新项目创建1、react + antd + tsyarn create react-app xxx --template typescript安装antdyarn add antd2、react + tsyarn create-react-app xxx --template typescript已有react项目1、安装tsnpm i typescript -g 全局安装npm i typescript -D 当前项目安装2、tsc --init修改tsconf

2021-01-19 15:14:37 3046

原创 vue项目添加ts后问题

1、js-cookie引入的 Cookie 找不到 module 问题yarn add @type/js-cookieyarn add js-cookie2、使用Ele-UI库的方法ts 类型报错 anythis.$refs.form.resetFields()this.$refs.form.validate()解决方法:const ref: any = this.$refs.form;ref.resetFields() // 清空表单ref.validate() // 表单

2021-01-19 15:07:06 391

原创 vue2.x + ts 项目语法规范

1、声明函数private、public、protectedprivate formStatus: string = 'create';2、@ 装饰器（替换钩子函数）从vue-property-decorator引入相应的装饰器（Component, Prop, Watch…）!: 表示强制解析, 告诉ts编辑器一定有值相关装饰器的用法<script lang="ts">import { Component, Prop, Watch, Vue } from "vue

2021-01-19 15:04:06 1605

原创 vue2.x项目添加ts

一、已有vue项目1、安装依赖npm i vue-class-component vue-property-decorator —Snpm i ts-loader typescript tslint tslint-loader tslint-config-standard -Dvue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持tsvue-property-decorator：基于vue-class-component扩展

2021-01-19 14:52:04 4488 4

原创 vue/react 项目中使用echarts

vue 项目yarn add echartsyard add vue-echartimport ECharts from "vue-echarts";import "echarts/lib/component/title";import "echarts/lib/chart/line";components: { 'v-chart': ECharts}<v-chart :auto-resize="true" :options="transaction_report"/&gt

2021-01-19 14:40:19 235

原创 vue+ts项目mockjs模拟数据

1、ts中安装mockyarn add @types/mockjs -D2、新建mock文件mock├─index.ts├─data| └institution.ts具体接口institution.ts文件import Mock, { Random } from 'mockjs';const list:any = [];for (let i = 0; i < 20; i++) { list.push({ id: Random.id(),

2021-01-09 13:36:05 3706

原创 vscode保存插件等配置在GitHub上

一、GitHub设置里找到开发者设置勾选gitst记下token、gistGitHub Token令牌GitHub Gist二、vscode相关操作1、安装Settings Sync插件2、ctrl（Mac是command） + shift + p3、Sync: Advanced Options编辑本地的设置填写记下的token4、Sync: Upload / Update Settings(上传设置)5、在其他设备上的 VSCode中下载设置安装 Se

2020-11-15 16:38:03 651

原创 TypeScrip的类class

1、类的声明public 默认private 私有的，类的内部访问,外部不能使用protected 类的内部和子类能访问到class Person { private name: string; eat() { console.log(this.name) }}let p1 = new Person();p1.name = 'achao'p1.eat(); // achao js文件依然可以编译控制台提示报错[外链图片转存失败,源站可能有防盗链机制,建议将图

2020-10-24 20:20:49 182

原创 Typescript基础类型

1、给变量后面定义类型只能是定义的类型，否则ts会提醒报错any 可以追加其他类型let myname: string = "achao"let age: number = 13let alias: any = "yaoyao"let man: boolean = true2、给方法、参数定义类型方法后面定义的类型时必须return且返回对应类型void 表示没有返回值// 不需要返回值function test ():void { return "" // 提醒

2020-10-23 11:36:48 191

原创 TypeScript基本语法

1、安装typescriptnpm i -g typescripttsc -v 查看安装版本 //Version 4.0.32、生成对应js文件tsc test.ts 同目录下会生成一个对应的jstsc file1.ts file2.ts file3.ts 可以同时编译多个 ts 文件// ts文件let message:string = "Hello World" let num1:Number = 13 let num2:any = [1, 2, 4]consol

2020-10-14 17:05:25 205

原创 webpack构建中tree shaking、scope Hoisting（面试题）

一、tree shaking （摇树优化）tree shaking概念：1个模块可能有多个方法，只要其中某个方法使用了，整个文件会被打到bundle中tree shaking 只将用到的方法打到bundle中，没用的在uglify阶段被擦除webpack默认支持，在.babelrc文件中设置 modules: false即可production mode 下默认开启 tree shaking必须是ES6语法tree shaking原理：依赖于ES6 moudel特性只能作为模块

2020-09-16 09:55:35 786

原创样式穿透解决修改第三方组件样式问题

问题场景:开发中修改第三方组件样式由于 scoped 属性的样式隔离，可能需要去除 scoped、添加!important、另起一个 style这些做法都会带来副作用（组件样式污染、不够优雅）解决方法：可以使用 >>> 或 /deep/ （亲测有效）解决这一问题样式穿透在css预处理器中使用才生效<style scoped>/deep/ .el-checkbox { display: block; font-size: 26px;

2020-09-12 11:00:27 560

原创 webpack基础用法配置及项目初始化

一、初始化1、npm init -ynpm webpack webpack-cli -D2、新建webpack.config.js3、打包命令配置 npm run buildpackage.json文件中"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},二、基础属性1、enter 用来指定webpack的打包入口单入口：enter是一个字

2020-09-12 10:50:59 790

原创 webpack热更新及其原理

1、热更新WDS （webpack-dev-server）npm i webpack-dev-server -D不刷新浏览器不输出文件，而是放在内存中使用 webpack内置的plugin插件 HMR – HotModuleReplacementPluginhot 如果热替换失败就会自动回退使用自动刷新，控制台错误信息被清除，hotOnly 不会使用自动刷新会影响文件指纹2、package.json文件 "scripts": { "test": "echo \"Err

2020-09-12 10:02:37 687

原创平时不注意的前端知识点（面试题）

1、变量默认值例题：// 第一种(function(a,b=1,c){ console.log(b) // null})(1, null, 3)// 第二种(function(a,b=1,c){ console.log(b) // 1})(1, undefined, 3)重新传从参，打印null变量默认为undefined，所以打印的是12、‘ ’ 与 new String()的区别例题：var str1 = 'a', str2 = new St

2020-09-12 09:47:02 174

原创 nodejs爬虫爬取图片并保存本地

关键点：分析请求网址的精简（request / http）分析图片地址——正则匹配fs模块createWriteStream1、请求网址精简https://image.baidu.com/search/index?tn=baiduimage&word=网址2、分析图片地址http://img5.imgtn.bdimg.com/it/u=2577576757,3841266884&fm=26&gp=0.jpghttp://img3.imgtn.bdimg.com/

2020-08-27 23:50:47 1017

原创 flex-grow、flex-shrink、flex-basis的计算规则及面试题

1、当主轴空间有剩余，求最终left、right宽度<div class="container"> <div class="left"></div> <div class="right"></div></div><style> * { padding: 0; margin: 0; } .container { width: 600px; height: 300

2020-07-06 10:34:51 529 2

原创 flex布局及常用属性

2020-07-03 18:10:52 630

Fiddler.rar

空空如也