- 博客(50)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 React中实现防抖功能的两种方式
问题这有一个简单的防抖函数，短时间内多次触发同一事件，只执行最后一次function debounce (fn, wait) { let timer = null return function (...args) { if (timer !== null) { clearTimeout(timer) } timer = setTimeout(() => { fn(args) timer = null }, wait)
2022-04-11 18:26:50
9214
2
原创 npm file方式引入公共包遇到的几个坑
背景在《前端多个vue项目公共组件的三种方法（推荐npm file引入）》这一篇里讲了npm通过file方式引入公共包的方法，但在实际运用中，会遇到不少坑，这里就讲述笔者遇到的2个问题并给出解决方案。问题一通过file方式引入的包，npm不会自动安装该包的依赖。例：项目A通过file方式引入了包B，如下所示。在项目A的package.json：{ "name": "A", "version": "0.1.0", "dependencies": { "B": "file:../
2020-12-20 20:30:21
7371
5
原创 JavaScript实现异步请求并发数限制
背景上一篇《JavaScript 阻塞方式实现异步任务队列》实现了异步请求依次执行的方案，实际上就是限制同一时间只能有一个异步请求，并发请求数为1。那实现流量控制，怎么实现并发数大于1的情况呢？方案思路：使用Promise.all来保证并发数限制待Promise.all返回后再执行下一轮的Promise.all任务开启时，标记running状态为true队列中任务全部处理完后标志running状态为false代码：// 异步请求队列const queue = []// 用来模拟不
2020-12-20 19:25:54
2448
原创 前端处理ajax重复请求的几种方式
公司项目处理ajax重复请求的几个阶段第一阶段，只对需要提交数据的请求做防重复，对查询请求不做防重复功能。在点击按钮做提交数据请求时，生成一个全屏遮罩层，防止下一次点击。第二阶段，后端做拦截重复请求功能，使用jwt+url+参数作为key，存入redis，有效期2秒，查询redis中有无这个key来判断是否为重复请求，若为重复请求，抛出异常给前端。第三阶段，前端拦截重复请求，使用一个Set来储存正在执行中的请求，key为url+参数，请求结束，无论成功失败，删除该key。每次请求时查询Set中有无同
2020-12-19 21:40:22
1331
原创 使用flex解决overflow需要设置固定高度的问题
https://blog.youkuaiyun.com/qq_35261296/article/details/106471887
2020-12-04 23:52:52
5826
1
原创 一键publish的node脚本
需求背景公司有8个前端项目，共使用四个公共包，基础包（baqi）、医生公共包（baqi-doctor）、患者公共包（baqi-patient）、聊天包（baqi-chat）。开发分支上使用file引入公共包（file引入的方式可以查看这一篇），到测试和生产上需要使用版本号来引入这几个公共包。这就需要一个方便的publish公共包的工具，写了一个node脚本publish.js实现主流程：计算下一个版本号设置npm代理为淘宝设置baqi包、baqi-xxx包中package.json的ver
2020-11-04 18:23:25
796
原创 Vue项目自动设置版本号，版本号变更清空缓存
需求项目中在cookie和localStorage中，存储了不少信息，希望每次发布后能清空cookie和localStorage，避免缓存和版本不一致带来的影响。方式一自定义webpack的plugin，在afterPlugins钩子函数中修改package.json文件版本号，使用当前时间作为版本号在main.js中读取package.json文件，判断当前版本号是否和localStorage中的版本号是否一致。若不一致，清空localStorage将当前版本号存入localStorage
2020-11-02 09:49:07
5200
2
原创 Vue Cli3 添加Loader和plugin
添加loader在vue.config.js中的chainWebpack中添加配置：chainWebpack: config => { // my-loader为loader的别名，./src/myLoader.js是loader的位置 config.resolveLoader.alias.set('my-loader', path.resolve(__dirname, './src/myLoader.js')) // 修改vue文件Loader的选项，增加新的处理loader c
2020-11-01 13:00:59
4302
1
原创 JS重写Date函数，兼容IOS系统
IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne
2020-09-21 00:52:35
2193
原创 手写时钟
代码<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <title>Clock</title></head><style>.container { width: 500px; height: 500px; border-radius: 50%; background: #000; border: 30p
2020-09-20 22:37:26
212
原创 JavaScript实现锁功能，同一时间多次异步请求函数都取到返回值，只触发一次异步请求
问题有个需求，某个异步请求函数可能被多次调用，重复调用消耗资源，需要对其进行优化每次调用该函数都能取到返回值只发送一次异步请求这个和节流、防抖功能不一样，节流防抖会丢弃掉中间的请求，中间的请求获取不到返回值方案一很容易想到使用同步非阻塞方案，在第一个点击时，进入loading状态，之后的点击判断loading就等50毫秒继续检查loading的值，直到loading为false，返回localEnv<body> <input onclick="clickMe()" t
2020-09-09 00:33:14
5516
原创 JavaScript 阻塞方式实现异步任务队列
问题有个需求，需要实现一个异步任务队列，并依次处理队列中的所有任务，具体如下：随机时间增加异步任务到队列中队列中的任务按照先进先出的规则依次执行任务为异步请求，等一个执行完了再执行下一个这个需求若使用Java语言的BlockingQueue很容易实现，但是JavaScript没有锁机制，实现起来就不那么容易。方案一很容易想到使用同步非阻塞方案，每隔一定的时间去检测一下队列中有无任务，有则取出第一个处理。这里检测间隔间隔500毫秒，使用setTimeout模拟异步请求。<body&g
2020-09-08 21:07:58
3480
1
原创 JavaScript实现同步Ajax请求的两种方式
JavaScript的Ajax请求默认是异步的，有以下两种方式能让Ajax请求变成同步方式一使用ES7的Async和Awaitasync function main(){ const env = await queryEnv('141001') console.log(env)}async function queryEnv (platform) { const result = await axios({ url: '/chronic/userPlatformConfig/
2020-09-08 15:14:34
6732
原创 爱康云前端项目结构和开发规范
项目结构（移动端H5）前端项目目前爱康云的前端移动端的H5项目有6个，分别为慢病患者端(patient_web)慢病医生端(doctor_web)肿瘤患者端(tumour-patient)肿瘤医生端(tumour-doctor)心康患者端(heart-patient)心康医生端(heart-doctor)需保证这6项目在同一个目录下，如下图引入方式规范代码规范UI 规范包结构规范git commit 规范...
2020-08-08 14:26:36
352
原创 前端多个vue项目公共组件的三种方法（推荐npm file引入）
背景目前很多公司的开发模式都是多个前端一个后端。笔者所在的公司就是这样，移动端前端的产品有两个，这两个产品有很多内容是相似的、甚至一样的。包括页面、样式、JS逻辑等。这样就想将这些公共部分封装成公共组件供这两个项目调用。Vue很好的提供了单个项目公共组件的解决方案，包括组件复用、传参、监听、通讯、插槽等功能。但多个vue项目怎么使用公共组件呢。这篇文章就来介绍前端多个vue项目公共组件的三种...
2019-11-22 10:11:25
15428
33
原创 java通过视频URL获取视频时长，无需下载视频，修复jave在linux上的bug
背景项目中有一个需求，要获取前端上传过来的视频的时长、分辨率等信息。网上查了下，java后端基本上都是用的jave获取视频信息，jave的官网在此。不过网上的教程都是获取本地视频的信息，jave提供的功能也不支持获取网络视频的信息。那要怎么搞咧？首先看下jave的原理，jave使用FFmpeg处理多媒体文件。jave将FFmpeg的可执行文件放到了jar包里面，在运行的时候将FFm...
2019-11-14 18:24:39
2806
1
原创 手写SpringBoot，包含ASM获取Controller参数名
背景读了一些SpringBoot的源码，为了加深理解，准备手写一个简易版SpringBoot框架。一期功能包括了基础的SpringBoot的功能和ASM获取Controller参数名的功能。git地址在此。配置首先是pom.xml，只需引入3个依赖，servlet-api，tomcat-embed，fastjson。<dependency> <gro...
2019-11-07 18:33:33
860
3
原创 后端简版SpringBoot样例项目和各项目工程说明
背景上一篇《后端完整SpringBoot样例项目，无需其他依赖》描述了公司完整版SpringBoot样例项目。这一篇讲讲公司后端简版的SpringBoot样例项目。先看框架代码，git地址在此说明简版样例项目因为依赖了公司其他的jar包，包括akbase，tiger，dove，client四个jar包。这样很多配置类、基础类、工具类都已经包含在内，构成简版样例项目。包结构如下图，包...
2019-10-30 19:26:27
727
原创 后端完整SpringBoot样例项目，无需其他依赖
背景此篇给公司研发部新入职的后端java开发程序猿使用，帮助新人快速上手，避免口口相传和从代码中找规范。当然老员工也可以看看，加深对项目结构的理解，如有不对，欢迎指出。先看框架代码，git地址在此样例项目基于SpringBoot和SpringCloud框架，SpringBoot采用的是1.5.12.RELEASE版本，SpringCloud版本是Edgware.SR3，Java版本1....
2019-10-30 10:00:46
1174
原创 微信小程序实现数据侦听器，类似vue的watch，替代Observer
背景既然小程序的组件已经有Observer功能，那为什么还要手写watch功能呢？Observer只能在Component中使用，没法在Page中使用。若是想在Page中监控某一数据的变化，Observer做不到。 Observer属于小程序的新功能，只能在高版本微信使用，低版本微信无法使用。公司的小程序就因为使用了Observer功能，导致很多低版本微信用户无法使用这个小程序。实现...
2019-10-25 11:47:14
4174
3
原创 微信小程序实现store功能
开始上一期《微信小程序实现数据侦听器watch》，在小程序中实现了Vue的watch功能。但小程序没有状态管理，目前的状况下，跨页通讯和数据传递非常的蛋疼，会造成难以维护和调试。这次就来实现store，全局状态管理功能，来解决这个蛋疼的问题，有以下几个目标：在Page和Component中所有生命周期和函数中均可使用store，均可修改state 少量几行代码即可引入，不修改之前代码结构...
2019-10-18 17:05:13
8281
3
原创 Spring Cloud接口调用的重试机制，如何关闭重试（包含相关源码解读）
原因公司项目使用Spring Cloud做后端架构，后端接口间调用使用的是Feign。前几天在生产上发现了一个问题，定时任务会重复执行。分析了日志后，得出结论，因为定时任务执行时间较长，定时任务模块调用业务模块接口会等到超时，然后Spring Cloud 的Feign会重试请求，导致定时任务执行两次。百度查到的都不能解决我遇到的问题，我下决心要看源码透彻了解这个问题。以下不完全是上述问...
2019-10-17 21:32:14
3959
3
原创 后端每天更新微信用户用户头像
原因我们公司开发的其中一个应用是公众号应用，现在有个需求，就是定时更新用户的头像。当用户更新了微信头像后，需要将最新的头像定时同步到我们的数据库中。之前的方案是每天晚上去调用微信的接口查一遍所有关注公众号并注册了的用户的信息，然后取到头像链接和数据库里的头像链接比较。这样的效率太低，当用户达到几万几十万的时候，需要调用几万几十万次微信接口，耗资源且耗时特别长。微信在用户更换头像后会将旧...
2019-10-15 18:35:56
2041
原创 JS获取手机型号和系统版本
原因前端开发很多时候需要获取手机型号和系统，尤其是当出了前端兼容性问题的时候需要知道手机型号和系统版本。然后开发人员根据特定的的手机型号和系统版本解决兼容性问题。方案前端浏览器获取设备信息和系统信息只能通过navigator对象的userAgent属性获取。小米9和苹果7plus的userAgent长这样：//米9"Mozilla/5.0 (Linux; Android 9; ...
2019-09-26 18:06:54
3490
原创 Vue页面跳转优化，loading中间状态和骨架屏
原因先看一段简单、常规的vue代码。<template> <div v-if="list && list.length>0"> <div v-for="row in list"> <span>{{row.xxx}}</span> //显示剩下数据 </div...
2019-09-24 23:25:26
4174
原创 微信小程序实现数据侦听器watch，包含销毁watch和子属性的watch
原因在上一篇《微信小程序实现数据侦听器，类似vue的watch，替代Observer》中，我们实现的watch功能，但使用起来还是有点麻烦。能不能像Vue那样直接写个watch属性呢？当然可以，这就是写这一片博客的目的。我们要实现以下几个目标：支持侦听对象的变化，侦听对象的子属性的变化，支持立即执行 少量几行代码即可引入，不修改之前代码结构，不需要每个页面都引入 使用方式和vue的wa...
2019-09-22 20:14:58
2970
1
原创 AOP方式捕获和处理微信小程序前端全局异常
原因这几天，公司开发的小程序有部分用户用户打开咨询列表页显示空白，我们查后台日志没有错误。最让人头疼的是，这种前端显示不正确，只是在某些机型上才出现，我们的测试人员无法复现该问题。无法复现，又没有错误日志记录，这种问题咋解决？方案1思前想后，我们需要将小程序端所有的错误日志记录下来，并上传给后台。因为小程序的特性，除了App.js，所有其他的逻辑都在Page函数中，我们只需要处理Pag...
2019-09-18 19:02:24
3806
原创 装饰器模式的应用，包装ServletRequest，增加addParameter方法
什么是装饰器模式装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构，它是作为现有的类的一个包装。这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。关键词：现有的对象，添加新功能。通过子类的方式是对父类添加新的功能，针对的是类。而装饰器模式针对的是一个现有的对象，而不是类。解释看下面的...
2019-09-12 22:05:03
1124
原创 Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
起因先看一段Vue的代码，在Vue的原型链上增加了一个setData方法，然后实例化Vue对象，传入一个Object类型的参数Vue.prototype.setData = function (key, val) { if (this.data) { this.data[key] = val } else { this.data = { [key]: ...
2019-09-10 19:10:03
1798
1
原创 微信小程序重写Page函数，实现全局日志记录
概述在上一篇《微信小程序实现类似Vue的全局路由，实现日志记录》中，通过重写wx.navigateTo，wx.switchTab，wx.navigateBack这三个方法实现类似全局路由的功能，但重写这三个方法后仍有一些局限性，无法拦截底部tab的点击事件和安卓手机的物理返回键的返回事件。如果不需要在跳转前进行拦截，那么有一个更好的方案，重写Page函数。解决方案新建myPage....
2019-09-05 18:09:47
5565
4
原创 微信小程序实现类似Vue的全局路由（实现日志记录）
原因在开发中有个需求，要统计用户在每个页面的访问量，和停留时间。这个在Vue项目中很好实现，利用全局路由，在router的beforeEach方法和afterEach方法中做事情就可以了。但小程序中没有全局路由，又不想在每个页面的onShow和onHide中写重复代码，该怎么实现呢？解决方案先说明这个解决方案没有完美的解决，还是有些问题，有部分问题没法解决。方法就是重写微信的三...
2019-09-04 16:59:08
3182
1
原创 模板模式实现后端公众号登录功能，Java8版
模板模式定义一个操作中的算法的骨架，而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。父类：抽象类，将公共的方法写在父类，个性化的内容定义抽象方法由子类去实现。子类：实体类，集成父类，实现父类的抽象方法。public abstract class Game { //模板 public final void play()...
2019-09-03 15:04:14
223
JSP基础教程（清华版）
2011-09-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人