- 博客(225)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 微前端学习笔记(5)：从import-html-entry发微DOM/JS/CSS隔离
是 qiankun 中一个举足轻重的依赖，用于获取子应用的 HTML 和 JS，同时对 HTML 和 JS 进行了各自的处理，以便于子应用在父应用中加载。
2024-06-06 20:23:58
1004
原创 微前端学习笔记(4):从微前端到微模块之EMP与hel-micro方案探索
它允许将一个应用程序的某些模块打包为一个独立的、可远程加载的 bundle，并在运行时动态地加载这些模块。远程模块可以作为微模块（模块级别的微前端），是页面级别的微前端的一种补充，因为页面级别的微前端，如 qiankun、无界等，它们的粒度太粗了，有时候需要更细粒度的微前端，例如：组件、函数级别的。远程模块可以作为微模块（模块级别的微前端），是页面级别的微前端的一种补充，因为页面级别的微前端，如 qiankun、无界等，它们的粒度太粗了，有时候需要更细粒度的微前端，例如：组件、函数级别的。
2024-06-06 20:21:12
962
原创 微前端学习笔记(3):前端沙箱之JavaScript的sandbox（沙盒/沙箱）
多实例运行语法兼容不污染全局环境（主应用）❌❌❌✅❌✅❌✅❌iframe✅✅✅转载本站文章《微前端学习笔记(3):前端沙箱之JavaScript的sandbox（沙盒/沙箱）》,微前端学习笔记(3):前端沙箱之JavaScript的sandbox（沙盒/沙箱） - 前端架构设计 - 周陆军的个人网站。
2024-06-06 20:19:17
1113
原创 微前端学习笔记（1）：微前端总体架构概述，从微服务发微
从最初的CS架构，如MFC Java Swing 等，到BS架构，JSP PHP，再到前端后端分离，前端从jquery GWT-Ext 到 Handlebars ，再到angularJS/Vue/React，反观java 世界，学好 Spring MyBatis ,一路无忧，哎……
2024-06-06 20:14:25
1009
原创 再谈23种设计模式（3）：行为型模式（学习笔记）
模板模式(Template pattern)：定义一个算法结构，而将一些步骤延迟到子类实现。解释器模式(Interpreter pattern)：给定一个语言，定义它的文法的一种表示，并定义一个解释器。策略模式(strategy pattern)：定义一系列算法，把他们封装起来，并且使它们可以相互替换。状态模式(State pattern)：允许一个对象在其对象内部状态改变时改变它的行为。观察者模式(observer pattern)：对象间的一对多的依赖关系。备忘录模式(Memento pattern)
2024-06-06 19:58:02
989
原创 再谈23种设计模式（2）：结构型模式（趣图解释）
相比创建型模式模式，结构模型用趣图来解释比代码解释更好。加入你要开一家餐厅：创建型模式就像是你的食材供应商，它们告诉你如何更好地获取和管理食材；结构型模式就像是你的厨房布局和工作流程
2024-06-06 18:41:20
680
原创 github的Contributions找不到自己：设置git commit邮箱与用户名
最近发现公司的开源项目github都找不到我的名字部门的前端库 vue2 vue3版本照样没有自己。
2024-04-21 21:46:18
872
原创 什么是 SRE（站点可靠性工程）
开发和运维的目标总是不一致 —— 开发希望用户体验到“最新最棒”的代码，但是运维想要的是变更尽量少的稳定系统。相反，SRE 是开发团队的成员，他们有着不同的技能，特别是在发布部署、配置管理、监控、指标等方面。因此，SRE基本上是在做原来运维团队所做的工作，但其方式是启用具有软件专业知识的工程师，并基于这些工程师固有的使用软件设计和实施自动化的能力，来设计和实施自动化的能力。所以就需要 SRE 了。事实上，SRE 团队有不同的背景，这通常会产生一些智能且高质量的系统，这显然是多种技能组合的产物。
2024-04-21 19:49:44
598
原创 Mac 上fiddler与charles 抓包https 小程序请求 内容
默认情况下，charles不能解析https协议的接口，里面的请求和响应数据都是乱码格式，所以我们需要下载ssl证书，来获取里面的数据。相同的网络，mac的ip＝a，手机用a作为代理，端口则是哟给你Charles的8888. 关键环节，mac使用正常端口访问网络。①手机连接和电脑相同的网络→输入密码→高级选项→代理→手动→输入Charles显示的当前网络ip和代理的端口→连接。手机配合MAC抓包主要是利用手机访问MAC机上的代理端口，把手机的请求和响应绑定到该端口。工具内部就能够模拟限速以及丢包的效果。
2024-04-21 18:16:40
1074
原创 css3多行文本多行文本缩略点击更多展开显示全部
比如我要实现如下效果：数据集名称展示一行，超出自动省略，末尾增加编辑icon。点击编辑的icon，换成input 输入框数据集描述最多展示三行，超出自动省略。末尾增加编辑icon。点击编辑的icon，换成textarea 输入框。
2024-04-21 18:11:50
887
原创 Web Components从技术解析到生态应用个人心得指北
他的定位就很轻盈，就是配合HTML页面，提供动态交互支持，不像现在的很多框架，动辄就是整站重写。Shadow DOM接口是关键所在：它可以将一个隐藏的、独立的DOM附加到一个元素上，它以shadow root节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样，但是这棵子树不在主DOM树中——即影子DOM是一种不属于主DOM树的独立的结构，所以Shadow DOM内部的元素始终不会影响到它外部的元素(除了:focus-within)，这就为封装提供了便利！
2024-01-18 12:39:00
1004
原创 计算机科学与技术专业开设课程名称英文翻译
Computer science is the theory, experimentation, and engineering that form the basis for the design and use of computers It involves the study of algorithms that process, store,communicate digital informa etc
2024-01-12 10:12:08
412
原创 通过windows自带管理工具、系统命令行、快捷键等快速操作
我在日常工作里习惯使用微信或者QQ的截图工具，但是有时候在断网没有登陆聊天工具的时候会非常尴尬，突然无法截图了。通过运行或命令打开系统属性，同时按Windows+R键，在运行对话框中键入命令"sysdm.cpl"，然后点击确定即可。或者也可以打开命令提示符并键入相同的命令以打开系统属性。ctrl+shift+Esc 打开任务管理器（或者ctrl+alt+delete）win10、win11 我电脑，属性与之前win7不同了，我希望打开之前的属性打不开了。截屏唤醒键：Win+SHIFT+S。
2024-01-11 10:41:44
914
原创 笔记本为什么不出可升级CPU的，用台式CPU不行吗？
主流的AMD桌面CPU，老的酷睿移动MQ系列基本都采用了PGA封装方式。比如，Intel所有以H，HQ，U，Y等结尾，包括但不限低压的处理器；所有的手机处理器等。：三种封装中体积最小，但是更换接近于0，同时由于封装工艺问题，BGA的触点如果在封装过程中没有对准或者结合，极有可能意味着报废，所以相比于LGA，PGA成品率更低。intel移动CPU1-3代，CPU是和台式机一样的可以更换的。：在三种封装中体积最大，但是更换方便，而且更换的操作失误要求低。其次是卖相，有点像俄罗斯的傻大黑粗的感觉！
2024-01-10 17:04:37
857
原创 笔记本为什么不出可升级CPU的，用台式CPU不行吗？
我十几年前的thinkpad 通过更换cpu复活了：联想ThinkPad E430c i3变i7：笔记本电脑CPU升级思路—CPU参数为什么现在的市面上可以更换cpu
2024-01-09 11:26:30
837
原创 升级win11显示:此版本的windows不支持该处理器—如何强升win11?
今天的我微信笔记本 msi gp62 mvr 无论是win10升级到win11 还是安装win11都无法安装。显示：Windows 11不支持该处理器win11系统升级
2024-01-09 11:22:10
1746
原创 win10 PowerShellw不认npm/yarn/pnpm/cnpm/nvm等命令，CMD窗口却可以
win10 powerShell 全局按照nvm、npm、pnpm、yarn等命令后，发现powerShell窗口不认这些命令，但是DOS cmd 窗口却可以。# 以管理员身份运行power shell根据提示，输入A，回车再次回到pnpm -v执行成功。但是一些同事却说不行，原来他不是超管这样就可以了，如果不成功，就输入y试试。这么命名是干什么用的？
2023-05-28 22:13:40
909
原创 云计算的三种模式IaaS/PaaS/SaaS/BaaS对比：SaaS架构设计分析
从宏观的角度来看，SaaS是一种软件应用程序交付方式，软件提供商集中化托管一个或多个软件应用程序，并通过互联网向租户体用这些软件应用程序。从分类上看，SaaS（软件即服务）也是云计算重要的一部分。云计算的三个分层，基础设施(infrastructure)在最下端，平台(platform)在中间，软件(software)在顶端，分别是分别是Infrastructure-as-a-Service(IaaS-基础设施即服务)：IaaS公司会提供场外服务器，存储和网络硬件，你可以租用。
2023-04-14 00:45:00
2005
1
原创 协同编辑：Google Wave架构分析
Google Wave的设计初衷是让人们互相发送信息，一起编辑文档，但用户对此感到困惑，很快就以失败告终。Google Wave持续了大约一年时间，于2010年8月被关闭。Wave“领先于时代”，而谷歌并没有有效地解释该服务的真正好处，但是谷歌高级副总裁乌尔斯·霍泽尔(Urs Holzle)说：“代码的核心部分以及驱动Wave创新的协议都已经开源，所以用户和合作伙伴可以继续我们的创新。很多东西是值得我们借鉴的。
2023-04-14 00:30:00
220
原创 协同文档：OT与CRDT实现协同编辑笔记
客户端负责收集新的变更，生成 changeset 并发送给服务端， 客户端因此需要 维护一些状态、存在一定的生命周期。$A$: 本地最新的版本，类比服务端的 $V_H$$X$: 发送给服务端的 changeset，但是还没有得到服务端的确认$Y$: 用户做的变更生成的 changeset，但是还没有发送给服务端容易知道，本地文档看上去的样子显然应该是 $V=AXY$当收到服务端推送过来的 changeset $B$ 时，客户端应该确认是否是可以应用到 A 上的版本的 changeset。
2023-04-14 00:15:00
521
原创 性能测量工具-DevTools/PageSpeed/LightHouse
前端的性能优化有诸多有迹可循的理论和方法，比如 Yahoo！性能军规（Best Practices for Speeding Up Your Web Site）、Google PageSpeed Insights Rules（万变不离其宗，诸如此类的性能优化准则都可以对应到 Browser Processing Model 的不同阶段。具体可以查看《
2023-04-14 00:15:00
226
原创 Preload与Prefetch的区别以及webpack项目中如何优化
preload 与prefetch 的区别 preload是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。 preload 顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗。 prefetch告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。 若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要..
2023-04-13 09:48:55
1147
原创 vue keep-alive(1)：vue router如何保证页面回退页面不刷新
在构建SPA应用时，经常遇到的场景就是列表页面 跳转到详情页，但是详情页面回退到列表页面，列表页面有重新刷新了。如何保证回退的时候不刷新页面呢？keep-alive是一个非常好的解决方案（当然你也可以以子路由，以绝对定位形势覆盖上去*_*）。keep-alive的作用keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇主要讲keep-alive的用法。keep-alive用法像Tabs加载动态组件（有的童鞋直接用动态组件取代路由功能—
2023-04-13 09:48:51
2668
原创 GIS坐标系测绘原理:大地水准面/基准面/参考椭球体/EPSG/SRI/WKT
预热文章系列：《GIS历史概述与WebGis应用开发技术浅解》、《GIS坐标系:WGS84,GCJ02,BD09,火星坐标,大地坐标等解析说与转换》、《OGC标准WMTS服务概念与地图商的瓦片编号流派》、《GIS基础知识 - 坐标系、投影、EPSG:4326、EPSG:3857》我们过一遍如下概念： 地理坐标系是球面坐标，参考平面是椭球面，坐标单位是经纬度； 投影坐标系是平面坐标系，参考平面是水平面，坐标单位是米、千米等。 地理坐标系转换到投影坐标系的过程理解为投影，即将不规则的地.
2023-04-13 09:48:47
2241
1
原创 React Native UI界面还原，组件布局与动画效果
写React Native UI和写 Android XML layout 布局 ，个人感觉是大同小异在《》里面提过web 环境中，React 框架，JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM 中在 React Native 框架中，。如果我们。因为 React Native 的底层为 React 框架，所以如果是 UI 层的变更，那么就映射为虚拟 DOM 后进行 diff 算法，。
2023-04-13 09:48:42
392
原创 sass安装：webpack sass编译失败，node-sass安装失败的终极解决方
sass难言之隐-sass安装的坑之前花了很多时间折腾node-sass，发现sass老是安装不上从sass刚刚开始出来开始，就遇到ruby安装sass失败问题。换淘宝gem库gem sources --remove https://rubygems.org/gem sources -ahttps://ruby.taobao.org/gem install sass后面又...
2023-04-13 09:48:26
285
1
原创 vue2.x老项目typescript改造过程经验总结
前言：关于Vue2.x 的TS改造，其实没有啥好说的。对于vue-cli项目来说，从新跑一遍vue create xxx-project ，选择Manually select features ，重新选择上typescript 选项即可。或者直接vue add typescript也可。网上太多的资料，这里也推荐一些我觉得还可的（我是自己搞的，个人感觉不难吧，哈哈） https://github.com/ffxsam/vue-typescript-cookbook https:.
2023-04-13 09:48:04
874
原创 WebKit三件套(3)：WebKit之Port篇
了解其有关Port方面的设计，从而了解究竟如何能移植WebKit到自己的应用中。WebKitPort方面的内容是可以很广的，例如可将不同的图形库、网络库与WebCore集成，提供不同的Port接口供外部程序使用等，例如同样在windows平台上可以运行的Google Chrome和Safari就是针对WebKit的不同移植。我们想了解有关Port方面的主要内容在于提供不同的Port接口供外部程序使用以及如何与外部程序交互，因为。
2023-04-13 04:15:00
81
原创 WebKit三件套(2)：WebKit之JavaScriptCore/V8
javascript是一门动态、弱类型、基于原型的脚本语言，其核心部分包含对脚本的编译、解析、执行、反编译、垃圾回收及标准类/类型如 bool、string、number的实现等；然后在此基础通过将已经符合DOM标准的文档DOM接口按照javascript接口定义及声明的方式绑定/导出到 javascript运行环境中，以丰富javascript的内涵，其本质相当于有了java虚拟机后，通过import不同类型的类库来扩展 java语言的应用。
2023-04-13 00:00:00
356
原创 head/reset/revert/rebase代码回滚全解：git提交记录的背后原理
reset是彻底回退到指定的commit版本，该commit后的所有commit都将被清除；reset执行后不会产生记录:revert仅是撤销指定commit的修改，并不影响后续的commit。revert执行后会产生记录。reset，revert都有撤销、回退的意思，但却各有千秋，区别还是很大的，所以该使用哪种命令一定要结合实际情况来决定。要搞清这些，还是得多学习下git基础知识。
2023-04-12 10:54:52
1611
原创 Git 工具 - 子模块: submodule与subtree的使用
git日常使用中，基本都是一个项目一个Git仓库的形式，那么当我们的代码中碰到了业务级别的需要复用的代码，我们一般怎么做呢?。也许是第三方库，或者你独立开发的，用于多个父项目的库。所以需要提取一个公共的类库提供给多个项目使用，但是这个library怎么和git在一起方便管理呢？现在问题来了：你想要把它们当做两个独立的项目，同时又想在一个项目中使用另一个。我们大致的考虑一下,一般有两种方案:抽象成NPM包进行复用;使用Git的子仓库对代码进行复用;
2023-04-12 10:54:47
761
原创 java并发编程(2)：Java多线程-java.util.concurrent高级工具
util.concurrent中容器在迭代时，可以不封装在synchronized中，可以保证不抛异常，但是未必每次看到的都是"最新的、当前的"数据。ConcurrentHashMap 替代同步的Map即(Collections.synchronized(new HashMap()))。众所周知，HashMap是根据散列值分段存储的，
2023-04-12 10:54:42
211
原创 Java注解(批注)的基本原理
注解的本质就是一个接口，并且继承了java.lang.annotation.Annotation，内部的定义其实就是一个带默认值的方法注解定义格式public @interface 注解名 {修饰符 返回值 属性名() 默认值;//TODO首先注解的修饰符一般是public的，定义注解一般都是要给三方使用的，不是public的又有什么意义呢？定义的类型使用@interface，可以猜出来和接口是有一些说不清道不明的关系的，其实注解就是一个接口，在程序运行时，JVM会为其生成对应的代理类。
2023-04-12 10:54:33
210
原创 maptalks点线面图形样式设置经验总结
个人偏好使用mapbox，但是架不住人多，被使用maptalks，然而的文档非常感人，让人泪崩三千里……设置symbol的，可以直接在 图形(Marker LineString Polygon )，Geometry、VectorLayer 设置。
2023-04-12 10:54:24
713
原创 Taro架构构析(1)：多端框架分析，Taro WePY uni-app对比
这类框架就是我们这篇文章的主角们：Taro、WePY 、uni-app 、 mpvue 、 chameleon，它们的原理也都大同小异：先以 JavaScript 作为基础选定一个 DSL 框架，以这个 DSL 框架为标准在各端分别编译为不同的代码，各端分别有一个运行时框架或兼容组件库保证代码正确运行。这类框架把 Web 技术（JavaScript，CSS）带到移动开发中，自研布局引擎处理 CSS，使用 JavaScript 写业务逻辑，使用流行的前端框架作为 DSL，各端分别使用各自的原生组件渲染。
2023-04-12 10:54:19
274
原创 Vuex在TSX中的改造方案：TS改造Vue2项目Vuex如何处置？
vuex目前比较流行的有：vuex-aggregate 、 vuex-class、vuex-module-decoratorsnpm搜到相关的，看下趋势图：vuex-aggregate vs vuex-class vs vuex-class-component vs vuex-class-module vs vuex-class-modules vs vuex-module-decorators | npm trends Stars Issues Version
2023-04-12 10:52:50
180
原创 Weex原理及架构剖析
早期H5和Hybrid方案的本质是，利用客户端App的内置浏览器（也就是webview）功能，通过开发前端的H5页面满足跨平台需求。比如PhoneGap cordova ionic ……该方案提升开发效率，同时也满足了跨端的需求。但有一个问题就是，前端H5的性能和客户端的性能相差甚远。Facebook 推出ReactNative关于RN，安利下《Weex与ReactNative 都是基于Yogo渲染骨架做的 跨端框架，一个基于React，一个基于Vue，个人偏好RN，但是Weex 貌似更香。
2023-04-12 10:51:31
619
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人