- 博客(240)
- 收藏
- 关注
RSS订阅原创 vue JSX实现一个通用表单生成器
项目中有大量的简易表单，使用组件将其封装起来提高工作效率该组件封装不适用于太具有个性化的表单使用冻结优化配置信息。
2022-07-24 19:02:25
1177
原创 Vue.js全局API——directive
实现一个自定义loading指令请求数据还未返回加载loading,数据加载完成loading隐藏一、创建指令src目录新建directives文件夹loading.jsimport Vue from "vue"import Loading from './loading.vue'console.log('Loading', Loading)const loadingDirective = { // v-loading 所绑定的元素插入到页面上时触发 inserte
2022-05-29 22:38:32
367
原创 Vue.js全局API——filter
情景将后台存的数字订单状态格式化显示在前端使用filter新建filters文件order.js 写处理订单的filter方法export default { setOrderStatus (status) { switch (status) { case 1: return '待付款' case 2: return '待发货' case 3: ret
2022-05-24 21:36:00
413
原创 5道偏原理的面试题
写在前面CSDN话题挑战赛第1期活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f参赛话题：前端面试宝典话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，
2022-05-20 22:07:51
304
原创 使用Vue的mixin混入打造UI组件库
一、定制自己的组件在src下新建一个libs设计组件传值样式Button.vue<template> <button :class="['my-btn', btnStyle]"> <slot></slot> </button></template><script>export default { name: 'MyBtn', props: { btnStyle: Stri
2022-05-19 23:35:15
195
原创 重写forEach解决异步问题
情景需按顺序调用的接口无法使用forEach遍历调用// 已封装的promise请求数组const fetchList = [getInfo, getData, gettable]fetchList.forEach(async (item) => { await item()})这里生成的是多个async函数，无法保证其执行顺序forEach封装forEach源码// Production steps of ECMA-262, Edition 5, 15.4.4.1
2022-05-18 00:08:03
162
原创 extend实现一个modal函数式组件
效果实现一、封装一个基础modal弹窗新建一个messageBox组件messageBox.vue<template> <div :class="['message-box', type]"> <div class="inner"> <header class="header"> <h1 class="title">{{title}}</h1> <s
2022-05-17 00:01:25
265
原创 一道关于arguments的面试题、匿名立即执行函数
arguments和实参的关系情景一：function side(arr) { arr[0] = arr[2]}// 这里c有初始值，会运用到es6结构赋值，就是处于严格模式下function fn(a,b,c = 3) { c = 10 side(arguments) // 不会影响到abc // a: 1, b:1, c:10 return a + b + c}fn(1,1,1)// 12情景二：function side(arr)
2022-05-14 23:59:41
190
原创 Object和Map的区别
概念Object是最常用的一种引用类型数据，可用于存储键值对的集合，在ECMAScript 1st 里添加的Map是键值对的集合，采用Hash结构存储，在ECMAScript2015版本里新增的Hash，一般翻译做散列、杂凑，或音译为哈希，是把任意长度的输入（又叫做预映射pre-image）通过散列算法变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来确定唯一的输入值。简单的说就是一种将
2022-05-13 23:28:09
1794
原创 JS中的稀疏数组与密集数组
一、概念密集数组： 占据连续的内存空间，数组元素之间紧密相连，不存在间隙const arr = [1, 2, 3, 4, 5]稀疏数组: 数组原素之间存在间隙const arr = [1, 2, 3]arr[9] = 9arr // [1, 2, 3, empty × 6, 9]二、特点对于稀疏数组中empty不能用filter、map、forEach等方法处理const arr = [1, 2, 3]arr[9] = 9arr // [1, 2, 3, empty × 6,
2022-05-12 21:57:00
270
原创 2021年度总结——波澜不惊
回首2021，展望2022时光如梭，今天是2021年的最后一天了，回想这一年，感觉忙忙碌碌了一年，仔细想想感觉啥也没干，总的来说今年时光依旧，波澜不惊吧。健康年底的体检是对自我感觉良好赤裸裸的打脸，各种大大小的毛病，平时对嘴巴放纵迟早会在身体上体现出来的，还有就是工作的原因导致作息不规律， 跑步锻炼计划断断续续，缺乏运动。在2022新的一年里做以下规划：调整作息时间，按时吃饭跑步锻炼不能放弃双休周末多去运动，少待在家里打游戏个人成长今年大概读了4，5本，只有两本是完全看完的
2021-12-31 23:28:54
1617
2
原创 解决Antd输入框卡顿问题及Pubsub.js的使用
项目场景：项目中通过表单来填写校验大量复杂数据问题描述：项目中使用的是Ant Design of Vue这个组件库，使用FormModel 表单,数据字段和校验较多时,表单操作卡顿；eg： a-input输入框，等你输入完字及，几秒后才慢慢出现你输入的字符 原因分析：vue在进行输入时，进行了多次的render刷新渲染操作，导致了input框输入时发生的卡顿现象解决方案： 官方给出的解决办法，将 Form 相关的业务独立到一个单独的组件中，减少组件渲染的消耗，如果有很多校验项，可把它
2021-12-02 22:27:53
2506
原创 async函数&&await关键字
async函数基本概念async 就是 Generator 函数的语法糖const {promisify} = require('util')const {readFile} = require('fs')const path = require('path')const file1 = path.join(__dirname,'./txt/1.txt')const file2 = path.join(__dirname,'./txt/2.txt')const readFileP =
2021-07-04 20:20:39
202
原创 Generator函数
GeneratorGenerator(生成器) 函数是 ES6 提供的一种异步编程解决方案，并且Generator函数的行为与传统函数完全不同。定义Generator函数function* f() { }形式上，Generator 函数是一个普通函数，但是有两个特征。function关键字与函数名之间有一个星号函数体内部可以使用yield关键字，定义不同的内部状态（yield在英语里的意思就是“产出”）。...
2021-06-28 21:50:03
157
原创 Iterator
IteratorIterator（遍历器、迭代器） 是一个对象，Iterator对象需要包含一个next方法，该方法返回一个对象IteratorObject，此对象有两个属性，一个value表示当前结果，一个done是一个布尔值表示是否可以继续迭代let it = makeIterator();function makeIterator() { let nextIndex = 0; return { next: function() { return nextInd
2021-06-22 23:40:12
149
2
原创 Reflect
ReflectReflect是 ES6 为了操作对象而提供的新 API。ES6把原先版本中很多语言层面的API，比如Object.defineProperty delete in等集中在了Reflect的静态方法上，引入Reflect的目的有这样几个。将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Ref
2021-06-20 22:47:06
121
原创 Proxy
Proxy在ES6之前Object.defineProperty可以拦截对象属性的读取和修改操作，Proxy 可以理解成比这个API更强大的，在目标对象之前架设一层的“拦截”。外界对该Proxy对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。注意：只有对生成的 Proxy 实例操作才能起到拦截的作用生成Proxy实例： let proxy = new Proxy(ta
2021-06-17 22:59:48
150
原创 Set与WeakSet
SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。需要记录不同成员的又不希望重复记录的情况下可以用到Set生成Setlet set1 = new Set()let set2 = new Set([1,2,3])Set实例属性Set.prototype.size：返回Set实例的成员总数。Set四个操作方法Set.prototype.add(value)：添加某个值，返回Set结构本身。Set.prototype.delete
2021-06-15 00:00:58
181
1
原创 Symbol类型
Symbol类型ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：Undefined、Null、Boolean、String、Number、Object直接调用Symbol函数即可生成一个Symbol，注意Symbol函数前不能使用new命令，否则会报错。Symbol函数可以接受一个字符串作为参数，表示对 Symbol 的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。 let s1 = Sym
2021-06-12 17:11:51
191
原创 线性数据结构——链表
线性数据结构——链表链表是一个线性结构，同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间，实现灵活的内存动态管理。js模拟链表// 节点 (构成链表)class Node { constructor (v, next) { this.value = v this.next = next }}// 链表的管理, 增删改查class LinkList { constructor () { // 链表的长度 this.size =
2021-05-18 23:30:59
1294
1
原创 Ant Design of Vue switch使用Popconfirm气泡确认框
在使用switch开关使用Popconfirm气泡确认框二次确认<template> <div> <a-popconfirm title="选择否将清除数据?" :visible="visible" ok-text="是" cancel-text="否" @visibleChange="handleVisibleChange" @confirm="confirm" @cancel=
2021-03-08 22:07:42
3859
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人