- 博客(20)
- 收藏
- 关注
RSS订阅原创 微前端方案落地（Systemjs，pnpm，Immer）
什么是微前端？微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。微前端落地方案？自组织模式：通过约定进行互调，但会遇到处理第三方依赖等问题。基座模式：通过搭建基座、配置中心来管理子应用。如基于 SIngle Spa 的偏通用的乾坤方案，也有基于本身团队业务量身定制的方案。去中心模式：脱离基座模式，每个应用之间都可以彼此分享资源。如基于 Webpack 5 Module Federation 实现的 EMP 微前端方案，可以实现多个应用彼此共享资源分享。选择使用方案？
2024-10-21 12:36:14
950
原创 移动端h5 video标签无法播放调研
h5 移动端video：视频有明显加载loading，不设置封面就是灰色而不是视频第一帧，必须要静音才能自动播，通过autoplay控制自动播放，通过pc浏览器能自动播，小程序不能自动播，通过js，play（）控制，pc浏览器能自动播，小程序模拟器能播，手机端浏览器能自动播，但是微信小程序还是不能自动播放。小程序video：视频加载没延迟，不设置封面默认视频第一帧，可通过属性，或调用函数方式自动播放，还可以不静音的自动播放。
2024-10-17 12:49:19
113
原创 microApp微前端重构多Tab功能
由于系统菜单存在多个特殊的应用场景，如菜单为kbs，但内部嵌有oa的子应用菜单，菜单通过路由appName渲染，点击时要保持菜单不变，但要渲染对应子应用，以及包含详情多开，或动态tab标签等，设计时需要考虑全面，整个链路较长，多个应用间调试不方便，在路由监听，路由守卫等监听中进行逻辑处理，稍有不慎就会进入死循环。由于历史原因，原设计为主应用为history路由，子应用为hash路由，现在我们的多tab是单微应用的tab，写在每个微应用中的，跨应用就没有了。1. 主要是将涉及到‘/’的路由改掉。
2024-08-13 17:38:45
1168
原创 微信小程序优化点实践
提问：我将这个方法放在组件的observers中调用，不加setTimeout，而是在function (projectItem)前加async，同时在外面使用list，wx:for同时渲染多个这个组件，假如同时渲染十个，会出现这十个中的异步都走完才会同时显示，而不是list拿到后就显示，然后图片一个一个出来，看起来就行它将这十个异步同步执行了，第一个阻塞第二个这样，这是为什么？有无大佬解释一下是什么原因？在微信小程序中，如果同一个图片资源在页面中多次使用，它只会被加载一次，并且会被缓存起来。
2024-08-01 10:26:30
1057
原创 问题发现探讨
基座采用histroy路由，各个微应用内部采用hash路由，点击菜单时，无论是不是跨微应用，触发的都是histroy路由路径和params改变，路由的改变从而引起的mricoApp的。加载一个包含导航的基座相较于加载每个微应用自带的导航逻辑，减少了重复代码，性能也能有一点得到优化，然后集中的处理路由可以让应用间的跳转更加流畅，尤其在子应用之间切换时，基座层可以控制Tab的激活状态，协调各个微应用之间的交互和路由跳转逻辑，提供更加连贯的体验。1.全菜单维护在本地，新增功能菜单改完微应用要改基座菜单。
2024-06-03 16:10:03
516
原创 如何使用Socket.IO实现微应用之间的通讯？
我微应用加载器都自己写了，通讯怎么可能用乾坤的东西？1. Socket.IO 是一个库，可以在客户端和服务器之间实现和通信。WebSocket实现。尽管 Socket.IO 确实在可能的情况下使用 WebSocket 进行传输，但它为每个数据包添加了额外的元数据。这就是为什么 WebSocket 客户端将无法成功连接到 Socket.IO 服务器，而 Socket.IO 客户端也将无法连接到普通 WebSocket 服务器。3. Socket.IO 并不打算在移动应用程序的后台服务中使用。
2023-11-02 16:02:30
172
原创 关于乾坤JS隔离沙箱调研
沙箱就是Js隔离机制，乾坤有三种Js隔离机制，在源代码中也是以 SnapshotSandbox（快照沙箱）、LegacySandbox（支持单应用的代理沙箱）、ProxySandbox（支持多应用的代理沙箱）三个类名来指代三种不同的隔离机制。为了理解方便，我会用最简单的逻辑最基础的语法来实现三个沙箱，方便我们更快速的理解其中的原理。
2023-11-01 17:06:58
160
原创 webpack 浅入
其实webpack是不需要手动添加的，脚手架创建的项目都会自动有一个webpack文件,可以使用 npm run eject 命令将 webpack.config.js 暴露出来。但该命令是不可逆的, 一旦执行了此命令。webpack这东西面试要求要会，实际工作中接触不到，反正我接触不到，通常工作中都是有人配好了，webpack中文文档看来看去，基本概念，原理，翻来覆去看，没啥用还是不知道怎么用的，不知道有没有和我一样，所以从今天开始，我自己扒！原理啥的文档里有的我就不说了，我主要研究下怎么用！...
2022-08-12 14:37:28
887
1
原创 React四种监听dom元素大小的方法
1.原生方法2.resizeObserver方法3.给dom添加窗口resize方法4.ahooks中useSize
2022-05-30 09:16:55
9180
2
原创 React 后端接口返回数据类型为image怎么接
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2022-04-01 17:17:00
1175
3
原创 React+G2 + G2plot 踩坑
这里写自定义目录标题参与图表组件库开发（要求使用Echarts或G2）坑1：参与图表组件库开发（要求使用Echarts或G2）因为这两个都没用过，翻阅多篇文章，最终选择入坑G2，要用就用新技术！所以特此记录，方便以后避坑。示例图（颜色随数据改变）：坑1：............
2022-02-18 14:22:01
4360
原创 win10+node@16 安装特定版本 node-sass
node-sass 安装背景：环境：window10系统+node@16.13.1目标：某项目中安装node-sass@4.0.0备注：解决方法在最后着急可直接拉到最后杠精的一天开启npm install node-sass结果：报一堆 npm ERR gyp ERR 的错误yarn add node-sass结果：依旧报错百度：安装window-build-toolsnpm install --global --production windows-build-toolsnpm
2022-01-07 18:20:01
7967
1
原创 性能优化理解
列出，常规性能优化方法有哪些？前端性能优化主要分为两类：加载时优化运行时优化网络中常见的性能优化方案（可参考雅虎前端性能优化的35条军规）：1.尽量减少http请求 如何：a).雪碧（精灵）图 b).合并css与js文件 c).懒加载 d).防抖与节流 e).合理设置缓存2.使用HTTP2 HTTP2 相比 HTTP1.1 有如下几个优点：
2021-12-04 18:59:30
219
原创 vue项目中实现用户登录以及token验证
文章目录前言一、总体逻辑图二、使用步骤1.引入库2.读入数据总结前言用户登录这个功能在现在越来越普遍，我也就研究了一下，本文主要讲登录这个功能中token的验证功能，本例使用的是vue框架，如何实现用户登录功能的token验证，以及整个的逻辑关系，也会将涉及到的其他知识点都讲清楚，让大家更容易更透彻的了解这个功能。废话不多说，看正文！一、总体逻辑图示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import
2021-07-27 15:51:12
2184
1
原创 如何将web项目部署到远程桌面，通过远程地址访问web项目
如何将web项目部署到远程桌面，通过远程地址访问web项目进入公司会经常让你把某个项目或者一些展示数据的html文件放到远程服务器上，可供大家一起访问查看，看了网上的一些办法大部分都是nginx，tomcat，jdk什么的，看来看去没看明白，废话不多说，详细教程来了！！！1.进入远程桌面window + R 输入“mstsc” 输入用户名密码等进入远程桌面：进入远程桌面之后，找到控制面板中的卸载程序（win7和win10都一样）：点击选择启动或关闭windows功能：将下面方框中
2021-07-21 17:47:54
2225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人