All pages can be optimized for code structure using MVC

  • The M-Model (data Model) is responsible for manipulating all data
  • V-view is responsible for all IU interfaces
  • C-Controller: Negative is good for others

If the interviewer asks what MVC is, why don’t you say it in Both Chinese and English

Import CSS and jquery from main.js

The introduction of CSS

  • Import './ xyz. CSS '

The introduction of the jquery

  1. yarn init -y
  2. The input terminalyarn add jqueryornpm i jquery
  3. inmain.jsIn the inputimport $ form 'jquery'

Use code as an example to explain MVC

  1. Add, subtract, multiply and divide a number
import "./app1.css"; import $ from "jquery"; const $button1 = $("#add1"); const $button2 = $("#minus1"); const $button3 = $("#mul2"); const $button4 = $("#divide2"); const $number = $("#number"); const n = localStorage.getItem("n"); / / initialize $number. The text (n | | 100); $button1.on("click", () => { let n = parseInt($number.text()); n += 1; localStorage.setItem("n", n); $number.text(n); }); $button2.on("click", () => { let n = parseInt($number.text()); n -= 1; localStorage.setItem("n", n); $number.text(n); }); $button3.on("click", () => { let n = parseInt($number.text()); n *= 2; localStorage.setItem("n", n); $number.text(n); }); $button4.on("click", () => { let n = parseInt($number.text()); n /= 2; localStorage.setItem("n", n); $number.text(n); });Copy the code

Don’t use.show() .hide() .cssThe threeAPI

jqueryThe built-intoggleClass()If there are no classes, add them. If there are classes, delete them

You can useaddClass('active') removeClass('active')Class makes style changes

Table driven programming

  • When you see a lot of code that is similar but not duplicated
  • It’s easy to make hash tables of important data

Render (data) view = render(data

All operating system scrollbars are about 14-19px wide

Data saving function (unchanged when refreshed)localStorage

  • localStorage.getItem()
  • localStorage.setItem( , )
  • localStorageThe saved form is a string

Don’t use.show() .hide() .cssThe threeAPI

jqueryThe built-intoggleClass()If there are no classes, add them. If there are classes, delete them

if ($square.hasClass("active")) { $square.removeClass("active"); } else { $square.addClass("active"); $square. ToggleClass ("active", active);Copy the code

JS code cannot begin with parentheses []

The ones that start with brackets will always try to look up and see if they can combine