A, the MVC

MVC consists of three types of objects:

  1. The model model is used to encapsulate data related to the application’s business logic and how it is processed, and is listened to by one or more views. The model notifies the views concerned whenever the model’s data changes.
const m = { data: {store data}, create() {add data}, delete() {delete data}, update(data) {update data eventbus.trigger () trigger events}, get() {read data}}Copy the code
  1. The View, which is its on-screen representation, represents the current state of the Model. As the model’s data changes, the view gets the opportunity to refresh itself accordingly.
Const v = {el: render tag, HTML: 'page content', init(){initialize page}, render(){render page}}Copy the code
  1. Controller Controller defines how the user interface responds to user input, acts as an organization between different layers, and controls the flow of the application. It handles user behavior and changes to the data model.
Const c = {init() {v.init(container) initializes view v.ender () render for the first time c.autobIndevents () automatically bind eventBus.on(){} Listen for events}, Events: {hash table log events}, autoBindEvents() {autoBindEvents}}Copy the code

Second, the EventBus

EventBus, an EventBus that can be used for listening and communication between components.

  • Initialize the
import $ from 'jquery'
const eventBus = $(window)
Copy the code
  • api:eventBus.trigger(): Trigger event;eventBus.on(){}: Listening event;eventBus.off(){}: Release event
const m = { ... update(data) { ... Eventbus.trigger ('m:updated') // Trigger event when updating data}, const c = {... Eventbus. on('m:updated', () => {v.ender (m.data.n)})}, const eventbus. off('m:updated') // Removes the eventCopy the code

Table driver programming

Simply put, this means retrieving data by looking up tables without using logical statements. In fact, anything that can be selected by logical statements can be selected by looking up tables. There are three main ways to query data from a table: direct access, index access and ladder access.

What day is it today

const day = new Date().getDay() let day_zh; If (day = = = 0) {day_zh = 'Sunday'} else if (day = = = 1) {day_zh = 'Monday'}... Else {day_zh = 'day_zh'} // switch case switch(day) {case 0: day_zh = 'day_zh' break; Case 1: day_zh = 'Monday' break; . }Copy the code

Using table driven, put the data in a table

Const week = [' Sunday ', 'Monday ',...' Saturday '] const day = new Date().getday (const day_zh = week[day])Copy the code

Four, how to understand modularity

Modularization is to package a complex program into different modules through certain rules, which can be objects, files and so on. Reduce code coupling degree, each module has better independence. Doing so can solve the problem of global variable contamination in the project, make development more efficient, and facilitate code reuse and maintenance.