Origin of Ray

我们接着上一篇博客继续总结和学习JavaScript的常用设计模式，这一次我们总结两个在JavaScript角度来讲比较像的模式，也就是代理模式，策略模式。

这两个模式在非函数式编程编程的语言中，如Java中区别是比较明显的，但是用JavaScript来看则是比较相似的。

上一篇博客我们介绍了Qiankun的沙盒机制，也就是不同的子应用之间是如何做环境隔离的，这篇博客我们就基于上一篇博客讲一下如何利用沙盒去进行子应用的加载和切换。

qiankun是基于single-spa实现的，所有内部用到了部分single-spa的接口，简单说一下single-spa和qiankun的区别，single-spa只做了子应用的注册，切换，路由监听等，还没有达到一个商用的水准，而qiankun在此之上加了js和css的沙箱隔离，按照官方文档，qiankun是达到了商用的要求。

为什么需要微前端

微前端其实诞生两个大的背景下，在提倡拥抱变化的前端社区可以看到新的框架、技术、概念层出不穷，并且随着WEB标准的演进，前端应用已经具备更好的性能、更快的开发效率。但随着而来的是应用的复杂程度更高、涉及的团队规模更广、更高的性能要求，应用复杂度已经成为阻塞业务发展的重要瓶颈。如何让现有系统拥抱最新技术提高生产力、并且解耦单体应用，是现在前端工程不得不面临的挑战。

随着对JS的知识的了解和实际的开发需要，内心对于重读设计模式的感触越来越深，所以就重新拿起了《JavaScrip设计模式与开发实践》一书，并结合《设计模式之美》的部分内容，先做个总结，并先讲一下单例模式，剩下的后续慢慢讲。

首先提出几个问题，也是我这次的几个比较总结性的收获：

• JavaScript是面向对象还是面向过程
• 函数是一等公民这一点是面向对象还是面向过程

然后抛出我这次对设计模式的一个最大的收获，就是所有的设计模式，其实都是识别出代码中不变的部分和易变的部分，分别封装起来，然后组合二者,而要准确地识别出这一点，不仅需要代码能力的深厚，更是要真正地去理解业务。

比如策略模式，一个个策略就是易变的部分，而对策略的调用则是不变的部分。代理模式中，被代理的操作就是不变的，而代理本身就是易变的。

其实，设计模式的出现某种程度上就是为了弥补语言的不足，比如原型模式算是一种设计模式，但是JavaScript本身就通过原型链支持了这种模式。

最近在阅读《Web高效编程与实践优化》的计算机基础一节，看到他讲了JS中Set和Map的区别，以及Object的实现，算是解决了往常的一点疑惑吧，这里简单总结下：

基础知识

首先我们回顾下操作系统的知识，即：

• 为什么会出现进程和线程的概念，他们的出现是为了解决什么问题
• 进程和线程的概念与定义
• 线程的调度
• 线程的同步与互斥
• 死锁问题

Redux是一个web前端的状态管理库，通用与所有前端页面，并不依赖于什么框架，是一个纯js的项目，其原理和源码比较简单，我们先要理解redux源码，再去看redux-toolkit源码，才能明白redux-toolkit的源码为什么要那么写，然后才能结合react源码理解react-redux的源码。这次我们就先来理解redux的源码。

今天leetcode的每日一题是和至少为 K 的最短子数组,这道题需要使用前缀和加单调队列。

我们都知道React可以开发一个SPA，也就是单页应用。所谓单页应用，顾名思义，就是整个网站的web前端只有一个html文档。这种应用区别于传统的网站，在web刚开始的发展的时候，不同的页面就对应不同的html，也就是说你能看到几个页面就有几个不同的html，地址栏每次地址的改变都会重新发出一个get请求给服务器，然后请求回来一个不同的html文档。

但是单页应用不需要，甚至说不应该每次路由改变都发送get请求，因为它只有一个页面，那么这种在这种情况下，我们怎么实现路由改变时只更新页面而不发起新的请求的呢，这就要用到react-router。我们一起看一下react-router的使用以及简单的原理介绍。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。关于Flex布局可以看我的上一篇博客：https://sunra.top/posts/40806/

这篇博客我们继续介绍下一种新的布局：grid布局