Origin of Ray

之前的博客我们讲了我们创建VueRouter实例并通过Vue.use应用之后，VueRouter内部如何生成一整套自己的数据结构来存储路由配置的，这次博客我们继续解读Vue Router的源码，大致内容是Vue Router的路由守卫的执行逻辑。

I have encountered a problem these days, that is, when the vue-router nests subroutes, if the deep router-view component does not declare a key, and the component in the route configuration is a function-style component, it will cause the router.push to fail to update.

For function-based components and function-based programming, if you need it, remember my previous one.相关博客;

This article mainly analyzes the source code of vue-router. The source code of vue-router is mainly in two parts. The first part is to do route matching, and the second part is to do route jumping. This article mainly focuses on the first part

Function programming and function components are a trend in development now. They have been used in the past, but they have not been understood conceptually. This article summarizes the two together and makes a certain comparison.

Function programming is a programming paradigm, and function components are a product of this paradigm.

We continue to summarize and learn JavaScript Design Patterns, this time we summarize two similar patterns in JavaScript point of view, that is, the proxy pattern, the strategy pattern.

The difference between these two patterns is obvious in non-functional programming languages such as Java, but they are relatively similar in JavaScript.

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

Qiankun is based on single-spa implementation, all internal use of part of the single-spa interface, a brief introduction to the difference between single-spa and qiankun, single-spa only do sub-application registration, switching, routing monitoring, etc., has not yet reached a commercial level, and qiankun on top of this js and css sandbox isolation, according to the official doc, qiankun is to meet the commercial requirements.

Why do you need a micro frontend

In fact, under the two major backgrounds of the birth of micro frontend, in the front-end community that advocates embracing change, new frameworks, technologies, and concepts can be seen emerging one after another, and with the evolution of WEB standards, front-end applications have better performance and faster development efficiency. However, with the higher complexity of applications, the wider team size involved, and higher performance requirements, application complexity has become an important bottleneck blocking business development. How to make existing systems embrace the latest technologies to improve productivity and decouple single applications is a challenge that front-end engineering has to face now.

With the knowledge of JS and the actual development needs, the heart for re-reading Design pattern feeling more and more deep, so I picked up the “JavaScrip Design pattern and development practice” a book, and combined with the “Design pattern” part of the content, first make a summary, and first talk about the singleton pattern, the rest of the follow-up slowly.

First of all, I would like to raise a few questions, which are also my summary gains this time:

• Is JavaScript Object Oriented or Process Oriented?
• Is the function a first-class citizen Object Oriented or Process Oriented?

Then throw out one of my biggest gains from Design pattern this time, that is, all Design patterns are actually identifying the invariant parts and variable parts of the code, encapsulating them separately, and then combining the two. To accurately identify this, not only do you need deep code capabilities, but you also need to truly understand business practices.

For example, in the strategy pattern, each strategy is a volatile part, while the call to the policy is an invariant part. In the proxy pattern, the operations of the proxied are immutable, while the proxy itself is volatile.

In fact, the emergence of Design patterns is to some extent to make up for the shortcomings of the language. For example, the prototype pattern is a Design pattern, but JavaScript itself supports this pattern through the prototype chain.

Recently, in reading the computer foundation section of “Web Efficient Programming and Practice Optimization”, I saw that he talked about the difference between Set and Map in JS, and the implementation of Object, which solved the usual doubts. Here is a brief summary:

Basic knowledge

First, let’s review the knowledge of operating systems, namely:

• Why do the concepts of processes and threads appear, and what problems do they appear to solve?
• Concepts and definitions of processes and threads
• Scheduling of threads
• Thread synchronization and mutual exclusion
• Deadlock problem

Redux is a web front-end state management library, common to all front-end pages, and does not depend on any framework. It is a pure js project. Its principle and source code are relatively simple. We must first understand the redux source code, and then look at the redux-toolkit source code. Only then can we understand why the source code of redux-toolkit is written in that way, and then we can understand the source code of react-redux in combination with the react source code. This time we will first understand the source code of redux.