- 博客(35)
- 收藏
- 关注
原创 React Native对接Sunmi打印sdk
已知Sunmi打印机支持的方式 蓝牙、局域网、usb 连接, 这里主要是讲述usb连接的方式,终端控制打印指令。第三步, js 端调用桥接方法,进行打印。消费打印,这里采用的是前端写死打印的模版。
2026-01-05 15:37:55
214
原创 前端测试模块
端到端测试模拟真实用户场景,测试整个应用程序的流程,从用户界面到后端服务。单元测试(以jest 插件以及 react 框架举例)端到端测试(Cypress 举例)
2025-10-06 22:38:18
636
原创 Glup 和 Vite
Glup 适合任务流式处理(文件操作)例如处理静态页面项目、SDK、文件的压缩、拷贝、编译。开发环境:利用浏览器原始的ESM,服务器按需转换。vite 构建逻辑是基于Rollup的。它是一个基于流的前端自动化构建工具。生产环境: 构建依赖于Rollup。和Webpack 本质区别。与Webpack 对比。
2025-10-04 20:33:34
534
原创 js 设计模式
将对象的创建过程封装在函数或者类中,客户端只关注对象的使用而非创建过程。例子类似与 vuex / redux等全局状态管理等就是单例模式。建造者模式把复杂的构建步骤抽象出来,分成多个简单的对象来构建。通过复制已有对象来获取新对象,避免重新创建,减少开销。对象与对象之间的组合,以形成更灵活、可扩展的系统结构。一个类只有一个实例, 提供全局访问点。介绍一些高频使用的设计模式。
2025-09-27 18:46:11
698
原创 ts元编程
Proxy 可以创建一个对象的代理,这个代理可以拦截并重新定义对该对象的基本操作,比方说属性查找,属性修改,函数调用等等。Reflect 提供了一系列静态的方法来执行对象的底层操作。返回布尔值或者操作结果,如果错误的情况下会返回false。ES6 引入了Reflect 和 Proxy 这两个API,他们是js 元编程的基石。元数据就是给类、属性、方法等添加的额外信息(标签),这些信息在运行时可以被读取和使用。用于服务端框架例如express 框架,提供配置化的路由信息,便与维护。
2025-09-25 17:24:39
295
原创 React原理二
结合以上触发更新后,React 会把这次更新向上冒泡到FiberRoot,标记到FiberRootNode.pendingLanes,然后通过调用 scheduleUpdateOnfiber 和 ensuerRootisScheduled函数将整个FiberRoot包装成一个回调函数以及它的优先级交给Scheduler, Scheduler并不知道这个函数是干嘛的,它只是管理这个函数何时执行,然后,Scheduler 会在它认为合适的时机调用这个函数。DOM,只需要移动A、C的DOM就好了。
2025-09-18 21:14:01
1121
原创 React原理一
在 协调阶段,React 开始对比当前的 Fiber 树(current fiber)和新的 React 元素树,然后构建出 WorkInProgress Fiber Tree(WIP Tree)。react 在 16版本中引入fiber的概念,但是其中相关特性例如任务的可中断实际上我们开发者并不能直接控制,直到Concurrent Mode模式(17版本提供,但是当时相当于是不稳定模式,主要是为了18版本做准备)的出现,提供了并发特性,才能高优先级打断低优先级;完成节点处理(completeWork)
2025-09-17 18:29:03
1000
原创 React路由
history(createBrowserRouter)和 hash(createHashRouter),对比由于history 看起来更干净,使用更多,这里主要以history模式来讲解。useLocation(获取当前 URL 的位置信息,包括路径、搜索参数、哈希和状态。本章节主要以 react-router-dom 来介绍react 路由相关的知识点。useMatch(检查当前 URL 是否匹配指定的路径模式,并返回匹配的详细信息)useSearchParams(读取和修改 URL 中的查询字符串。
2025-09-16 19:23:50
438
原创 React 基础
React(类组件):onClick => dispatch => enqueueSetState(更新队列) => scheduleUpdateOnFiber(标记fiber节点,启动更新)Vue3 的双向绑定: state.xxx = xxx => Proxy set => trigger(触发更新) => effect (执行副作用函数) => 更新dom。React 生命周期类组件(函数组件大多数使用useEffect、useMemo等hooks模拟生命周期操作)React 事件相关。
2025-09-11 21:00:45
940
原创 TypeScript基础
优势:用于解决大型复杂项目、架构以及维护代码较为复杂,js为运行时报错,ts为编译时发现错误纠正,ts支持类型检测。它是JavaScript的超集(完全兼容并扩展),在原有的语法基础上,添加了静态类型和基于面向对象编程。
2025-09-10 19:22:39
691
原创 前端性能优化
浏览器的Performance可以帮助我们分析性能指标,如果我们需要上报一些信息例如首次dom构建时间,我们可以利用 Navigation Timing API的钩子,来获取页面第一次加载过程中关键阶段的时间点。首先需要知道性能瓶颈在哪,通常是使用chrome的Performance(左上角录制按钮 record 触发)来监控页面的LCP、CLS、INP。这里主要是对浏览器运行环境做出一些监控以及优化建议。
2025-09-07 23:22:56
413
原创 浏览器BOM
再考虑兼容性问题的时候 如果不支持 addEventListener 可以 采用 attchEvent 的方式来监听,需要注意的是它绑定的handler函数内部this指向window、 后绑定的会先执行;提供浏览器和操作系统的信息, 常用于获取信息、判断处理兼容优化、流量监控、剪切板等,需要注意的是navigator是可以被重写的,所以使用的时候需要更加注意安全方面。获取窗口尺寸:用 window.innerWidth/innerHeight(网页的可视区域尺寸 包含滚动条)的方式来进行事件绑定。
2025-09-05 20:37:25
632
原创 JS的模块化
主要用于服务端,(为什么不能用在客户端:本质它是同步代码,但是如果用在客户端require请求网络资源是异步的会阻塞)callback 为加载模块后的回调函数,函数的参数需要与引用的模块对应。用于浏览器端javaScript模块化规范,它的核心特点是。module 为需要引用的模块,是一个数组,可引入多个模块。它的加载模块和定义模块必须按照AMD规范进行。
2025-09-04 22:45:07
317
原创 手写实现Promise原理
Promise 源码对咱们来说是黑盒的,但是咱们可以通过他的规则来实现一个promise来帮助咱们理解。按照这里的promise规则我们来实现Promise。Promise 最初是为了解决回调地狱而出现的;
2025-09-04 00:33:41
225
原创 浏览器的渲染
这里的src引用的是外部资源);这个预解析线程会提前下载这些文件,防止阻碍html的解析。浏览器会额外启动一个预解析线程来处理文档中的link标签或者说外部的js(这里指得是。html解析过程中会构建DOM树和CSSOM(css object model)树;首先当网络线程拿到html文档的时候会生成一个渲染任务交给渲染主线程的消息队列,在。渲染主线程会取出消息队列的渲染任务开始渲染流程。这里我们需要关注script标签引用外部资源的几种情况。在浏览器解析html的过程中。渲染流程会经历以下步骤。
2025-09-02 21:43:48
1275
原创 JS 事件循环Even Loop
这些异步任务会被添加到各自对应的任务队列中排队。主线程在执行完当前同步任务后,会按照任务队列的优先级(微任务队列优先级最高)依次处理各个队列中的任务。关于消息队列涉及到浏览器如何处理各种任务,渲染主线程是非常繁忙的,它需要处理很多任务,例如js代码,用户的交互,网络通信等等,这些任务优先级怎么去处理,所以就有了消息对队列,HTML官方的定义是。根据HTML官方标准浏览器有自己的实现,在chrome的实现中,chrome 会至少包含三个任务队列(实际上包含很多队列,但是咱们目前只需要关注这三个)
2025-09-02 16:32:16
655
原创 js作用域、作用域链
变量提升指的是声明会放到当前作用域最顶部;var 变量提升的优先级比函数更高,这么设计原因是函数需要用到变量。对于函数 变量提升的时候会提升整个函数;而不仅仅是函数名,var 变量声明提升的仅仅是变量名;作用域链指的就是当我们访问一个变量的时候,它会先在当前作用域中寻找,如果没有找到会往上级函数中寻找,直至全局作用域。js当前存在全局作用域和局部作用域;let 和 const 存在块级作用域在{}中生效;var和函数的变量提升。
2025-08-31 13:36:31
235
原创 利用uniapp开发小程序云函数
就拿微信的安全内容审核api作为例子说下,1、先开通云服务:点击左上角云开发按指引开通2、我们先创建一个function文件夹这里我放在根目录,步骤没有做完编译之后文件夹是隐藏的,如果想使之可见可以放在static目录下,3、定义下云函数的路径 : "cloudfunctionRoot": "./functions/", // 这一行就是标记云函数目录的字段4、function...
2020-01-19 18:05:58
5022
2
原创 项目小记
绑定hidden不能与flex布局在一个标签上,如果在一起hidden无效<view class="game_center" :hidden="currtab!=1"> </view>.game_center{ display:flex; flex-direction:column; align-alitem:center }...
2019-11-19 16:16:01
168
原创 小程序跳转到另一个小程序很慢很卡
小程序跳转另一个小程序使用的方法有wx.navigateToMiniProgram 和 navigator 标签,如果有碰到跳转到另一个小程序很慢的开发者,然后又没找到问题,看看自己小程序页面上的广点通是不是太多,当时我测试过,页面上广点通全渲染完才会执行跳转小程序的方法,广点通渲染是一个接一个渲染所以就会导致点击跳转按钮,过了很长时候才弹出跳转框...
2019-10-18 12:34:20
1258
原创 h5保存图片
之前做过保存图片到本地的例子,当时主要是需要动态生成二维码,然后可以使二维码保存到手机相册,当时用到canvas,比较繁琐最近看到css也能保存图片,试了一下果真可以,-webkit-touch-callout: default;就这么简单,只要添加这个样式就可以了,不过要注意层级问题,如果有元素遮到他就不能触发保存了(长按图片才会触发保存)官方文档如下: (同事的安卓手机也支持)...
2019-10-15 11:52:12
1967
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅