- 博客(98)
- 收藏
- 关注
RSS订阅原创 微前端架构详解
摘要：微前端架构详解 微前端是将微服务理念扩展到前端开发的技术方案，通过拆分应用为独立子应用实现团队自治。核心原则包括技术栈无关性、代码隔离和独立交付。主要解决通信机制、应用隔离、资源共享和路由管理等挑战。实现方式涵盖路由分发、iframe嵌套、WebComponent和Webpack5的Module Federation。主流框架如single-spa和qiankun（基于single-spa增强）提供了完整解决方案，其中qiankun支持HTML Entry、JS沙箱和样式隔离等特性，特别适合大型应用现
2025-07-14 15:14:18
1723
原创 十万级设备接入的微前端架构设计实践
十万级设备接入的微前端架构实践 本文分享某大厂十万级设备接入项目的微前端架构设计经验。针对设备搜索性能、第三方系统集成、模块通信、技术栈兼容和旧系统迁移等核心挑战，项目采用领域驱动设计（DDD）原则，将系统划分为设备管理、认证鉴权、数据可视化和集成兼容四个独立微应用。通过Lerna多包管理、差异化构建和统一部署等工程化实践，实现了源码集中管理、应用独立部署的架构。方案强调独立性、扩展性和兼容性，支持十万级设备亚秒级搜索，确保多系统安全互联，并完成50+旧页面平滑迁移。
2025-07-02 18:42:03
854
原创 主流单点登录（SSO）方案对比与选型指南
场景需求推荐方案关键考虑因素企业级/多系统集成、对接第三方登录标准化、安全性、生态支持、第三方集成能力大型组织内部多子系统统一登录CAS或OIDCCAS成熟度高；OIDC更现代、协议更流行B2B集成、复杂企业身份管理(如AD)SAML企业级安全、成熟标准、复杂组织结构支持同主域下简单子系统群主域Cookie(谨慎使用)实现简单快速，但安全性最低，仅限同主域微服务架构、API网关统一认证JWT(常与OIDC或Gateway结合使用)无状态、自包含、易于在微服务间传递用户上下文。
2025-06-30 17:24:56
1392
原创 leetcode刷题日记-2022-3-14
1、有效的括号https://leetcode-cn.com/problems/valid-parentheses给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。/** * @param {string} s * @return {boolean} */var isValid = function(s) { let map = { .
2022-03-21 15:09:42
384
原创 算法日记-跳表
/** * * 跳表： * * 普通的单链表，一个节点指向下一个节点，如果想要在单链表中查找一个元素，必须要遍历整个链表才可以搜索到这个元素。 * 那么，如果我们想要像二分查找那样对链表进行搜索查找呢？ * * 此时我们可以用另一个链表简历索引，每两个元素建立一个索引。比如 * * 1->2->3->4->5->6->7->8->9->10 * * 如果要查找的元素是10，那么我们就要从1开始遍历链表，查找到10则需要遍.
2022-03-14 17:19:19
235
原创 几条架构原则
一、KISS原则：keep it simple,stupid原则细说：保持每件事情尽可能的简单，用最简单的解决方案来解决问题。二、YAGNI：you aren`t gonna need it原则细说：不要搞一些不需要的东西，需要的时候再去写。不要写一些用不到的东西，最后导致代码包又大又冗余。三、爬，走，跑。原则细说：先保证功能能跑通，然后再去优化细节变得更好，然后再继续优化。迭代开发，敏捷开发。比如说第一个里程碑要什么时候完成，需要什么样的功能点，下一个里程碑是什么样的，不断的迭代。
2022-03-14 10:07:04
301
原创 使用Object.defineProperty实现数据的绑定通知
class Dep{ constructor(){ this.subs = []; } addSub(sub){ this.subs.push(sub); } notify(){ this.subs.forEach(sub => { sub.update(); }) } } ...
2022-03-08 11:48:55
213
原创 js 动手实现一个call、bind 、apply
检查当前调用的是否为函数 如果当前没有传入指向的this，则赋值为window 将fn指向当前调用的函数 获取传入的参数 将参数传入fn进行调用 将对象上的fn删除 返回结果 //普通call的实现 function hello(){ console.log('hello 我是'+this.name); }; let person = { name:'krys' }; var name = 'liang';//只有va
2022-02-21 17:44:33
296
原创 App Store 技术支持
如果您在使用过程中有问题请留言或发邮件我。邮箱地址：krysliang@163.com谢谢!If you have any questions, please leave a message or send me an email.Email：krysliang@163.comThank you!
2022-02-16 21:09:24
201
原创 手写简单的promise
const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function newPromise(fn){ const _that = this; _that.state = PENDING; _that.value = null; _that.resolvedCa..
2022-02-15 09:31:35
352
原创 JavaScript B+树
/** * B+树的构造 * * * 1、第一步 改造二叉查找树（左边的子节点比当前节点小，右边的子节点比当前节点大） * 树中的节点并不存储数据本身，而是只作为索引，然后再每个叶子节点串在一条链表上，链表中 * 的数据是从小到大有序的。 * 改造以后，只要拿着区间的起始值在树中进行查找，当查找到某个叶子节点的时候，顺着链表往后遍历， * 直到链表中的结点数据值大于区间的终点值。那么遍历到的数据，就是符合区间值的所有数据。 * * 2、第二步 降低树的高度 减少读取节点的操作 从.
2022-02-09 11:43:16
1296
1
原创 JavaScript Dijkstra算法 Astart算法
/** * 最短路径 * Dijkstra算法 * 首先根据起始顶点到当前顶点的dist 构建小顶堆，然后区堆顶元素。 * 取堆顶元素以后，需要从下往上堆化 * 然后取堆顶元素对应的邻接表中，更新每个顶点的dist值，并且入队。 */ class Graph{ constructor(v){ this.v = v;//图中的顶点 this.n = v.length; this.adj = new Array(this.n);//图...
2022-01-05 17:28:09
710
1
原创 JavaScript拓扑排序的实现
/** * 拓扑排序 * 凡是需要通过局部顺序来推到全局顺序的，使用拓扑排序来解决。 * 还可以使用拓扑排序来检测图中环的存在。 * * * 假设几个源文件之间两两之间的依赖关系已知，如何确定一个全局的编译的顺序呢？ * 比如a依赖b，b依赖c，d依赖b * 那么编译顺序就是 c->b->a->d * 或者c->b->d->a * * * 我们使用一个有向无环图来实现拓扑排序。 * 文件之间的依赖关系抽象成一个有向图，每个源文件就是一个.
2022-01-05 17:27:00
1212
2
原创 JavaScript动态规划的实现
/** * 动态规划 * 一个模型 三个特征 * 一个模型：动态规划适合解决的问题的模型：“多阶段决策最优解模型” * 三个特征：1、最优子结构(可以通过问题的子问题的最优解推导出问题的最优解)、无后效性、重复子问题 * 解决动态规划的两种思路：1、状态转移表法和状态转移方程 * 1、状态转移表：拿到问题的时候，定义状态，每个状态代表一个节点，然后画出递归树，从递归树中就可以看出来， * 是否存在重复子问题。然后画出一个状态表，每个状态包含三个变量，行、列、数组值。 * 根据决策的先后过程.
2021-12-24 15:24:18
272
原创 JavaScript贪心算法
/** * 贪心算法 * 贪心算法有：霍夫曼编码、prim和kruskal最小生成树算法、Dijkstra最短路径算法。 * * 什么是贪心算法： * * 1、针对一组数据，问题有限制值和期望值，希望从中选出几个数据，在满足限制值的情况下，期望值最大。 * 2、每次选择当前情况下，在对限制值同等贡献量的情况下，对期望值贡献最大的数据。 * 3、举几个例子看下贪心算法产生的结果是否是最优的。 * * * 举例子 * 1、区间覆盖 * 假设有n个区间，区间的起始断点和结束断点.
2021-12-24 10:12:28
853
1
原创 树与二叉树
/***树*树的概念**节点的高度=节点到叶子节点的最长路径（边数）*节点的深度=根节点到节点的路径（边的个数）*节点的层数=节点的深度+1*树的高度=根节点的高度（根节点到叶节点的个数）*//***二叉树*二叉树的概念*二叉树，每个节点最多有两个子节点，分别是左子节点和右子节点。**当除叶节点以外所有的节点都拥有左右子节点，且叶节点都在最底层的树，叫满二叉树。*...
2021-11-16 14:35:56
1173
原创 JavaScript哈希表
/** * 哈希表（散列表） * * 散列的思想，就是用key对应着一个value。将key转换为value的方法叫做散列函数，而散列函数得到的value就是散列值， * 散列值也叫做哈希值。这个value就对应着数组的下表，然后根据value去数组中对应的位置存取数据。 * * 散列函数，hash(key)，其中key表示着元素的键值，has(key)-》value就是经过散列函数计算得到的散列值（哈希值）。 * * 散列函数设计的基本要求 * a.散列函数计算得到的散列值...
2021-11-10 14:02:47
1366
1
原创 JavaScript二分查找
/** * 二分查找法 * * 二分查找针对的是一个有序的数据集合，查找思想有点类似于分治思想。 * 每次都通过跟区间的中间元素对比，待查找的区间缩小为之前的一半，等找到要查找到的元素，或者区间被缩小为0. * 时间复杂度为O(logn)，非常高效的时间复杂度。 * * * * 二分查找的局限性 * 1）只能依赖于数组的这种数据结构，因为二分查找依赖于随机访问下标。 * 2）只能依赖于有序的数组。如果数据还没排序过，需要先排序再进行二分查找 * 3）只能使用与一组静态的数.
2021-11-02 17:09:34
155
原创 剑指offer day 3
1、剑指 Offer 05. 替换空格var replaceSpace = function(s) { let newS = s.split(' '); return newS.join('%20')};2、剑指 Offer 58 - II. 左旋转字符串var reverseLeftWords = function(s, n) { let s1 = s.slice(0,n); let s2 = s.slice(n,n.length); r.
2021-10-21 14:05:40
192
原创 刷题日记3
1、剑指 Offer 06. 从尾到头打印链表/** * @param {ListNode} head * @return {number[]} */var reversePrint = function(head) { let stack = [],cur = head; while(cur){ stack.unshift(cur.val); if(cur){cur = cur.next;} } return stack;}
2021-10-20 15:52:56
104
原创 刷题日记-剑指 Offer 30. 包含min函数的栈
题目地址剑指 Offer 30. 包含min函数的栈解题思路：一个栈存放原来正常的数据，一个栈存放每次入栈时当前栈中最小值。var MinStack = function() { this.stack = [];//原来的栈 this.ministack = [Infinity]//存放按照压栈顺序中最小的那个值};/** * @param {number} x * @return {void} */MinStack.prototype.push = funct
2021-10-19 17:30:30
147
原创 算法刷题日记-剑指 Offer 09. 用两个栈实现队列
题目地址力扣解题思路：有两个数组，一个作为入栈数组，一个作为出栈数组。入栈直接将元素压栈；出栈的话，如果出栈数组还有元素就直接出栈，否则将入栈数组的元素全部出栈压到出栈数组中。var CQueue = function() { this.stackA = []; this.stackB = [];};/** * @param {number} value * @return {void} */CQueue.prototype.appendTail = fun
2021-10-19 16:53:56
118
原创 算法刷题笔记-两数相加
/** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNode} */var addTwoNumbers = function(l1, l2) { let head = new ListNode(-1); let cur = head; let sum = 0,inter = 0; while(l1 || l2){ let val1 = l1?l1.val:0; .
2021-10-19 16:26:55
114
原创 算法刷题笔记-数字的补数
这题有两个思路：第一个就是暴力法，遍历每位进行判断赋值，结合js的方法varfindComplement=function(num){letbinString=num.toString(2)letnewString=''for(leti=0;i<binString.length;i++){if(binString[i]=='0'){new...
2021-10-18 17:22:41
101
原创 算法刷题日记-乘积最大子数组
题目链接：https://leetcode-cn.com/problems/maximum-product-subarray//** * @param {number[]} nums * @return {number} */var maxProduct = function(nums) { if(typeof nums == 'object' && nums instanceof Array){ if(nums.length ==1){
2021-09-09 15:34:03
150
原创 node中使用superagent、cheerio进行爬虫
想必很多人都有这样的一个幻想，我可不可以啥也不用干，就获得别人的劳动成果呢？比如，我想做一个类似与豆瓣这样的app来练手，但是我有没有数据进行支撑，这时候我就想，能不能把豆瓣上的内容爬下来，放到我自己的app里面进行显示呢？哈哈大家都这样！ok，立马来开干。首先我们创建一个express应用express接下来用vscode进行打开，并且安装以下插件npm install --save cheerio superagent然后打开route下面的index.js文件，
2021-08-31 17:21:27
684
1
原创 深入学习 Flutter 中的动画-从静态变换到动态效果
今天来学习一下Flutter中的动画。我们在js+css中，已经习惯用css3中的animation，transform，transition这三个加在一起去做。我们像前端那样，先从静态的变换中谈论。一、变换组件在css中如果要先让一个元素发生平移，使用的是transform：translate，那么在flutter中，已经封装起组件进行使用，只用填入平移的位置就可以。1、平移Transform.translate(offset: Offset(...
2021-08-12 15:16:50
2070
1
原创 Flutter 切换主题
在flutter中，ThemeData 来统一管理主题的配置信息。ThemeData 涵盖了 Material Design 规范的可自定义部分样式，比如应用明暗模式 brightness、应用主色调 primaryColor、应用次级色调 accentColor、文本字体 fontFamily、输入框光标颜色 cursorColor 等。如果你想深入了解 ThemeData 的其他 API 参数，可以参考官方文档ThemeData。我们先来定义一个全局的主题文件impor
2021-08-11 15:06:53
1614
2
原创 Flutter 数据共享的三种实现方式
以前使用其他框架的时候，比如vue 会有vuex，react会有redux等数据共享方式。而刚使用flutter的时候，因为其编程语言和框架特性的不一样，可能一时半会很难上手。今天就来聊聊flutter中的数据共享。一、InheritedWidgetInheritedWidget是flutter中的一个功能型的widget，适用于在widget树中共享数据的场景，比如我们在应用的根widget树中通过InheritedWidget共享了一个数据，那么在它所有的子widget中都可以获取到这个共享
2021-08-11 14:57:20
1413
1
原创 Flutter 实战之dart语言
1、了解dart语言之前，先要理解一下什么是JIT和AOT。（1）JIT （just in time）即时编译。在开发周期中使用，可以动态下发和执行代码，开发测试效率高，但运行速度和执行性能会因为运行时即时编译受到影响。（2）AOT （ahead of time）运行前编译。提前编译，可以生成被直接执行的二进制代码，运行速度快、执行性能表现好，但每次执行前都需要提前编译，开发测试效率低。在开发期间使用JIT编译，发布期使用AOT。flutter基于这两个机制，使得开发效率高，发布时执行快..
2021-08-09 17:20:50
501
1
原创 从顶部观看Flutter的架构与原理
Flutter 重写了一套包括底层渲染逻辑和上层开发语言的完整解决方案。这样不仅可以保持试图渲染在Android和ios上的高度一致，在代码执行效率和渲染性能上也可以媲美原生App的体验。那么，flutter是如何完成组件的渲染呢？在计算机系统中，CPU把计算好的内容交给GPU，有GPU完成渲染后放入帧缓冲区，随后视频控制器根据垂直同步信号VSync从帧缓冲区中读取帧数据交给显示器完成图像显示。（Skia是一个底层图像渲染的引擎，具体是怎么工作的，我也不了解，我只知道flutter将..
2021-08-09 15:15:30
315
1
原创 MongoDB
一、MongoDB相信大家最先学习的数据库应该是mysql这类关系型的数据库，那既然有了这么成熟的数据库了，我们为什么还要使用信的数据库呢？是因为Mysql在处理海量数据的时候效率会显著的变慢，所以就诞生了mongoDB这类的nosql数据库了。下面我们先来了解一下什么是mongodb1、mongodb数据存储格式mongodb使用json格式来存储记录，也就是说一条记录就是一个json，而存贮在mongodb是以BSON形式来存放。也就是说，数据记录的格式是j...
2021-07-19 18:14:29
2255
1
原创 使用Electron 创建桌面应用
Electron是一个使用前端的技术来创建桌面应用的框架，打包后可以再MAC、windows和linux上直接运行。1、安装安装的时候按照它官网的文档进行了搭建，但是一直报错，这也是个坑啊。后来把代码改了一下，按照下面的安装方式就可以了创建一个文件夹，然后先clone一个demo下来git clone https://github.com/electron/electron-quick-start然后执行npm i --save-dev ele...
2021-05-20 16:17:53
1011
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人