- 博客(60)
- 收藏
- 关注
RSS订阅原创 关于 Taro 的 ScrollView 在Dom结构发生变化会自动回滚到顶部解决方案和原因
使用Taro开发小程序时候发现 ScrollView 会在同级节点发生增删情况下会自动会滚ScrollView到顶部，经过多次验证和查阅Taro原理发现这是Taro自身bug出现BUG原因因为Taro其实是将React所有组件的state更新归级Page统一进行管理即楼级组件对应的state是state = { cn: [ cn1, cn2, cn3 ]}那么新增和删除节点就是this.setState({ cn: [ cn1, cn3 ] })这样就会导致组件数组对比是完全更新的，.
2021-12-30 15:31:47
4170
7
原创 关于配置Webapck的 exclude 不过滤 node_modules Babel却没有处理转换node_modules的源码
最近对公司的项目引入了 nanoid 替换 uuid 的使用。但是在sentry日志中发现Unexpected token =>的错误。立马查看编译后bunld发现 nanoid 箭头函数没有被转换。所以对此记录一下原因和解决办法。报错的原因1.nanoid 源码是没有经过babel转换的。查看nanoid的源码，发现依赖包的代码没有经过babel处理输出的，package.json中直接指向了ES6的源码。2.使用了.babelrc 所以没有对node_modules中依赖进行Babel.
2021-08-11 21:33:32
2221
原创 React 性能优化之批量处理 unstable_batchedUpdates
手动批量处理unstable_batchedUpdates 可用于手动批量更新state，可以指定多个setState合并为一个更新请求。import { useState, useLayoutEffect } from "react";import * as ReactDOM from "react-dom";function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(
2021-07-19 09:40:13
4358
原创 jest 单元测试模拟模块设置动态值
在单元测试中需要对组件进行动态、极端、正常状态测试，如果组件里使用了api那么我们想对组件进行接口多种不同响应进行测试时候就需要对模块进行动态值设置。mockFun.mockImplementation接受应作为模拟的实现使用的函数。模拟本身仍然会记录所有进入的调用以及来自自身的实例–唯一的区别是，在模拟被调用时也将执行实现。使用mockImplementation我们可以在测试过程中修改mock的值。这样我们就可以实现多种接口状态模块import { Login } from '@/api/lo.
2021-05-13 15:29:34
872
原创 Jest 只MOCK模块中的某个功能实现
单元测试某些场景下只想模拟模块中的某个功能，并且保留模块原有的功能。这时候我可以用 jest.requireActual 配合 jest.mock 进行实现。jest.requireActual该API返回实际模块而不是模拟模块，绕过所有有关该模块是否应接收模拟实施的检查。为什么用 jest.requireActual ? 因为jest的mock中是不允许直接使用全局变量，所以我们无法直接import模块包装实现。例子模拟Taro的login APIjest.mock('@tarojs/tar.
2021-05-13 12:18:47
1550
原创 解析 react、vue等路由参数的库 path-to-regexp
React-router的路由系统内部中使用的是 path-to-regexp 解析匹配路由参数。具体用法如下const { pathToRegexp } = require("path-to-regexp")const regexp = pathToRegexp("/:foo/:bar");// keys = [{ name: 'foo', prefix: '/', ... }, { name: 'bar', prefix: '/', ... }] regexp.exec("/test/.
2021-04-25 14:08:01
467
原创 关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查
前言最近使用React开发微信H5搜索框自动聚焦功能，发现路由跳转页面后无法自动聚焦。尝试了各种方法均不生效…后来发型是异步加载组件问题，个人估计是微信浏览器在异步组件加载完成后导致节点失焦。尝试过的解决方法input 属性 autofocus —— 不生效ref保存组件处罚 ref.curren.focus() —— 不生效解决方案完整查看了路由注册引入组件的方式，个人认为是异步加载组件的原因。尝试修改为同步引入组件。yes!成功。具体原因需深入调查，先记录以下踩坑原路由注册方式 (异
2021-03-31 20:50:52
534
原创 Javascript性能优化【内联缓存】 V8引擎特性
引用官方的描述：内联缓存（Inline caching）是部分编程语言的运行时系统采用的优化技术，最早为Smalltalk开发。内联缓存的目标是通过记住以前直接在调用点上方法查询的结果来加快运行时方法绑定的速度。内联缓存对动态类型语言尤为有用，其中大多数（如非全部）方法绑定发生在运行时，因此虚方法表通常无法使用。
2021-02-23 14:48:14
384
原创 javascript V8引擎垃圾收集机制
V8引擎使用的垃圾收集机制是标记清除，那么javascript在垃圾收集会阻塞其他程序执行。V8引擎使用了增量标记的方式进行优化增量标记V8不是直接对整个栈堆遍历标记，而是标记一部分堆后回复正常执行。下次GC将从上一次停止对位置继续进行标记。这样允许在正常执行期间非常短对暂停。...
2021-02-23 11:45:48
170
原创 React-Native 获取设备当前网络状态 NetInfo
react-native 应用获取设备网络状态可以使用 NetInfo 包进行获取。NetInfoNetInfo 模块可以获取设备当前的联网状态，可以订阅和一次性获取网络状态。以前在react-native集成，现在已经单独移到 @react-native-community 社区管理。安装(IOS需要pod install)yarn add @react-native-community/netinfo引入模块import NetInfo from '@react-native-.
2021-02-22 22:28:52
1725
原创 前端性能优化篇——浏览器http同域名并发请求对限制
在浏览器同域名并发请求都产生并发数限制，并发限制通常是4～8以内。那么我们将来了解浏览器请求并发限制的原因和优化手段。浏览器并发数量统计浏览器为什么要请求并发数限制？在了解优化手段之前我们先了解浏览器限制并发请求的原因1.对操作系统端口资源考虑PC总端口数为65536，那么一个TCP（http也是tcp）链接就占用一个端口。操作系统通常会对总端口一半开放对外请求，以防端口数量不被迅速消耗殆尽。2.过多并发导致频繁切换产生性能问题一个线程对应处理一个http请求，那么如果并发数量巨大的话.
2021-02-02 23:00:56
3862
原创 前端性能优化篇——浏览器同域名并发请求对限制
在浏览器同域名并发请求都产生并发数限制，并发限制通常是4～8以内，那么来了解浏览器请求并发限制的原因和优化手段。浏览器并发数量统计浏览器为什么要请求并发数限制？在了解优化手段之前我们先了解浏览器限制并发请求的原因1.对操作系统端口资源考虑PC总端口数为65536，那么一个TCP（http也是tcp）链接就占用一个端口。操作系统通常会对总端口一半开放对外请求，以防端口数量不被迅速消耗殆尽。2.过多并...
2021-02-02 00:00:00
2343
原创 IOS 多层级路由导航控制器 NavigationControoller 实现路由切换
IOS 导航控制器分为多层级导航控制器naviagtionController 和平行分栏控制器 UITabBar（底部切换栏）。IOS导航控制器是什么呢？其实就是我们web的路由切换功能，只不过在app开发切换是ViewController。什么是导航控制器 NavigationController ?NavigationController 是继承ViewController实现的，我们可以理解为一个具有切换视图并保存视图栈记录的一个视图控制器，在开发中我们应该如何使用呢？那么Navigatio.
2021-01-27 21:14:17
602
原创 关于 NODE.js 并行线程 worker_threads 的使用与详解。
javascript 是单线程，那么node.js属于服务端语言改如何实现其他语言中的并发线程执行呢？在node V10只有 child_process，cluster的API来开启多子进程，多进程。进程并不是子线程，无法内存共享。在nodeV10后引入worker_threads API概念。worker_threadsnode官方文档注明了：worker_threads 模块允许使用并行地执行 JavaScript 的线程。与 child_process 或 cluster 不同， wor.
2021-01-27 00:02:37
7564
5
原创 IOS中的事件响应链,事件冒泡机制基本了解
本文主要讲解IOS中事件响应链，即事件冒泡机制。做过web开发的同学应该知道js事件冒泡是从主响应元素一层一层的向父级冒泡事件，在ios亦是如此，但是不同是ios中，如果冒泡链中有一方对事件进行响应处理后会截止后续对冒泡行为不同于js会继续往父级冒泡。事件响应流程图图中我们可以看到如果UIViewController处理了事件响应，那么就会截止事件对冒泡。下面我用代码来验证一下。// 验证ios事件响应链 UITapGestureRecognizer* _tap_1 = [[UITap.
2021-01-17 16:10:39
570
原创 Xcode11 后Appdelegate自定义UIWindow对象失败详解。
在Xcode11前我们可以在AppDelegate的钩子didFinishLaunchingWithOptions进行自定义UIWindow对象。但是Xcode11后自定义UIWindow会报错无法启动APP。是因为iOS13中AppDelegate的职责发生了改变： iOS13之前，AppDelegate全权处理App生命周期和UI生命周期；iOS13之后，AppDelegate的职责是： 1、处理 App 生命周期 2、新的 Scene Session 生命周期 那UI的生命周期交给新增的Scen.
2021-01-16 16:26:57
1170
原创 关于Vue 3.0 的改进 Proxy 代理实现数据驱动视图
Vue 3.0 中使用了 Proxy 对象代理进行拦截实现了数据绑定视图的驱动操作。弥补了vue2.0中的局限，比如属性删除增加监听、对数组基于下标的修改、长度变化等等。参考一下网上流传的机制图Proxy 是什么？首先我们来了解一下Proxy是什么。Proxy不是简单的serverProxy服务器代理，而生ES6中新特性Proxy，我们先看一下MDN官网的说明Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。术语handle.
2021-01-03 13:37:04
263
5
原创 IOS 定义手势监听器详解，利用 UIGestureRecognizer 进行捏合、旋转、平移、点击、长按手势事件响应
IOS中我们可以通过UITouch进行触摸事件监听，但是UITouch实现捏合、旋转、长按等手势事件监听非常麻烦。IOS中提供 UIGestureRecognizer 的子类帮我们简洁等实现捏合、旋转等特殊手势监听。并且一个视图可添加多个不同等手势监听器。开启userInteractionEnabledIOS 中UIView 默认是不可响应事件的，我们需要开启 userInteractionEnabled 方可进行事件响应。下面代码中我们创建了一个图片视图，并且开始事件响应。UIView 通过 a.
2021-01-02 17:39:02
4117
原创 IOS UITouch 触摸事件，UIResponder 的作用
IOS 中事件响应皆是通过UIResponder。我们可以执行UIResponder协议响应事件。这里我们用UIViewController做示例，UIViewController默认实现UIResponder协议。// UIViewController.m- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { NSLog(@"屏幕被手指按下了"); // 获取手指列表 .
2020-12-24 13:53:35
360
原创 已知圆心，半径，角度，求圆上的点坐标
很简单一个小学算法…圆点坐标：(x0,y0) 半径：r 角度：a0则圆上任一点为：（x1,y1）x1 = x0 + r * cos(ao)y1 = y0 + r * sin(ao )转换成js代码，在javascript中Math.cos Math.sin 需把角度转换为弧度。所以代码如下const x = x0 + pi * Math.cos(a0 * Math.PI / 180)const y = y0 + pi * Math.sin
2020-12-23 20:51:37
12537
10
原创 javascript 中文排序 localeCompare
localeCompare()方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。 新的locales、options 参数能让应用程序定制函数的行为即指定用来排序的语言。 locales 和 options 参数是依赖于具体实现的，在旧的实现中这两个参数是完全被忽略的。var arr = ['南京', '北京', '上海', '杭州', '深圳']; function sortChinese (arr) { // 参数： 排序的数组 arr.sort(fun.
2020-12-23 20:46:33
837
原创 前端模式 VD， 脏检查 MVVM ,数据收集 MVVM 所使用的场合
VD 虚拟DOM数据变化，先修改虚拟DOM层，然后通过虚拟DOM树的对比检查获取出最小的修改量进行对真实DOM树进行修改。虚拟DOM模式只是在DOM层的检查，所以初始渲染速度非常快。在细小修改的大量数据修改都是速度也不错的。因为只是在虚拟DOM层的计算对比，然后得出最小的修改操作对真实DOM进行修改。脏检查脏检查MVVM是检查数据的变化，保留对真实节点的操作。脏检查机制是对所有固定 watcher count进行计算变化，所有在小修改变化中慢。但是在全部数据发生更新时候速度远远快于其他模式
2020-12-23 20:44:38
323
原创 空闲队列函数排队 requestIdleCallback
window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发人员能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。您可以在空闲回调函数中调用requestIdleCallback()，以便在下一次通过事件循环之前调度另一个回调。语法var handle = window.requestIdl.
2020-12-23 20:41:10
415
原创 获取当前窗口是否可见 document.visibilityState
document.visibilityStatedocument.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：visible : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.hidden : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .pre
2020-12-23 20:37:56
698
原创 javascript 唯一值的集合 Set对象
Set对象允许存储任何类型的唯一值，无论是原始值还是对象引用。可用于数组，集合去重等操作，拥有size属性const set1 = new Set([1, 2, 3, 4, 5,4]);console.log(set1.has(1));// expected output: trueconsole.log(set1.has(5));// expected output: trueconsole.log(...set1);// expected output: 1,2,3,4,5.
2020-12-23 20:35:04
552
原创 PWA 应用提示安装到桌面
当web Service 和 Manifest 被浏览器安装完后，正常情况下，浏览器会提醒用户可将网页安装到桌面。但是通常浏览器都会限制提醒。这时候我们需要手动唤醒浏览器询问用户是否安装到桌面 beforeinstallpromptbeforeinstallprompt 事件 window.addEventListener('beforeinstallprompt', function(event) { // 监听到可安装事件，进行触发提醒用户 setTimeout(fun.
2020-12-23 20:29:43
3002
5
原创 解决 sessionStroage 无法在多个标签页共享数据的问题
1.改用 cookie 方式存储数据2.利用 window.addEventListener(‘stroage’) 监听stroage变化事件进行回调共享数据1.全局监听stroage事件通过监听localStroage的数据变化进去读取出token值后进行localStroage删除window.addEventListener('stroage', (e) => { if (e.storageArea === localStroage && e.key === 't
2020-12-23 20:28:03
474
原创 js 动态创建注释节点 createComment
const comment = document.createComment('注释')document.body.appen(commnet)
2020-12-23 20:25:35
1074
原创 css 开启硬件加速的系统级控件
css 开启硬件加速的系统级控件1.h5在真机上有时候会出现滑动白屏问题，可以开启硬件加速系统级控件进行加速滑屏加速body{ -webkit-overflow-scrolling: touch; overflow: scroll;}2.h5开启动画硬件加速div{ transform: translate(0px); }...
2020-12-23 20:23:48
205
原创 IOS UIScrollView 滚动视图的使用和文档
UIScrollView 是一个可滚动的视图列表，在app中非常常见。下面简单的介绍一下UIScrollView 的用法。可实现代理UIScrollViewDelegate// 实例化UIScrollView UIScrollView* _scrollView = [[UIScrollView alloc] init]; // 获取屏幕大小 UIScreen* screen = [UIScreen mainScreen]; // 设置滚动视图大小 _scrollVie.
2020-12-22 00:10:42
293
原创 javascript 对象比较是否属于同一类型对象。
js属于动态类型语言，那么我们如何判断 A实例是否和 b对象实例属于同一类型呢？比如 array === array ，Error === Error，自定义类的实例比较 等等对象类型判断。如果只用 typeof 肯定是不行的。因为不管 array 还是 object、error、或自定义实例类型都是返回 object 。其实我们可以通过对象实例都原型比较是否属于同一个对象类型。Object.getPrototypeOf(obj)方法返回指定对象的原型（内部[[Prototype]]属性的值）。所以.
2020-12-21 14:59:30
1024
原创 OC 中NSString与NSString 的比较
OC 中 字符串是一个对象，所以不能使用 == 进行比较是否相等。因为两个字符串的内存地址可能不一样，但是内容一样。所以我们要使用其他方法进行比较运算。isEqualToStringif ([@"2121" isEqualToString:@"2121"]) { NSLog(@"一致");}...
2020-12-20 22:40:56
441
原创 IOS 单行文本输入框 UITextField 使用
UITextField 继承 UIControl 类，只支持单行输入和显示，可输入密码类型。支持实现代理 UITextFieldDelegate属性名称类型说明默认值textNSString文本输入值textColorUIColor文本颜色UIFontUIFont文本大小textAlignmentNSTextAlignment文本方向NSLeftTextAlignmentborderStyleUITextBorderStyle.
2020-12-20 21:31:52
891
2
原创 IOS 模态弹窗与操作版使用 UIAlertController
UIAlertController 的使用与UIAlerView 非常不同，它实际上是把弹窗内容与显示方式、按钮列表、分离。实现起来非常简单。如下
2020-12-20 20:16:09
632
原创 IOS ActivityIndicator 活动指示器使用
IOS中活动指示器的使用非常简单。UIActivityIndicatorView* _activity = [[UIActivityIndicatorView alloc] init]; // 设置位置 _activity.frame = CGRectMake(180, 100, 80, 80); // 设置菊花样式 [_activity setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleLarge];.
2020-12-20 13:52:48
723
原创 OC 中数字转字符串和浮点数转整数等转换
浮点数转字符串float value = 0.2;NSString* text = [[NSString alloc] initWithFormat:@"%f", value];整数转字符串int value = 10;NSString* text = [[NSString alloc] initWithFormat:@"%d", value];NSInteger 转字符串NSInteger value = 10;NSString* text = [[NSString alloc] in
2020-12-19 17:43:12
972
1
原创 IOS 开发 UIProgress 和 UISlidre 进度条和滑动条组件
进度条和滑动条组件非常常见，在ios中进度条组件是无法响应事件的。滑动条可响应事件。但是这两个组件均不可设置高度，可设置x,y,width进度条属性名称类型说明默认值progressViewStyleUIProgressViewStyle进度条样式UIProgressViewStyleDefaultprogressfloat进度条的值， 0～10progressTintColorUIColor进度条的激活颜色trackTintColorU.
2020-12-19 16:11:25
795
1
原创 IOS UISwitch 组件的使用
UISwtch 在许多场景中会使用到，通常用来坐设置开关等行为。下面我们来看一下IOS 中 UISwitch 等用法UISwitch* _switch = [[UISwitch alloc] init]; // 设置状态和开启动画 [_switch setOn:NO animated:YES]; // 设置开启状态颜色 [_switch setOnTintColor: [MyUI getThemeColor]]; // 设置位置 _switch.fram.
2020-12-19 14:55:28
658
1
原创 冻结和只读取当前对象的属性，不读取对象原型的属性
Object.entries(obj)Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。const object1 = { a: 'somestring', b: 42};for (const [key, value] of Object.entries(object1)) { console.log(`${key}: ${value}`);
2020-12-18 10:53:53
138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人