- 博客(89)
- 收藏
- 关注
RSS订阅
原创 原生JS关于表单的增删查
一、增添元素在增添元素的时候，我们可以考虑到节点的方式来增添：1.创建一个新的元素2.输入新建元素的内容3.向已有元素追加新元素有了这三点之后呢你便可以增添一个新元素了，快试试吧！e.g： ...
2018-05-23 19:50:19
922
原创 2024前端面试题-网络篇
主要区别是序列化和反序列化，RPC通过二进制高效传输，HTTP是json格式传输，序列化更消耗性能；RPC可以基于TCP，也可以基于HTTP,而THHP只能基于HTTP;2.0是长连接支持多路复用，支持头部压缩和服务器推送，二进制传输，1.0和2.0都是tcp连接。3.0是udp，3.0的优点有连接迁移、无队头阻塞、自定义拥塞控制、前向安全和前向纠错。服务器响应，生成http报文返回给浏览器。4.在一个网站中输入url会发生什么。1.1是长连接，为文本传输。HTTP1.0是短连接。tcp连接，三次握手。
2024-08-22 21:17:47
423
原创 2024前端面试题-工程化篇
Code Splitting代码分割，是一种优化技术。它允许将一个大的chunk拆分成多个小的chunk，从而实现按需加载，减少初始加载时间，并提高应用程序的性能。在Webpack中通过optimization.splitChunks配置项来开启代码分割。
2024-08-22 20:54:21
1193
原创 2024前端面试题-js篇
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
2024-08-22 03:01:54
1634
原创 2024前端面试题-vue(2/3)篇
vue2中虚拟dom进行的是全量的对比，vue3采用了静态标记（PatchFlag），对比如果两个结点有不同的地方，就用patch对象存储起来，最后用patch记录的消息去局部的更新dom效率更高。在diff算法中，如果数组的长度发生变化，会导致key的变化，Vue 会复用错误的旧子节点，做很多额外的工作，不能提高性能。如果data是对象的话，对象属于引用类型，会影响到所有的实例。vue2中无论元素是否参与更新，都会被重新创建然后渲染，vue3不参与更新的元素只会被创建一次，在渲染的时候直接被复用。
2024-08-22 01:34:04
1616
原创 2024前端面试题-css篇
使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；3.使用display属性：将元素的display属性设置为inline-block、table-cell、table-caption、flex或grid等也可以触发BFC。
2024-08-21 23:41:30
1310
原创 react函数组件中使用redux
运用了useDispatch、useSelector这两个Hook实现了react组件间的数据共享代替了老版的conncet
2022-08-12 11:19:14
1219
1
原创 React props校验
1.安装包prop-typesnpm i prop-types2.导入prop-typesimport "./App.css"import React from "react"import propTypes from "prop-types"//类组件class App extends React.Component { render() { const { color } = this.props return ( <div classN
2022-04-13 16:03:41
999
原创 echarts折线图tooltip自定义formatter
若想自定义tooltip就要用到formatter，如何实现呢？formatter中的params到底是啥呢？如图所示：打断点看params是这样的。这个params中的数据取决于我们series中的数据，也就是这个。在seriesData中的data我们通常是这样的[123,456,789,147,852,963],这种包含数字的数组，如果想要实现自定义formatter我们就要将data里的数据处理一下写成数组对象的形式，如下：[ { name: "x...
2022-03-09 16:23:31
9995
1
原创 使用svg-sprite-loader处理svg图标
在项目的根目录下创建vue.config.js配置webpack loader。代码如下：const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: (config) => { config.module.rule('svg').exclude.add(resolve('src/icons'))
2021-12-28 14:07:12
800
原创 手写promise核心代码
class Promise { static PENDING = "待定"; static FULFILLED = "成功"; static REJECTED = "失败" constructor(func) { this.state = Promise.PENDING this.result = null this.resolveCallbacks = [] this.rejectCallbacks = [] .
2021-12-28 10:29:06
135
原创 vue3封装icon图标组件
1.创建utils文件夹，在utils文件夹中创建validata.js,判断图标是否为外部资源。validata.js:// 判断是否为外部资源export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path)}2.在components中创建SvgIcon文件夹，在SvgIcon文件夹中创建index.vue。index.vue:<template> <!--
2021-12-27 16:43:19
2084
3
原创 vscode---ESLint与Prettier配合解决代码格式问题
目录1.创建项目时勾选ESLint2.配置.eslintrc.js（在项目根目录下）：3.安装Prettier4.配置prettier5.其他设置1.创建项目时勾选ESLint选择Standard。2.配置.eslintrc.js（在项目根目录下）：添加'space-before-function-paren': 'off'是为了解决ESLint与Prettier的冲突module.exports = { root: true, env: {...
2021-12-21 14:56:49
707
原创 javascript——集合
集合：集合通常是由一组无序的，不能重复的元素构成，不能通过下标值访问。集合的操作：并集：对于给定的两个集合，返回一个包含两个集合中所有元素的新集合。交集：对于给定的两个集合，返回一个包含两个集合中共有元素的新集合。差集：对于给定的两个集合，返回一个包含所有存在于第一个集中且不存在于第二个元素的新集合。子集：一个集合被另一个集合所包含。代码：<!DOCTYPE html><html lang="en"><head> ...
2021-12-16 17:12:47
2357
原创 javascript——单向链表
链表：存储数据一般可以用数组或者链表，不同于数组的是，链表中的元素不必是连续的空间。链表中的每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（指针）组成。
2021-12-15 16:29:12
1848
1
原创 javascript——优先级队列
优先级队列:优先级队列是不同于先进先出队列的另一种队列。每次从队列中取出的是具有最高优先权的元素,可设较小的数字具有较高的优先级。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor.
2021-12-14 10:55:14
449
原创 javascript——队列（击鼓传花）
队列（FIFO）规则：先进先出击鼓传花游戏规则：规定一个数字，从第一个人的名字开始数，数到谁就淘汰谁，最后剩下的人获胜。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
2021-12-13 16:10:25
2810
原创 javascript——栈（十进制转二进制）
<!DOCTYPE html><htmlconsole.dir(object);> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1..
2021-12-13 14:47:47
386
原创 原型与原型链
1.对应名称prototype:原型 _proto_:原型链2.从属关系prototype:函数的一个属性(对象) _proto_:对象Object的一个属性(对象) 对象的_proto_保存着该对象构造函数的prototype（_proto_指向prototype） 原型对象中有一个属性constructer,指向函数对象ps:构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。另外就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关
2021-12-06 15:14:38
109
原创 Syntax Error: TypeError: this.getOptions is not a function
错误：Syntax Error: TypeError: this.getOptions is not a function原因分析：sass-loader版本太高解决办法：npm uninstall --save sass-loader // 卸载 sass-loadernpm i -D sass-loader@8.0 // 安装低版本sass-loadernpm uninstall --save node-sass // 卸载 node-sassnpm i node-sass@4.
2021-12-06 15:07:36
191
原创 ts类型别名与接口
1.接口可以指明一个变量里面能拥有哪些东西，使用interface声明；类型别名与接口类似，是为一个类型取一个新名字，使用type来声明。//接口interface aaa { x: number; y: string;}interface bbb { (x: number, y: string): void;}//类型别名type aaa = { x: number; y: string;}type bbb = { (x: number, y: stri
2021-12-01 15:30:17
845
原创 vue3按需引入Ant Design icon
1.使用Ant Design图表库中的图标1.1安装npm install --save @ant-design/icons-vue1.2修改文档版本vue3项目使用2.x或3.x。1.3 使用（1）点击复制代码（2）将复制的代码粘贴在你要使用的地方（3）在script中引入import { UserOutlined} from '@ant-design/icons-vue';（4）若使用了setup语法糖即到此结束，没有使用则需要在c...
2021-11-30 16:31:00
3926
原创 ts枚举学习笔记
参照：枚举 · TypeScript中文网 · TypeScript——JavaScript的超集enum枚举类型是对 JavaScript 标准数据类型的一个补充。 使用枚举类型可以给一组数起名字，创建一组有区别的用例。数字枚举数字枚举可以自增长，给Up初始化赋值为1，即后面Down = 2，Left = 3，依次递增。如果不初始化Up，则Up = 0,Down = 1，Left = 2，依次递增。enum Direction { Up = 1, Down, L..
2021-11-18 10:55:05
715
2
原创 ts泛型学习笔记
使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。function identity<T>(arg: T): T { return arg;}T帮助我们捕获用户传入的类型。泛型使用方式一：传入所有的参数，包含类型参数。let output = identity<string>("myString");泛型使用方式二：使用类型推论，即编译器会根据传入的参数自动地帮助我们确定T的类型。let output = identity("
2021-11-18 10:26:30
854
原创 ts函数学习笔记
TypeScript里的每个函数参数都是必须的，传参的时候要有对应的值，不然会报错。可以使用可选参数，在参数名后加“？”，可选参数必须跟在必须参数后面，若将x设置可选，则x放在后面。function aaa(x: string, y?: string) { if (y) return x + "," + y; else return x;}在所有必须参数后面的带默认初始化的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。带默认值的参数不需要
2021-11-18 09:38:41
450
原创 ts类的学习笔记
static定义静态方法和静态属性是类的方法和属性，不是实例的，因此不能被实例调用，只能(类名).xxx。 基类是父类，派生类是子类。 abstract定义的抽象类一般不会被实例化，是作为基类使用的，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 派生类包含了一个构造函数，它必须调用super()，它会执行基类的构造函数。 定义为public值可以自由访问该成员，ts中成员都默认为public；当成员被标记成private时，它就不能在声明它的类的外部访问；protected成员在基类与其
2021-11-17 16:45:51
214
原创 Element ui 树点击展开所有子节点
<el-tree :load="loadNode" lazy show-checkbox :props="props" :render-content="renderContent" node-key="id" :default-checked-keys="checked" :default-expanded-keys="path" @check-change="getCheck" .
2021-11-04 17:20:09
1086
原创 vue3.0项目实现rem布局(自适应)
1.创建文件在public中创建js文件夹，在js文件夹下创建rem.js文件rem.js:function remSize(){ var deviceWidth = document.documentElement.clientWidth || window.innerWidth if(deviceWidth >= 750){ deviceWidth = 750 } if(deviceWidth <= 320){
2021-10-12 14:19:37
1826
原创 搭建ts项目
创建项目创建文件夹，复制以下文件：package.json:{ "name": "03", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "start": "webpack serve --open chr
2021-09-03 16:06:27
1386
原创 ts中webpack的配置
1.安装Webpacknpm install webpack webpack-cli --save-dev2.安装ts-loadernpm install ts-loader --save-dev3.安装Webpack插件//自动生成html文件npm install html-webpack-plugin --save-dev//修改后保存dist中文件自动更新npm -D clean-webpack-plugin4.webpack搭建服务器搭建服务器后可随时
2021-08-31 23:48:54
1171
原创 ts编译配置项
tsconfig.json{ "compilerOptions": { "target": "es6", //用来指定ts被编译为js的版本 "module": "es6", //指定要使用模块化的规范 "moduleResolution": "node", "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "str
2021-07-30 12:49:01
443
原创 原生微信小程序使用watch监听
1.封装watch创建watch.js：/** * 设置监听器 watch.js */export function setWatcher(page) { let data = page.data; let watch = page.watch; Object.keys(watch).forEach(v => { let key = v.split('.'); // 将watch中的属性以'.'切分成数组 let nowData = data; // 将da
2021-07-28 15:11:09
1628
原创 es6两个数组取差
let arr = [1,2,3]let arr1 = [1,2,3,4]let arr2 = [...arr].filter(item => [...arr1].every(i => i !== item));console.log(arr2)
2021-07-16 09:31:23
953
原创 微信小程序改变数组对象中的属性
data里的数据：data: { listData: [{ id: 0, title: "订单商品", current: 0 }, { id: 1, title: "订单编号", current: 0 }, { id: 2, title: "收货人", current: 0 },
2021-07-02 12:22:11
840
原创 Vue中组件局部刷新
1.序言（1）provide与inject在实现组件局部刷新之前先来说一说provide与inject方法。provide是放在最上层的页面，可以实现传数据给它的子组件和多重孙组件，只需要在子孙组件中用inject接收就可以了。 (2)其他的方法实现页面刷新this.$router.go(0);location.reload();这两种方法都是强制刷新页面，会出现短暂的白屏闪烁，不推荐使用。2.provide与inject实现VUE中组件局部刷新首先在app.vue.
2021-05-26 13:46:22
1354
原创 Vue中按钮的权限控制
利用自定义指令与vuex来实现首先，在src目录下的view文件夹中创建index.vue、然后创建directives文件夹，在其中新建has.js，创建store.js。store.js:设置state中的状态。import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { buttonPermission:{ add:t
2021-05-25 16:32:56
355
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人