- 博客(37)
- 收藏
- 关注
RSS订阅原创 qiankun报错的一些方向
qiankun报错的一些方向qiankun报错的一些方向一、往主应用给子应用配的路口方面去查错误二、主要为子应用的两个方面的问题，子应用的main.js没有配qiankun周期方法 也就是bootstrap mount 、unmount等方法 一般不会错，比较都是cv过来的第二个是vue.config.js里的配置问题 ，照着网上的模板一一对比就行...
2022-05-18 11:06:40
324
原创 跳转路由的时候遇到的堆栈溢出问题 Maximum call stack size exceeded
问题：在做单点登录的时候，跳转其它项目的时候，出现了这个问题原因：跳转另一个项目是没有指定页面的，所以会访问到’/‘在路由文件中如果错误的配置了重定向地址，我是配到了login所以反复访问这个地址 大概37次，页面终于报错了修改重定向地址就没有问题了...
2022-04-28 17:23:32
882
原创 【keep-alive 中使用 show-overflow-tooltip 切换路由 tooltip 不消失的简单解决办法】
tooltiploading
2022-01-18 17:49:37
871
原创 [Vue warn]: Duplicate keys detected关于v-for的重复key报错 el-select
在使用v-for的时候，很容易出现如图所上的报错情况 v-for="item in fileTypeList" :key="item.value" :label="item.label" :value="item.value"根本原因是为了省事直接 在key的地方使用了item.属性当使用的数组对象中的value属性有重复值的时候就会报错，1.因此可以采用正确写法v-for="(item.
2021-10-21 17:34:50
11646
3
原创 axios.delete的传参与post/get的区别
今天在调用axios.delete方法时，由于传参的问题，搞了好久没有调通，后来通过查资料了解到的一个小bug。问题背景：调用删除接口的时候采用的delete方式，然后用get/post的传参方式传值结果调试的时候，方法直接走完，也不报错，network也没有记录到接口的触发。然后发现delete方式传参需要包裹参数也就是 post/get 是这样 axios.delete(url,params)而delete是这样 axios.delete(url,{data:params})也就是多一层d
2021-09-23 17:50:53
656
原创 核酸检测小程序项目总结
从接到需求到开发出手机网页版成品和小程序成品和后台数据管理页面一共花了2周不到的时间，已基本满足用户需求，实现记录用户信息，将用户信息与检测试管绑定。后台能够管理工作人员权限、字典管理、各类数据增删改查等。 工作上遇到的第一个难点是甲方需求的不断变更，这个是工作中常见的问题，早上通常会将客户灵机一动想到的“GOOD IDEA”梳理，换位思考，互相理解，从中挑出可以实现的，过滤掉太理想化的。然后一天的工作就是将其展示出来，晚上下班前看个大致效果。 第二个难点是一开始人员的变动，其实没几...
2021-09-21 21:28:58
2547
原创 3种常见的数据类型检测方法--学习笔记
1.数据类型前端工作学习中，操作对象的数据类型有多种，主要又由7种基本数据类型和1种引用数据类型区分开来7种基本数据类型：String、Number、Boolean、Undefined、Null、Symbol、Bigint引用数据类型又由Object细分为以下5种：Array、Function、RegExp、Date、Math那么对数据类型的比较成为了一个令人头疼的问题1.简单的typeOf利用typeOf...
2021-09-01 11:38:24
549
原创 简单的uniapp获取浏览器缓存的同步和异步方法
场景：原pc项目转简易移动版uni，登录之后，调用接口的时候，接口401鉴权失败。分析一顿之后发现是登录返回的token没有塞到后来axios请求的请求头中的Authorization中再一看登录接口确实返回了token，那么问题就是token拿到之后没有塞到请求头配置变量中一看果然是异步的问题：原来是使用了 uni.setStorage()和uni.getStorage() 造成token传递的时候异步最后直接改成 uni.setStorageSync() 和 uni.getStorageSy
2021-08-24 22:09:08
979
原创 身份证校验简易版
最近工作中遇到前端写身份证的校验，查了下网上的正则表达式直接套用发现会有些许bug，于是拆解了正则表达式，便于自定义校验18位身份证的结构/^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1|2][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/; 6位地址编码>|< 4位年份码 1900-2029 >|< 2位月份
2021-08-15 16:26:26
302
原创 输入失焦和提交按钮冲突的时候 -- --移动端网页
在开发移动端网页的时候遇到了一个问题，输入框还未失焦，输入校验的值改变的时候，会先触发了@change绑定的方法，这个时候对按钮@click方法会有卡壳。研究了一些方法，最后发现可以使用自带的@touchstart方法规避这一类问题...
2021-08-15 11:14:02
227
原创 3-3-1vuex 状态管理
1.目标vue组件间通信方式回顾vuex核心概念和基本使用回顾购物车案例模拟实现vuex学会vux 是什么 怎么使用 原理2.组件内状态管理流程vue 核心功能 数据驱动 和 组件化state 状态： 数据 data 需要绑定到视图view 视图： 模板action 动作： 修改方法 修改数据要更新视图3.通信方式–父组件给子组件传值1.父组件给子组件传值2.子组件给父组件船只3.不相干组件传值 父组件给子组件传值 子组件通过prop
2021-05-22 22:08:51
97
原创 2-1-3自动化构建
1.自动化构建 通过机器代替手工，将开发写的源代码 自动化转换成生产环境的生产代码提高 语法 规范 标准SassECMAScript但是用法不被浏览器支持 所以需要 自动化构建工具2.自动化构建的通过Sass增加css的编程性.scss文件 通过sass模块来构建编译由于重复的命令使 操作难搞将其他模块中多次重复的发杂指令 整合到 npmscripts命令可以方便使用 代替目标动作指令NPM Scripts 实现自动化构建最方便的工具3，常用的自动化构建工具G
2021-05-21 03:02:08
250
原创 2-1-2脚手架工具
1.脚手架工具的概述脚手架 即 自动创建项目基础文件的工具不仅文件 约定和规范骨架： 组织结构 开发范式 模块依赖 工具配置 基础代码 IDE 创建项目的过程就是 创建骨架 过程前端脚手架 一般不集成某个IDE 而是独立的工具 为了解决创建项目的过程中 复杂的工作 内容： 1.脚手架的作用 概念 2.常用的脚手架工具 实例 3.通用脚手架工具解析 解析 4.开发脚手架 开发2.常用的脚手架工具一般只使用本身框架vue-cli
2021-05-21 03:00:59
191
原创 1-2-3（下）js性能优化
1.JSBench的使用测试js执行效率的网站只用一个标签也测试 ，执行代码的时候停留在页面多执行继承 取高概率事件2.堆栈中的js执行过程ESStack 执行环境栈 |AB1 堆| | function foo(b){'''}| ... name : foo| ... length : 1| EC(baz):函数开辟的全局上下文 this window
2021-05-21 02:56:00
180
原创 1-2-3（上）js性能优化
1.js优化概述1.1内存管理1.2垃圾回收和常见GC算法1.3V8引擎的垃圾回收1.4Performance工具1.5代码优化实例2.js内存管理性能一路升高 导致 内存泄漏内存：可读写单元组成，表示一片可操作空间管理：开发者主动去操作一片空间的申请、使用和释放申请内存空间 let bb = {}使用内存空间 bb.name = 'hzj'释放内存空间 bb = null3.js的垃圾回收js的内存管理是自动的对象不再被引用时是垃圾对象不能从根上访问时是垃圾(语法
2021-05-21 02:54:45
69
原创 1-2-2（下）TypeScript语言
1.ts概述包含 js+ES6+类型系统可以编译成js任何一种js运行环境都支持ts开发比flow功能更强大 更完善Angular/Vue.js前端领域的第二语言适合长周期大项目缺点： 本身多了很多概念 项目初期 ts会增加一些成本2.ts上手提供了强大的类型系统3.ts配置文件4.原始类型stringnumberboolean以上允许为nullvoid undefinednull nullundefinedsymbol symbol()
2021-05-21 02:52:55
100
原创 1-2-2（上）FLOW概述
1.用ts解决js自有类型系统的问题强类型和弱类型静态类型和动态类型js自有类型系统的问题Flow静态类型检查方法 小工具TS的语言规范和基本应用2.类型系统 —强类型和弱类型 (类型安全)2.1强类型 更强的类型约束 不会有隐式数据类型转换实参类型和形参类型必须完全相同2.2弱类型不会限制实参的类型 语法上不存在问题 运行可能有问题js是弱类型语言python是强类型语言3.静态类型和动态类型 （类型检查） strong3.
2021-05-21 02:51:55
538
原创 1-2-1ES6新特性
1.let和块级作用域在块级作用域 {}中用let声明的变量为局部变量1.2 var声明的对象在代码层次上，可以在声明前调用，不会报错，属于程序员的bug’console.log(x)var x = 1;1.3 const声明对象的内存地址不可修改const a = {}a.name = ‘aa’a = {} 报错1.4 即最好少用var var为最初定义的语法主用const辅用let1.5 数组的解构 反向定义固定次序提取const arr = [1,2,3]c
2021-05-21 02:49:43
119
原创 1-1-3手写promise源代码
1.promise的执行顺序是1.执行声明函数2.执行声明函数里的方法3.执行promise里的then方法 4.执行外面的then方法2.异步调用多个then函数存储回调函数的结果 最后再使用shift 取数组里的第一个元素且删除第一个元素3.链式调用新增判断4.then方法不能返回自己我认为是防止死循环5.捕获错误this 是当前 没有则是下一个proimse .then里捕获异常 则应该是下一个捕获异常6.总结：promiseresolvereject
2021-05-21 02:46:40
182
原创 1-1-2js的异步编程
1.并行执行promise.all方法var promise = Promise.all([ajax(’/api/users.json’),ajax(’/api/posts.json’)])如果有任何一个失败 就也失败了 这是串行的 和链式的不同如果有全部完成就完成了promise.race()方法有一个结果就完成了eg：如果在规定时间未结束 则失败2.宏任务和微任务settimeout是宏任务promise是微任务3.generator 异步方案yi
2021-05-21 02:45:47
176
原创 1-1-1函数式编程
1.1函数式编程由React引起函数式编程的关注即最基本的方法VUE3也使用函数式编程可以抛弃this方便测试和并行处理由一些库可以帮助我们使用函数式编程 较为成熟1.2函数式编程的概念对运算过程进行抽象根据输入通过运算得到某种输出y=f(x)即是指x和y的关系 x和y可以是数据或函数相同的输出始终得到相同的输出（纯函数）可以让代码进行重用//非函数式let num1=2;let num2=3;let sum=num1+num2;console.log(sum)//函数
2021-05-21 02:40:17
171
原创 3-3-3nuxt案例
1.案例 realworldvue使用经验nuxt基础node webpack基础收获 掌握使用nuxt.js开发同构渲染应用 增强vue.js实践能力 掌握同构渲染应用中常见的功能处理 用户状态管理 页面访问权限处理 seo优化 。。。 掌握同构渲染应用的发布和部署 webpack2.创建目录初始化项目安装nuxt修改配置命令 nuxt3.导入页面模板导入样式资源cdn工具 引用国内 或者下载好配置布局组件公共的头部和底部 配置layout
2021-05-18 01:34:09
306
原创 3-3-2服务端渲染基础
1.概述单页面应用 优缺点优点1.用户体验好2.开发效率高3.渲染性能好4.可维护性好。。。 缺点 1.首屏渲染时间长 2.不利于SEO1.nuxt.js介绍构建同构应用集成了 vue2vue-routervuexvue服务器渲染 mode： spavue-meto 使用 webpack wue-loader babel-loader 服务端渲染 ssr 单页应用程序 spa 静态化 预渲染2.nuxt.js构建 – 路由.nuxt下的
2021-05-18 01:33:12
49
原创 3-2-3模板编译和组件化
1.模板编译介绍将模板转化为渲染函数作用：使用Vnode描述视图以及各种交互，用户自己编写vnode比较复杂用户只需要编写类似html的代码 -vue.js模板，通过编译器将模板转换为返回vnode的render函数.vue文件会被webpack在构建的过程中转换成render函数2.体验模板编译结果function render(){ with(this){return _c(tag ‘div’, createElement(vm, a, b, c, d, false)
2021-04-24 03:50:42
142
原创 3-2-2虚拟dom源码分析
1.虚拟dom 课程回顾1.虚拟dom库 snabbdom2.vue.js响应式原理模拟实现3.vue.js源码解析- 响应式原理2.虚拟dom概念回顾1.什么是虚拟dom是使用js对象描述真实dom 本质是js对象操作作用到虚拟dom 映射到真实dom vue.js中的细腻dom借鉴snabbdom。并且添加了vue.js的特性 例如指令和组件机制 2.为什么使用虚拟dom 1.避免直接操作真实dom 不去想浏览器兼容问题 提高开发效率 2.作为一个中间层可以跨平台
2021-04-24 03:50:11
72
原创 3-2-1vue响应式数据源码
1.Vue源码解析 --响应式原理最好不要太看重细枝末节 支线 主要看主线vue.js静态成员和实例成员初始化过程首次渲染过程数据响应式原理2.准备工作Vue源码的获取分析Vue2.6新版本发布后 一段过渡时期dist 打包后的结果examples 示例src 源码部分compiler 编译器 模板转换成 vnode函数corecomponetsglobal-apiinstance vue的实例observer 响应式数据vdom 虚拟dom 功能区
2021-04-24 03:47:07
377
原创 3-1-1Vue大概认知
1.Vue.js基础回顾1.回顾Vue.js基础语法2.Vue Router原理分析与实现3.虚拟DOM库 Snabbdom 源码分析4.响应式原理分析与实现5.Vue.js源码分析2.Vue.js基础结构new Vue({el: ‘#app’,data: {company: {name: ‘拉勾’,address: ‘中关村创业大街籍海楼4层’}}})3.Vue的生命周期new Vue()初始化事件&生命周期beforeCreate 钩子 初始化 注
2021-04-20 11:23:26
74
原创 3-1-2Vue-Router原理实现
1.课程目标实现vue模拟一个最小版本的Vue响应式原理在面试的常见问题学习别人优秀的经验，转换成自己的经验给Vue实例细则一个成员是否是响应式的给属性重新赋值成对象，是否是响应式的 为血虚vue源码做准备2.数据驱动数据驱动数据响应式数据模型普通的js对象 当我们改变数据 识图会自动更新 避免繁琐的DOM操作 提高开发效率双向绑定 数据 视图 互相都会改变 v-model在表单元素上创建双向数据绑定 数据驱动：vue 最独特的特性之一 开发过程中仅需要关注数
2021-04-20 11:22:44
105
原创 3-1-3Vue响应式原理
1.课程目标实现vue模拟一个最小版本的Vue响应式原理在面试的常见问题学习别人优秀的经验，转换成自己的经验给Vue实例细则一个成员是否是响应式的给属性重新赋值成对象，是否是响应式的 为血虚vue源码做准备2.数据驱动数据驱动数据响应式数据模型普通的js对象 当我们改变数据 识图会自动更新 避免繁琐的DOM操作 提高开发效率双向绑定 数据 视图 互相都会改变 v-model在表单元素上创建双向数据绑定 数据驱动：vue 最独特的特性之一 开发过程中仅需要关注数
2021-04-20 11:22:09
165
原创 3-1-4虚拟DOM实现原理
1.课程目标了解什么是虚拟DOM，虚拟DOM的作用Snabbdom的基本使用Snabbdom 的源码解析2.什么是虚拟DOM用普通js对象面试DOM对象创建虚拟dom的开销比真实dom小很多{seldatachildremtextelekey}3.为什么使用虚拟DOM1.前端开发开始粗糙 项目复杂，操作也复杂2.出来了MVVM框架 视图和状态同步3.模板引擎可以简化视图操作，没法跟踪状态 变化无法得知上一步的状态删除再创建4.虚拟DOM跟踪状态变化有效的更
2021-04-20 11:16:39
135
原创 2-2-5webpack源码
1.内容概述1.webpack打包流程拆分不同的环节2.做了什么工作3.如何完成的4.使用了什么技术5.模块的加载和loader的使用6.webpack的配置演示2.打包后源码分析path: path.resolve(‘dist’) 输出目录的路径对输出文件进行分析1.我们称之为模块定义“./src/index.js”: 路径模块id 视为键值对(function (module, exports) {console.log(‘index.js内容’)module.exp
2021-04-13 01:01:16
194
原创 2-2-4规范化标准
1.规范化标准前端工程化为什么要有规范标准 软件开发需要多人协同 不同开着具有不同的编码习惯和喜好 不同的喜好增加项目维护成本 每个项目或者团队需要明确统一的标准哪里需要规范化标准 代码 文档 甚至时提交日志 开发过程中认为编写的成果物 代码标准化规范最为重要实施规范化的方法 编码前 人为的标准约定 通过工具实现Lint ESLint 工具使用 定制ESLint校验规则 ESLint 对TypeScript的支持 ESLint结合自动化工具或者Webpack 基
2021-04-13 01:00:21
51
原创 2-2-3Rollup.txt
1.Rollup更小巧ESM打包器没有HMR热模块替换充分利用ESM各项特性的高效打包器2.快速上手RollupRollup 安装指令rollup 路径文件 -iife --dist/bundle.js打包结果简洁，剔除不使用的代码因为自动使用tree-shaking3.配置文件 rollup.config.jsexport default {input: ‘src/index.js’,output: { //对象file: ‘dist/bundle.js’,fo
2021-04-13 00:59:37
57
原创 2-2-2Webpack打包
1.打包工具的由来1.ES Modules存在环境兼容问题2.模块文件过多，网络请求频繁3.所有前端资源都需要模块化解决方法： 新特性代码转换兼容所有环境的代码 散落的模块文件打包到一起 支持不同种类资源文件类型新特性代码编译模块化JS打包支持不同类型的资源模块2.模块打包工具 Module bundler 概要Webpack模块加载器 Loader 解决兼容问题代码拆分 根据需要打包代码增量加载渐进式加载资源模块 Asset Module 前端整体的模块化
2021-04-13 00:58:53
218
原创 2-2-1模块化开发.txt
1.模块化概述管理组织代码1.模块化演变过程2.模块化规范3.常用的模块化打包工具4.教育模块化工具构建现代Web应用5.打包工具的优化技巧2.模块化的演进过程代码的规模需要，模块化会遇到一些问题1.文件划分的方式 污染全局作用域 命名冲突问题 无法管理模块依赖关系 早期模块化完全依靠约定 2.命名空间方式 减少命名冲突 没有私有空间，能在外部被访问修改 依赖关系没有解决 3.IIFE 函数提供的私有作用域中---私有成员 只有需要暴露给外部的成员才挂到全
2021-04-13 00:58:04
90
原创 2-1-1工程化概述
1.工程化的定义和主要解决的问题通过工程化提升 战斗力面临的问题： 1.使用ES6，但兼任有问题 2.使用css编程化工具 运行环境不支持 3.模块化的方式 运行环境不支持 部署上线，手动压缩代码和资源文件 过程，手动上传代码到服务器 （热补嘿嘿） 多人协作，代码风格不统一 1.传统语言或语法的弊端2.无法使用模块化、组件化3.重复的机械式工作4.代码风格统一、质量难保证5.依赖后端服务接口支持6.整体依赖后端项目需要工程化2.工程化表现提高效率 降
2021-03-29 22:50:04
140
原创 lodash里面 _.flowRight()方法与_.curry() 结合后的一些自推
在执行lodash里面的 .flowRight()方法 里调用.curry()的方法时 对入参顺序感觉奇怪const split = _.curry((sep, str) => _.split(str, sep))//省略其他方法 只针对split const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' '))1.对这个执行顺序感觉奇怪 调用_.curry方法
2021-01-15 02:35:54
300
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人