JavaScript refactoring (9): Custom JavaScript product framework

To a certain extent, JavaScript requires not only reconstruction on several layers, but also the integration and systemization of these reasonable and scattered reconstruction to form a front-end framework suitable for your own products.
Taking the front-end framework of a product as an example, the following components are included:
1. common tool components provide the basic universal capabilities of the UI components, including log, cache, data sharing, asynchronous data loading, native object extension, and Ajax product customization.
2. Share the UI components, including the general pop-up box and general buttons.
3. The basic product module loads this JS on all pages, including the comment module, scoring module, basic fee module, download module, and playback module.
4. Expand the product module and load the JS only on a specific page, including the player and live video channel components.
5. Associate the constant preset module, which is mainly because some system constants cannot be determined in JavaScript and need to be passed in externally.
(Dependency: 5-> 1-> 2-> 3-> 4)
The above JS needs to be refined in the development process, and the dependency between each other needs to be strictly limited, but at the time of release, use scripts or JS aggregate compression tools to integrate them into one or more specific JS files.
 
UI model and business model:
This part can be said to be the core of the framework, including model definition and model data storage. All interfaces are developed around the model.
 
Typical problems encountered during product Framework implementation:
1. Differences of page JavaScript scripts in different languages:
For example, if Arabic is arranged from right to left, the DOM-manipulation script may be different from that in English, differences caused by languages can be solved by problem abstraction and language classification:
For example, if the language and text are arranged from the right to the left and from the left to the right are the root causes for different presentations, set the language in the associated constant preset module, the ing between the involved languages and the left and right directions should be stored in the code, and then treated differently in JavaScript code.
2. Some non-General DOM-related code on the page is closely coupled with the page display. This part of code is not suitable for being placed in the framework. After being placed, it is not convenient for product customization, it is necessary to clarify the demarcation lines inside and outside the framework.
3. Develop a detailed product Framework Implementation Scheme Based on the skills of the development team.
For example, development team members generally lack the JavaScript object-oriented capability. In this case, the framework should not be too thick. The JavaScript outside the framework should be appropriately relaxed and naming conventions should be made at the same time.
4. Check the API.
It is necessary for experienced programmers to check the interfaces released by the framework to ensure the rationality of the interface design.

Author's "four-fire BLOG"