How is the JS framework structured? Thinking

I recently wrote the big chart rolling component, which should be the third time since I learned Js. I am still not satisfied. Today I accidentally saw the big chart rolling of thunder, I thought that the component I wrote was difficult to apply to this scenario. I did not expect this from the conception. I just wrote my mind as a mark.

We mainly discuss the JS framework for implementing page JS special effects.

The current understanding of the cells that make up the JS framework is: The most common set of functions. How to call organizations between these functions is not considered. We write a JS framework to reduce development costs. The most important thing is the time cost. What the JS framework needs to implement is that developers can get a desired effect by defining simple parameters. The most common is to pass a new object that defines various parameters, then the desired effect is displayed.

At this time, the JS framework function at the first layer came out, that is, the outermost layer, which is the most closely connected to developers. The question of how flexible this layer is to locate the JS framework, and how to organize and improve the functions of this layer.CodeReusability, performance improvement, and code reduction are the second question.

In writing the outermost layer functions, we can always find some common functions. These functions are extracted, and after reasonable organization and coordination, they become the second layer function component, these components are mainly written to facilitate the development of the outermost layer functions and APIs.

The innermost component should serve the second-layer function and the third component, that is, some basic functions, such as isarray and isobject. These functions are very similar to those of native JS functions. It can be said that some functions may be used in most development scenarios.

The relationships between the three layers are as follows)

Components at the outermost layer of the JS framework usually use the second layer and the core layer. The core layer rarely calls each other, while the second layer usually needs to call each other to implement some functions. For example, animate may often use dom (this is not shown in the figure ). In the middle of the third layer, the functions should be decoupled as much as possible. The large image rolling component should not be coupled with the pop-up layer, but also ensure the scalability of each function, at least each API in the framework must be called to each other. There is a great benefit in doing so, that the scalability of each function is greatly improved without writing it by yourself. For example, the tab effect of the digital navigation and the lazyload effect of the scrolling image may be used for rolling a large chart. If the normal writing effect is used, the core code of the large chart rolling is coupled, I found a lot to be changed in the next use, so it is better to write it again. Based on the above ideas, we will write the tab and lazyload effects. developers can not only call them separately, but also write a very elegant big chart switching component through a simple combination.

The big chart switching was not decoupled on the third layer at the beginning. The digital navigation and image scrolling were written together, while the digital navigation only implemented class switching, however, even images and navigation like thunder are hard to achieve with animated effects. After thinking, the big picture is the big picture, and the digital navigation is the digital navigation. Although the overall effect is a whole, the separation is more appropriate in the JS framework structure. After separation, you can call the SDK in applicable scenarios to transfer the development volume to the Framework user, which is better for the whole.