about the front-end modular
- when it comes to the front modular, you can think of is the CMD, amd, umd front-end modular standard, these belong to file level of modularization ;
- or you will think of component encapsulation, NPM packet encapsulation and so on, these are component level of modularization ;
- or you can think of to divide the page into many independent blocks, each block is a module, these are view level of modularization ;
- today to explore yes business function level front modular ,

Business function level front-end module in the background familiar developers eyes, we usually say "user module", "order module", "comments module" is from the business functions such as Angle of view to divide, as the function of the front end bearing more and more thick, it's not just simple rendering a view, it often contains a lot of business logic and state, so more and more in the front end of the project have appeared in the model, the controller, the concepts of states, if the front stays at a file, modular component level, then the whole project will become difficult to maintain and expand,
Business module should be a high cohesion and low coupling of the overall package

See a lot of popular front-end engineering structure, tend to be like this:



As you can see, in the models (store) in this area, or have a functional division in accordance with the business module, but... Is limited to models, from the view, simply a model module what is the point? Such modular complete? Can the independent development? Flexible plug? Can scale out?

reference

a complete module should be included:
- a model dealing with the abstract logic and state
- a group of related views, which is used to display model, note: the model and the view is a one-to-many relationship
- some of the other components and auxiliary resources

They should be classified into one directory below, rather than fragmentary scattered in every corner, I just need to have independently developed this directory change permissions instead of the whole project, plug module when you just need to copy or del this directory, rather than dig out each directory to find the relevant documents...

So I'm looking forward to engineering structures should be like this:



Can see that each module has a separate directory structure, all kinds of resources are divided into public and module private resources, all modules only rely on the public resources, between modules and module cutting very clean,

view of modularization

The page (view) are classified into different modules, you might ask: if a view contains multiple modules to the inside, then the view which module should belong to? This case, we need to cut the view, let it into multiple functions more single view, the view can be nested, isn't it?

on-demand combination and load

When a customer wants to buy a "module" article, of course, is around the article module related code and resources shall be packaged to him, gave him a view or model alone is meaningless, it could not run,
On-demand load is the same: on-demand load should be the whole module, rather than in the traditional sense of the lazy loading a component

So, engineering package, all the code should be the whole module folder packed into a separate bundle, including views, model, components and other auxiliary code,

note that foreign encapsulation

Module is according to the principle of "high cohesion and low coupling", divided into modules and module is loose, lots of methods and interfaces should be encapsulated within the module, only on-demand exposure to foreign trade and export, if special close association between two modules, whether to consider them should be merged into one module

The solution to I

Above just thinking and thinking, the realization of the idea, of course, there are a variety of specific solutions, such as: my original medux frame series, welcome to discuss:

welcome to try cross-platform front-end framework @ medux

Combined with the actual case: medux - react - admin