What is MVC?

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

M: Model (data model) is responsible for manipulating all the data. V: View is responsible for all UI interfaces. C: Controller (Controller) processes the original data (Model) to deal with user behavior and changes to the data Model.

Advantages: These three layers are closely related but independent, and changes within each layer do not affect the others. 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.

Data Model

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

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

Controller (Controller)

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

Because each part of Model View Controller (MVC) is independent of each other, when the three need to communicate, EventBus is needed to monitor and communicate among them.

EventBus commonly used API

Eventbus.on () Listening event eventbus.trigger () triggering event eventbus.off () canceling listening event

Eventbus.trigger ('m:updated')Copy the code

Table driver

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 days of the month, 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, modular

In a complete page application, different node function, different structure can plan for multiple modules, each module of the implementation of the way and different use of technology, using modular programming can reduce the influence of between the various modules and contact, can be more convenient to optimize code and refactor the code, improve the reusability of our code, easy to maintenance