MVC met

First, MVC concept

MVC is an architectural pattern that abstracts an application into three parts: model (data), view, and user interaction layer (controller).

The course of events is:

① The user interacts with the application

② The controller event handler is triggered

③ The controller requests data from the model and gives it to the view

(4) The view presents data to the user

1.M-Model,

Data model, used to store all the data objects of the application. The model doesn’t need to know the details of the view and controller, just the data and the logic that directly relates to that data

2.V-view

The view is responsible for all the UI, is presented to the user, and the user interacts with it. In JavaScript, views are mostly made up of HTML, CSS, and JavaScript templates. Views should contain no logic beyond simple conditional statements in templates.

3.C-control

The controller is the link between the model and the view. It takes events and inputs from the view, processes them, and updates the view accordingly. When the page loads, the controller adds event listeners to the view, such as button clicks or form submissions. When Honghu interacts with the application, the event trigger in the controller starts to work.

Ii. Code description

//model
const m={
    data:{initialize data}create(){} increasing.delete()To delete {},update(){} instead.get()Check} {}//view
const v={
    el:null.// Initialize HTML
    html:` code `.init(container){
        v.el=$(container)
    },
    render(n){}}//controller
const c={
    init(container){}},eventEvents: {},add(){execute},autoBindEvents(){logic}}}Copy the code

Third, EventtBus

Used for communication between modules

The basic API has on listener event, trigger trigger event, off cancel listener method

Class constructor {constructor(){this._eventbus =$(window)} on(eventName); fn){ return this._eventBus.on(eventName,fn) } trigger(eventName,data){ return this._trigger.tiggger(eventName,data) } off(eventName, Fn){return this._eventbus. off(eventName,fn)}} export default EventBus //new.js import EventBus from 'eventbus.js' const e =new EventBus()Copy the code

Table driver programming

The table-driven Approach is an Approach that allows you to find information in a Table without having to use a lot of logical statements (if or case) to find it.

1. Application in arrays

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

// Use table drivers
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

2. Applications in objects

if (key = "Key A") {handle Key A related data. }else if (key = "Key B") {handle Key B related data. }// Can be converted to
let table = {
  A: {
    data: "Data 1".action: "1"
  },
  B: {
    data: "The data 2".action: "Act 2"}}function handleTable(key) {
  return table[key]
}
console.log(handleTable('A').data)

/ / or
let table = {
  A: {
    data: "Data 1",
    action () {
      console.log('action 1')}},B: {
    data: "The data 2",
    action () {
      console.log('action 2')}}}function handleTable(key) {
  return table[key]
}
handleTable('A').action()
Copy the code

Refer to www.jianshu.com/p/7c67179ed…

Four, modular

In JS, after the implementation of a function, the function is also needed in other places, you can regard this function as a module in a certain way to write, so that you can achieve reuse can also divide and conquer; The same is true for CSS.