MVC

The full name of MVC is Model View Controller, which is the abbreviation of Model, View and Controller. It is a design pattern that organizes code by separating business logic, data and interface display, and gathers business logic into a component. There is no need to rewrite business logic while improving and customizing interfaces and user interactions.

We can think of:

  • 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

For example:

Const M = {data: const M = {data: {}, create() {}, delete() {}, update() {}, get() {}} // V contains initialization and rendering, as well as some user-visible content const V = {HTML: ` `, init () {}, render () {}} / / C contains some event bindings, and other... const c = { init() {}, events: {}, }Copy the code

EventBus

EventBus, also known as the Observer pattern, also known as the Publish/Subscribe pattern, defines a one-to-many dependency that allows multiple observers to listen on a subject object at the same time. The topic object notifies all observer objects of state changes so that they can update themselves automatically.

Common API:

  • The binding event

eventBus.on(“eventName”,callback)

  • Triggering event

eventBus.emit(“eventName”,[…args])

  • Unbundling event

eventBus.off(“eventName”,callback)

Table driven programming

Table driven programming, simply refers to the use of table lookup method to obtain the value. Instead of the if else method, logical statements tend to be simpler and more straightforward.

The benefits of this approach are:

  1. Improved readability of the program.
  2. Reduced duplicate code.
  3. Scalability.
  4. The program has an obvious backbone.
  5. Reduced complexity.

modular

When JS appeared, JS was generally used to realize some simple interactions. Later, with the development of JS, JS was used to realize more and more complex functions. For the convenience of maintenance, we also extracted JS of different functions as a JS file, and the concept of modularity is, Separate files that implement different functions or control different areas of the code in the form of modules are all we need to introduce in the project. This increases the readability and maintainability of the code, and at the same time reduces the coupling of the code, greatly reducing the difficulty and time for technical updates or code refactoring.

Module functions are mainly composed of two commands: export and import. The export command specifies the external interface of the module, and the import command is used to input functions provided by other modules.

Such as:

Import $from 'jquery' // Import jquery into the current JS fileCopy the code
Export default init // Export the init method from the current JS fileCopy the code