concept
- Components: Originally intended for code reuse, relatively single or independent functionality. At the bottom of the code hierarchy of the entire system, it is dependent on other code, so componentization is vertically layered. Multiple components can be combined into a component library, which is convenient to call and reuse. Components can also be nested, and components can be combined into large components.
- Module: In the definition of software engineering, a module is a sequence of adjacent program elements (for example, data specifications, executable statements) bounded by boundary elements. Procedures, functions, subroutines, macros, and so on can all be considered modules. Objects in object-oriented are modules; Methods in objects are also modules. A module is the basic building block of a program.
| category | purpose | interface | results | Architecture localization |
|---|---|---|---|---|
| component | Reuse and decoupling High reuse and low coupling | None Unified interface | Base libraries, base components | Vertical stratification |
| The module | Isolation/encapsulation high cohesion, low coupling | Unified interface | Business framework, business module | Horizontal partitioning |
Here’s another explanation for coupling and cohesion:
- Coupling: A measure of the degree to which different modules within a software structure are connected. The strength of coupling depends on the complexity of module indirect port. A low-coupling system can maintain any module without much knowledge of the others. For example, two modules are least coupled if they first work independently.
- Cohesion: How closely the elements of a module are combined with each other. In short, ideally cohesive modules do only one thing.
That said, in a nutshell, modularity is a separation of functions, and modularity does not require componentization, which means that you can do this without thinking about code reuse at all, and just bring the code of the same business together into different modules.
Components in VUE
Having said that, let’s give an example to help us understand.
As shown in the figure above, you can roughly divide the user management page into two modules: search boxes, lists, and for lists, tables and pagination. This is modularity.
The action buttons in the table can be divided into a component, which can be logically reused, which is componentization. In the front-end project, the componentized reuse of code includes the reuse of styles (CSS) and functions (JS). By the way, I’ve always found vue’s single-file component design to be an excellent way to componentize UI.
Let’s go back to the definition of a component in the official VUE documentation: A component is a reusable VUE instance with a name.
Combining with the definition of module in Software Engineering, we can find that the “component” in VUE is not a pure componentized unit, but can also be a modular unit.
For example, in the example above we split the page into search boxes and tables. In VUE we do this by splitting them into a component and writing the corresponding logic in the component.
Other aspects of modularity in VUE
- vue-router
Router is one of the cornerstones of SPA application, and routing is also a modular implementation. For example, we write user management interface and role management interface into different routes, which are divided into different modules.
- vuex.modules
Here, I understand why VUex designs modules. We write the data processing of different business modules in different files to ensure the maintainability, understandability and reliability of data center codes.
Write in the back
Before modularization and componentization confused, no wonder before the interview failed. Because this summed them up, in order to check for everyone to fill the gap. If there is something wrong, we welcome you to correct it.