What’s the MVC

  • Each module can be written as three objects, namely M, V, and C
  • The M-Model (data Model) is responsible for manipulating all data
  • V-view is responsible for all UI interfaces
  • C-controller is responsible for the others

Initialize the

yarn init -y / / terminal
yarn add jquery / / terminal

import $ from 'jquery' / / the main js into the jquery
Copy the code

thought

  • Use hash table objects to make the difference, and then iterate over them
  • I’m going to use the delta function for the same place

An error on

Js code cannot begin with parentheses

Summary (to remember)

The concept of MVC

My understanding of MVC is to put data, UI and other interfaces in the corresponding places of MVC respectively, which is convenient for future maintenance


//m: data layer, responsible for initializing data
const m = new Model({
    data: {// Initialize the data
    n: parseInt(localStorage.getItem("n"))},update: (data) = > {
    Object.assign(m.data, data);
    eventBus.trigger("m:updated");
    localStorage.setItem("n", m.data.n); }})// View layer, which is responsible for displaying data
const v = new View({
  el:null.html: ` 
      
 
       
 
        {{n}} 
        
 
          
        
 
       
 
      
 `.render(n) {
  if (v.el.children.length === 0) {}else {
    v.el.empty();
  }
  v.el = $(v.html.replace("{{n}}", n)).appendTo(v.el); }})// Other, there are initialization View, rerender, and some other listening events
const c = {
    init(container) {
    v.init(container);
    v.render(m.data.n);
    c.addBindEvents();
    eventBus.on("m:updated".() = > {
      v.render(m.data.n);
    });
  },
  event: {
    "click #add1": "add"
  },
  add() {
    m.update({ n: m.data.n + 1}); }},Copy the code

The concept of the eventBus

The purpose of eventBus is to address communication between components at different levels

The common apis are

  • On (Listening event)
  • Off (Cancel listening)
  • This trigger triggers events.

View = render(data) concept

For example, to update the CSS style in HTML, you need to change the CSS property, view = render() means that the CSS property is not changed, but the page is re-rendered

Table driven programming concepts

Table driven programming means putting hash table objects together in different places, and then putting functions together in the same places in traversal, which is easier to do when you have more complexity or more data.

Modular programming concept

Modular programming I understand as table driven programming means about the same, only one is used in the local scope of another larger, modularity means I’ll repeat it used methods of data, or in a separate file to install, then everywhere, after using it into the file, the inside of the method is given