1. Three objects of MVC

M: Model, encapsulating data operations.

We can encapsulate the operations of adding, deleting, modifying and reviewing data.

Let the Model = {data () {source}, the create ()} {increase data, delete delete data {} (), update () {} to modify the data, the get () retrieve data {}}Copy the code

V: View, render view.

It represents the current state of the Model.

Let View={HTML: 'HTML code' init(){initialize}, render(){re-render the page}}Copy the code

C: Controller, everything else except M and V can be left to C.

Let Controller={init(){v.init() // Initialize View v.ender () // Render the page for the first time c.autobindevents () // Automatic event binding Eventbus. on('m:update',()=>{v.render()} // When enentsBus triggers 'm:update', Events :{events are stored as hash tables}, method(){m.update()}, autoBindEvents(){automatically bind events}}Copy the code

2. What is eventBus

EventBus, also known as the eventBus, can be used to monitor and communicate between components. Therefore, we can use eventBus to realize communication between M, V, and C.

EventBus has three common apis:

  • eventBus.on()Used to listen on objects.
  • eventBus.trigger()Used to trigger objects.
  • eventBus.off()Used to cancel object listening.

For example, we can use eventBus to realize that V can be automatically updated when the data of M changes.

Const eventBus = $(window) const m = {data: {... }, update(data) {eventbus. trigger('m:updated') // trigger event updates data}} const v = {render(data) {... / / update the data}} const c = {eventBus. On (' m: updated '() = > {after / / on method performs monitoring trigger v view update v.r ender (m. ata. N)})}Copy the code

3. Table driver programming

Table driven programming is to extract important data from a large number of similar but not repeated code, form hash table, and use the table to program.

4. My understanding of modular programming

A complex system is divided into several modules according to logic, and each module completes a specific sub-function. All modules are assembled into a whole in a certain way to complete the required functions of the whole system.

  • Each module does not affect each other, the structure is clear, reduce repeated code.
  • Others don’t need to understand how the code is implemented, just access the component using the exposed interface.