- 博客(92)
- 资源 (1)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 前端技术栈相关面试知识点总览
部分栏目预览(持续更新中🏃)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
370
原创 同程旅行前端面试汇总
一、同程旅行一面自我介绍技术提问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
857
原创 设计模式 — — 代理模式
缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次运算时,如果传递进来的参数跟之前一致,则可以直接返回前面存储的运算结果。使用代理模式后,图片本地对象负责往页面中创建一个img标签,并且提供一个对外的setSrc接口;代理模式(Proxy Pattern)是为一个对象提供一个代用品或占位符,以便控制对它的。代理对象负责在图片未加载完成之前,引入预加载的loading图,负责了图片预加载的功能。虚拟代理把一些开销很大的对象,延迟到真正需要它的时候才去创建,,起到的作用就是代理。
2024-03-13 10:34:31
292
原创 设计模式 — — 工厂模式
就需要将创建实例的工作从调用方(A类)中分离,与调用方解耦,也就是使用工厂方法创建实例的工作封装起来(减少代码重复)在一个 A 类中通过 new 的方式实例化了类 B,那么 A 类和 B 类之间就存在关联(耦合)使用工厂最终达到的效果是:多态,和类与类之间的松耦合。把具体的产品放到了工厂函数的prototype中。
2024-03-13 10:31:51
351
2
原创 设计模式 — — 单例模式
页面存在一个模态框的时候,只有用户点击的时候才会创建,而不是加载完成之后再创建弹窗和隐藏,并且保证弹窗全局只有一个。第三方库都是单例模式,多次引用只会使用同一个对象,如jquery、lodash、moment。单例模式只会在全局作用域下创建一次实例对象,让所有需要调用的地方都共享这一单例对象。全局态管理库也应用单例模式的思想。
2024-03-13 10:29:06
454
原创 设计模式 — — 前端
保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知;很多第三方库都是单例模式,多次引用只会使用同一个对象,如。比如你订阅了某个博主的频道,当有内容更新时会收到推送。,把他们一个个封装起来,并且使他们可以相互替换。代理模式:为对象提供一个。观察者模式定义了一种。,以便控制对它的访问。
2024-03-13 10:20:30
377
原创 SolidJs与React区别
(React中叫Fiber树),每当发生更新,虚拟DOM会进行比较(Diff算法),比较的结果会执行不同的DOM操作(增、删、改)在发生更新时,可以直接调用编译好的DOM操作方法,省去了虚拟DOM比较这一步所消耗的时间。用来创建响应式数据,它可以跟踪单个值的变化。
2023-10-24 16:29:57
492
原创 JS如何实现继承(面试)
因为 Object.create 方法实现的是浅拷贝,多个实例的引用类型属性指向相同的内存,存在篡改的可能。寄生式继承在上面继承基础上进行优化,利用这个浅拷贝的能力再进行增强,添加一些方法。借助 Object.create 方法实现普通对象的继承。借助 call调用 Parent 函数。构造函数继承(借助 call)问题:与原型式继承一样。
2023-04-28 09:53:00
237
2
原创 如何使用AES加解密提高项目安全性
项目使用AES加解密,非对称加解密:前后端用公钥加密,AES 解密,对称加密:用aesKey、偏移量iv加解密 CryptoES.AES.encrypt
2022-11-21 15:40:53
878
原创 React项目中redux使用
通过 this.props 获取传的 key 的 value 值。通过 this.props 获取对应的触发 action 函数。
2022-09-05 15:24:54
455
原创 Taro + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序
跳转的公众号需要是企业认证的,才能配置业务域名,个人公众号暂不支持。在 global.d.ts 中添加以下内容,微信内置 API 需要小程序开发工具调试,EChart 相关文档。
2022-08-23 13:56:32
5111
原创 React Hooks使用(useEffect、useMemo、useCallback)
调用useEffect时就是在告诉React在完成对DOM的更改后运行你的“副作用”函数。把“创建”函数和依赖项数组作为参数传入useMemo,避免不必要的执行渲染,以达到优化性能的目的。
2022-07-19 11:28:48
907
原创 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
1487
原创 create-react-app / UmiJS创建React项目
react项目的几种创建方法:creat-react-app、umi、pro-cli
2022-05-11 23:17:01
3030
原创 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
1051
原创 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
2095
原创 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
2696
原创 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
8550
原创 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
489
原创 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
4700
原创 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
1545
原创 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
3143
原创 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
404
原创 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
1668
原创 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
4930
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"/>
2021-01-19 14:40:19
253
原创 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
3776
原创 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
698
原创 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
187
原创 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
208
原创 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
225
原创 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
839
原创 样式穿透解决修改第三方组件样式问题
问题场景:开发中修改第三方组件样式由于 scoped 属性的样式隔离,可能需要去除 scoped、添加!important、另起一个 style这些做法都会带来副作用(组件样式污染、不够优雅)解决方法:可以使用 >>> 或 /deep/ (亲测有效)解决这一问题样式穿透在css预处理器中使用才生效<style scoped>/deep/ .el-checkbox { display: block; font-size: 26px;
2020-09-12 11:00:27
591
原创 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
814
原创 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
703
原创 平时不注意的前端知识点(面试题)
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
187
原创 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
1047
原创 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
547
2
原创 flex布局及常用属性
1、flex-direction属性()flex-direction: row | row-reverse | column | column-reverserow(默认值):主轴为水平方向,起点在左端row-reverse:主轴为水平方向,起点在右端column:主轴为垂直方向,起点在上沿column-reverse:主轴为垂直方向,起点在下沿2、flex-wrap属性(如果一条轴线排不下,如何换行)flex-wrap: nowrap | wrap | wrap-reverse
2020-07-03 18:10:52
648
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人