— — directory — — –

  • What is MVC?
  • Second, the EventBus
  • Table driver
  • Four, about modularity

What is MVC?

MVC(Model View Controller) is an architectural design pattern.

M: Model, or data layer (data model), is responsible for manipulating all data.

V: View, namely the view layer, is responsible for all UI interfaces, is provided to the user’s operation interface, is the shell of the program.

C: Controller, namely the control layer, is responsible for selecting “data in the data layer” according to user input instructions from the “view layer” and performing corresponding operations (binding events, etc.) to produce the final result.

The three layers are closely linked but independent of each other, and changes within each layer do not affect the other layers. Each layer provides an Interface that can be invoked by the upper layer. In this way, the software can be modular, changing the look and feel or changing the data without changing other layers, greatly facilitating maintenance and upgrades.

In fact, there is no clear definition of MVC. In my understanding, MVC is an abstract concept that structures code. Here are some examples of pseudo-code.

>>Model Data layer (data Model)

// example let Model = {data: {data source}, create: {add data}, delete: {delete data}, update(data) {object. assign(m.data, data); Eventbus. trigger("m:update"); //eventBus triggers the 'm:update' message to inform the View to refresh the interface}, get: {get data},};Copy the code

> > View layer

// Example let View={el: element to refresh, HTML: 'refresh content to display on page' init(){v.l: initialize element to refresh}, render(){refresh page}}Copy the code

> > Controller control layer

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 in a hash table}, // for example: events: { 'click #add1': 'add', 'click #minus1': 'minus', 'click #mul2': 'mul', 'click #divide2': 'div', }, add() { m.update({n: m.data.n + 1}) }, minus() { m.update({n: m.data.n - 1}) }, mul() { m.update({n: m.data.n * 2}) }, div() { m.update({n: M.data.n / 2})}, method(){data= new data m.data.n / 2}, AutoBindEvents (){for (let key in c.vents){// Iterate through the events table, Const Value = c[c.vents [key]] const spaceIndex = key.indexof (" ") const part1 = key.slice(0, SpaceIndex) // Get 'click' const part2 = key.slice(spaceIndex + 1) // get '#add1' v.eln (part1, part2, value)}}Copy the code

Second, the EventBus

>> What is EventBus?

As mentioned earlier, the THREE LAYERS of MVC are closely linked but independent of each other, and changes within each layer do not affect the other layers. When layer to layer communication is needed, EventBus is needed. EventBus is mainly used for listening and communication between components.

> > EventBus commonly used API

Eventbus.on () Listens to events

Eventbus.trigger () Triggers an event

Eventbus.on () Cancels listening events

Eventbus.trigger ('m:updated') eventBus.on(' M :updated',()=>{// Monitor event v.ender (m.data.n)})Copy the code

Table driver

As logic complexity increases, code in if/else or switch becomes bloated and unreadable. A table driver is a program that puts a bunch of if… Else, which translates into looking up key-value pairs from a hash table.

For example, if you want a function that returns the number of days per month (excluding leap years for simplicity), use if else:

function iGetMonthDays(iMonth) { let iDays; if(iMonth === 1) {iDays = 31; } else if(iMonth === 2) {iDays = 28; } else if(iMonth === 3) {iDays = 31; } else if(iMonth === 4) {iDays = 30; } else if(iMonth === 5) {iDays = 31; } else if(iMonth === 6) {iDays = 30; } else if(iMonth === 7) {iDays = 31; } else if(iMonth === 8) {iDays = 31; } else if(iMonth === 9) {iDays = 30; } else if(iMonth === 10) {iDays = 31; } else if(iMonth === 11) {iDays = 30; } else if(iMonth === 12) {iDays = 31; } return iDays; }Copy the code

With table drivers (including leap year judgment) :

const monthDays = [ [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] ] function getMonthDays(month, year) { let isLeapYear = (year % 4 === 0) && (year % 100 ! == 0 || year % 400 === 0) ? 1 : 0 return monthDays[isLeapYear][(month - 1)]; } console.log(getMonthDays(2, 2000))Copy the code

From the above code can be shown that the use of the table driver has the following advantages:

  • Reduces a lot of repetitive code
  • Improved code readability

Four, about modularity

> > modular

The modular value here is front-end modularity, which is an important prerequisite for MVC. Modularization is the extraction of relatively independent code from a large piece of code into small modules that are relatively independent from each other for future maintenance.

The syntax of ES6 introduces Import and export to achieve modularity.

export default c; Export {c}; // Another way to export. Remember to put curly bracesCopy the code

>> Least knowledge principle

Use a module with minimal knowledge, normally we need to introduce CSS and JS in HTML, now only need to introduce a module JS is enough.

>>M+V+C

Each module can be usedM+V+CThe pattern is done, even if MVC is invueIs reduced to a V.

>> Things come in threes.

Keep repetitive things simple and abstract

  • Repetitive code ==> abstracts into functions
  • The same attribute ==> is abstracted into a stereotype or class
  • The same stereotype ==> uses inheritance