MVC

The MVC pattern represents the Model-View-Controller pattern. This pattern is used for layered development of applications.

  • Model – A Model represents an object or JAVA POJO that accesses data. It can also have logic to update the controller as the data changes.
  • View – A View represents a visualization of the data contained in the model.
  • Controller (Controller) – Controllers act on models and views. It controls the flow of data to model objects and updates the view as the data changes. It separates the view from the model.

(MVC block diagrams are not unique)

MVC is a catch-all, which means that all pages can be rendered as m+ V + C objects

//m is used to store data. Const m={data:{n:1}, update(){}} const v={el:null, // // Render (data){}} const c={init(){} autoBindEvents(){} event:{}}Copy the code

Matters needing attention:

Things but three

  • If you write the same code three times, you should get a function
  • If you write the same property three times, you should make it a common property (stereotype or class)
  • If you write the same prototype three times, you should use inheritance

The price

  • Sometimes the inheritance hierarchy is too deep to understand the code at once
  • It can be solved by writing documents and drawing class diagrams

EventBus

Think of all objects as points

  • How does a dot communicate with a dot
  • How can one point communicate with multiple points
  • How do multiple points communicate with multiple points

Eventually, we found a dedicated point for communication, and that point was the Event Bus.

In development, EventBus is often chosen for inter-module communication and decoupling.

const eventBus=$(window)

Since it is required for each module and each object, the EventBus class is introduced. Mainly to use its two methods:

  • on
  • trigger
Eventbus.trigger ('m:updated') eventBus.on(' M :updated', () => {// Listen for events // What needs to be done when events occur, such as rendering, etc.})Copy the code

View = render (data)

  • Render directly is much easier than manipulating DOM objects
  • You just change the data, and you get the view

Table driven programming

Table-driven methods are methods that allow you to look up information in a table without having to use logical statements (if or case) to find it. In fact, any information can be selected by the table. In simple cases, logical statements tend to be simpler and more straightforward. But as logical chains become more complex, tables become more attractive.

When you have a lot of code that has the same logic but does not duplicate data, such as multiple if else statements, you can rewrite it to be table driven. Hash table different data, through the hash table to complete the logic, do not need to repeat the operation many times. For example, if you bind an event to multiple buttons, the logic is the same, with the on method, you listen for an event, and when it fires, you call an event handler. Using table drivers, you can place different parts of each listening event in a table and bind events to all buttons by traversing the table once.

The meaning of table driven programming lies in the separation of logic and data. (Similar to event delegation)

For example, if – else

Function translate(term) {if (term === '1') {return '一'} else if (term === '2') {return '一'} else if (term === '3') {return '一'} else if (term === '3') {return 'three'} else {return '?? '}} // If you want to add a new noun translation, you need to add an if-else logic, for example: Function translate(term) {if (term === '1') {return '一'} else if (term === '2') {return '一'} else if (term === '2') {return '一'} else if (term === = '2') '3') {return '3'} else if (term === '4') {return '4'} else {return '?? '}}Copy the code

Table driven programming

Function translate(term) {let terms = {'1': '1', '2': '2', '3': '3'} return terms[term]; Function translate(term) {let terms = {'1': '1', '2': '2', '3': } return terms[term]; }Copy the code

modular

Modular program design refers to the program design method that divides a large program into several small program modules according to their functions, each small program module completes a certain function, and establishes necessary connections between these modules, and completes the whole function through mutual cooperation of modules.

The basic idea of modular program design is top-down, gradual decomposition, divide and rule, that is, a larger program is divided into some small modules according to the function, each module is relatively independent, single function, clear structure, simple interface. Other advantages of modular programming are as follows:

  1. Control the complexity of programming.
  2. Improved code reuse.
  3. Easy to maintain and function expansion.
  4. Good for team development.