MVC
The full name of MVC is Model View Controller, which is the abbreviation of Model, View and Controller. It is a design pattern that organizes code by separating business logic, data and interface display, and gathers business logic into a component. There is no need to rewrite business logic while improving and customizing interfaces and user interactions.
We can think of:
- The M-Model (data Model) is responsible for manipulating all data
- V-view is responsible for all UI interfaces
- C-controller is responsible for the others
For example:
Const M = {data: const M = {data: {}, create() {}, delete() {}, update() {}, get() {}} // V contains initialization and rendering, as well as some user-visible content const V = {HTML: ` `, init () {}, render () {}} / / C contains some event bindings, and other... const c = { init() {}, events: {}, }Copy the code
EventBus
EventBus, also known as the Observer pattern, also known as the Publish/Subscribe pattern, defines a one-to-many dependency that allows multiple observers to listen on a subject object at the same time. The topic object notifies all observer objects of state changes so that they can update themselves automatically.
Common API:
- The binding event
eventBus.on(“eventName”,callback)
- Triggering event
eventBus.emit(“eventName”,[…args])
- Unbundling event
eventBus.off(“eventName”,callback)
Table driven programming
Table driven programming, simply refers to the use of table lookup method to obtain the value. Instead of the if else method, logical statements tend to be simpler and more straightforward.
The benefits of this approach are:
- Improved readability of the program.
- Reduced duplicate code.
- Scalability.
- The program has an obvious backbone.
- Reduced complexity.
modular
When JS appeared, JS was generally used to realize some simple interactions. Later, with the development of JS, JS was used to realize more and more complex functions. For the convenience of maintenance, we also extracted JS of different functions as a JS file, and the concept of modularity is, Separate files that implement different functions or control different areas of the code in the form of modules are all we need to introduce in the project. This increases the readability and maintainability of the code, and at the same time reduces the coupling of the code, greatly reducing the difficulty and time for technical updates or code refactoring.
Module functions are mainly composed of two commands: export and import. The export command specifies the external interface of the module, and the import command is used to input functions provided by other modules.
Such as:
Import $from 'jquery' // Import jquery into the current JS fileCopy the code
Export default init // Export the init method from the current JS fileCopy the code