Read a lot of JS books and tutorials, tend to blur the focus, this article will do a sort, will be JS in the heavy and difficult to sum up.

The article is divided into two parts. The first part is the basic knowledge, the second part is the advanced knowledge.Copy the code

# Variable types and calculations

Quotes:

The difference between value types and reference types
What types can Typeof determine?
When do I use ===?
Handwritten deep copy

Variable types

Value types
Reference types

Value types

let a = 100
let b = a
a = 200
console.log(b) / / 100
Copy the code

Reference types

let a = { age: 20 }
let b = a
b.age = 21
console.log(a.age) / / 21
Copy the code

Analysis:

A variable of the value type is assigned with a copy of the value, so the two variables are independent of each other.

The variable name of the reference type points to a memory address, and the real object is stored in the memory that the memory address points to (the heap). When a variable is assigned to let b = a, b will also point to the same chunk of memory that A points to. Both variables actually point to the same object.

Common value types:

const s = 'abc' / / string
const n = 100 / / digital
const b = true / / a Boolean
const s = Symbol('s') // Symbol
Copy the code

Common reference types:

const obj = { x: 100 } / / object
const arr = ['a'.'b'.'c'] / / array
const n = null // Empty, special reference type, pointer to an empty address
function fn() {}Function, special reference type, but not used to store data, so there is no such thing as "copy, copy function"
Copy the code

The typeof operator

Identify all value types
Identify the function
Determine if it is a reference type (cannot be subdivided)

Identify all value types

let a                       typeof a // undefined
const s = 'abc'             typeof a // string
const n = 100               typeof n // number
const b = true              typeof b // boolean
const s = Symbol('s')       typeof s // symbol
Copy the code

Identify the function

typeof console.log // function
typeof function () {}// function
Copy the code

Determine if it is a reference type (cannot be subdivided)

typeof null // object
typeof ['a'.'b'] // object
typeof { x: 100 } // object
Copy the code

Deep copy

/** * deep copy */
const obj1 = {
    age: 20.name: 'xxx'.address: {
        city: 'beijing'
    },
    arr: ['a'.'b'.'c']}const obj2 = deepClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

/** * deep copy *@param {Object} Obj The object to copy */
function deepClone(obj = {}) {
    if (typeofobj ! = ='object' || obj == null) {
        // obj is null, or is not an object or array
        return obj
    }

    // Initialize the result
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // Ensure that key is not an attribute of the stereotype
        if (obj.hasOwnProperty(key)) {
            // Recursive call!!
            result[key] = deepClone(obj[key])
        }
    }

    // Return the result
    return result
}

Copy the code

Variable calculation

Type conversion:

String splicing
= =
If statements and logical operations

String splicing

const a = 100 + 10 / / 110
const b = 100 + '10' / / '10010'
const c = true + '10' // 'true10'
Copy the code

= =

100= ='100' // true
0= =' ' // true
0= =false // true
false= =' ' // true
null= =undefined // true
Copy the code

== null == nullCopy the code

const obj = { x: 100 }
if (obj.a == null) {}// Equivalent to:
// if (obj.a === null || obj.a === undefined) { }
Copy the code

If statements and logical operations

The TRULY variable:!! A === true
Services Variable:!! A === false variable

Truly variable

!!!!!1 // true!!!!! {}// true
Copy the code

Falsely variable

!!!!!0 // false!!!!!null // false!!!!!' ' // false!!!!!undefined // false!!!!!NaN // false!!!!!false // false
Copy the code

Example 1: the if statement

/ / truly variables
const a = true
if (a) {
    // ...
}
const b = 100
if (b) {
    // ...
}

/ / falsely variables
const c = ' '
if (c) {
    // ...
}

const d = null
if (d) {
    // ...
}

let e
if (e) {
    // ...
}
Copy the code

Example 2: Logical judgment

console.log(10 && 0) / / 0
console.log(' ' || 'abc') // 'abc'
console.log(!window.abc) // true
Copy the code

# Prototype and prototype chain

Quotes:

How do I determine if a variable is an array?
Write a simple jQuery with plug-ins and extensibility in mind.
How to understand the prototypical nature of class?

Knowledge:

The class and inheritance
Type Check instanceof
Prototype and prototype chain

class

constructor
attribute
methods

Example:

/ / class
class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
        // this.gender = 'male'
    }
    sayHi() {
        console.log(Name of `The ${this.name}Student id,The ${this.number}`)
        // console.log(
        // 'name' + this.name + ', student id '+ this.number
        // )
    }
    // study() {
    // }
}

// Through the class new object/instance
const xialuo = new Student('charlotte'.100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()

const madongmei = new Student('Ma Dongmei'.101)
console.log(madongmei.name)
console.log(madongmei.number)
madongmei.sayHi()
Copy the code

inheritance

extends
super
Extend or override methods

/ / parent class
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`The ${this.name} eat something`)}}/ / subclass
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(Name of `The ${this.name}Student idThe ${this.number}`)}}/ / subclass
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`The ${this.name}professorThe ${this.major}`)}}/ / instance
const xialuo = new Student('charlotte'.100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
xialuo.eat()

/ / instance
const wanglaoshi = new Teacher('Miss Wang'.'Chinese')
console.log(wanglaoshi.name)
console.log(wanglaoshi.major)
wanglaoshi.teach()
wanglaoshi.eat()
Copy the code

Type Check instanceof

xialuo instanceof Student // true
xialuo instanceof People // true
xialuo instanceof Object // true

[] instanceof Array // true
[] instanceof Object // true
{} instanceof Object // true
Copy the code

The prototype

// class is a function
typeof People // 'function'
typeof Student // 'function'

Implicit and explicit archetypes
console.log(xialuo.__proto__) // Implicit prototype
console.log(Student.prototype) // Explicit prototype
console.log(xialuo.__proto__ === Student.prototype) // true
Copy the code

Prototype relationship

Each class has an explicit prototype prototype
Each instance has an implicit prototype __proto__
The instance’s __proto__ points to the prototype corresponding to the class

Schematic diagram:

Prototype-based execution rules

Gets the attribute xialuo.name or executes the method xialuo.sayhi()
First look in its own properties and methods
If it is not found, __proto__ automatically looks for it in.

Prototype chain

console.log(Student.prototype.__proto__)
console.log(People.prototype)
console.log(People.prototype === Student.prototype.__proto__) // true
Copy the code

Schematic diagram

Examples:

How do I determine if a variable is an array?

a instanceof Array
Copy the code

Write a simple jQuery with plug-ins and extensibility in mind.

class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem= > {
            elem.addEventListener(type, fn, false)})}// Extend many DOM apis
}

/ / the plugin
jQuery.prototype.dialog = function (info) {
    alert(info)
}

// Make the wheel
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // Extend your methods
    addClass(className){}style(data){}}// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))

Copy the code

How to understand the prototypical nature of class?

Diagrams of prototypes and prototype chains
Execution rules for properties and methods

# scope and closure

Quotes:

How to value this in different application scenarios?
Handwritten bind
The application scenarios of closures in actual development are illustrated with examples
Create 10 A labels and pop up the corresponding serial number when clicked

Knowledge:

Scope and free variables
closure
this

scope

classification

Global scope
Function scope
Block-level scopes (new in ES6)

// ES6 block-level scope if (true) {let x = 100 // Block-level scope is triggered only when ES6 features such as let or const are used} console.log(x) // an error is reportedCopy the code

Free variables

A variable is not defined in the current scope, but is used
Work your way up, layer by layer, until you find it

closure

The special case of scope application has two manifestations:
If the function is passed as an argument
The function is returned as the return value

Function as argument

// The function is passed as an argument
function print(fn) {
    const a = 200
    fn()
}
const a = 100
function fn() {
    console.log(a)
}
print(fn) / / 100
Copy the code

Function as the return value

// function as return value
function create() {
    const a = 100
    return function () {
        console.log(a)
    }
}

const fn = create()
const a = 200
fn() / / 100
Copy the code

All free variable lookups are found in the function definition, in the parent scope, not in the execution place!!Copy the code

this

As a general function
Use call, apply, bind
Called as an object method
Called in the class method
Arrow function

The value of this is determined when the function is executed, not when the function is defined. This principle applies to the above five cases.Copy the code

Example 1: Ordinary functions and this in Call, apply, and bind

function fn1() {
    console.log(this)
}

fn1() // window

fn1.call({ x: 100 }) // { x :100 }

const fn2 = fn1.bind({ x: 200 })
fn2() // { x : 200 }
Copy the code

Note: For the differences between call, apply, and bind, see JavaScript for call(), apply(), and bind()

Example 2: This in the object method

const zhangsan = {
    name: 'Joe'.sayHi() {
        // This is the current object
        console.log(this)},wait() {
        setTimeout(function () {
            // this === window
            console.log(this)}}}Copy the code

Example 3: This in the arrow function

const lisi = {
    name: 'bill'.sayHi() {
        // This is the current object
        console.log(this)},wait() {
        setTimeout(() = > {
            // This is the current object
            console.log(this)}}}Copy the code

Example 4: This in class

class People {
    constructor(name) {
        this.name = name
        this.age = 20
    }
    sayHi() {
        console.log(this)}}const zhangsan = new People('Joe')
zhangsan.sayHi() / / zhangsan object
Copy the code

Examples:

1. How to value different application scenarios of this?

1. As a general function
1. Use call, apply, bind
1. Called as an object method
1. Called in the class method
1. Arrow function

2. Write bind by hand

The bind / / simulation
Function.prototype.bind1 = function () {
    // Split the parameters into arrays
    const args = Array.prototype.slice.call(arguments)

    // Get this (first item of array)
    const t = args.shift()

    // fn1.bind(...) The fn1
    const self = this

    // Return a function
    return function () {
        return self.apply(t, args)
    }
}

/* fn1.__proto__ === Function.prototype // true */

function fn1(a, b, c) {
    console.log('this'.this)
    console.log(a, b, c)
    return 'this is fn1'
}

const fn2 = fn1.bind1({ x: 100 }, 10.20.30)
const res = fn2()
console.log(res)
Copy the code

3. The application scenarios of closures in actual development are illustrated with examples

Hidden data
Such as a simple cache tool

// Closures hide data and only provide apis
function createCache() {
    const data = {} // The data in the closure is hidden from outside access
    return {
        set: function (key, val) {
            data[key] = val
        },
        get: function (key) {
            return data[key]
        }
    }
}

const c = createCache()
c.set('a'.100)
console.log(c.get('a'))
Copy the code

4. Create 10 tabs and pop up the corresponding serial number when you click

Error example: ❎

// Create 10 "A" tags. Click on them to pop up the corresponding serial number
let i, a
for (i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click'.function (e) {
        e.preventDefault()
        alert(i) // I is global scope
    })
    document.body.appendChild(a)
}
Copy the code

Correct example: ✅

// Create 10 "A" tags. Click on them to pop up the corresponding serial number
let a
for (let i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click'.function (e) {
        e.preventDefault()
        alert(i) // I is the block-level scope
    })
    document.body.appendChild(a)
}
Copy the code

Note: If you change let I = 0 for the for loop to var I = 10 in the correct example above, the result is the same as in the incorrect example because var defines a global variable.

# asynchronous

Quotes:

What is the difference between synchronous and asynchronous?
Handwriting loads an image with a promise
What are the scenarios where asynchrony is used at the front end?
Read the following code:

console.log(1)
setTimeout(function () {
    console.log(2)},1000)
console.log(3)
setTimeout(function () {
    console.log(4)},0)
console.log(5)
Copy the code

Question: What was the order in which the numbers were printed in the previous code? This is explained at the end of this section.

Knowledge:

Single threaded and asynchronous
Application scenarios
The callback hell and Promise

Single threaded and asynchronous

JS is a single-threaded language that can only do one thing at a time
Browsers and NodeJS already support JS to start processes, such as Web workers
JS and DOM rendering share the same thread because JS can modify the DOM structure
Do not get stuck when waiting (network request, scheduled task)
Need the asynchronous
Callback function form

Asynchrony and synchronization

// Async 100 300 200
console.log(100)
setTimeout(function () {
    console.log(200)},1000)
console.log(300)

// Synchronize 100 200 300
console.log(100)
alert(200)
console.log(300)
Copy the code

Js is a single-threaded language. Asynchrony does not block code execution. Synchronization blocks code execution.Copy the code

Application scenarios

Web requests, such as Ajax, image loading
A scheduled task, such as setTimeout

Ajax:


// start end data1
console.log('start')
$.get('./data1.json'.function (data1) {
    console.log(data1)
})
console.log('end')
Copy the code

Image loading:

// start end loaded
console.log('start')
let img = document.createElement('img')
img.onload = function () {
    console.log('loaded')
}
img.src = '/xxx.jpg'
console.log('end')
Copy the code

Timer:

/ / 100 300 200
console.log(100)
setTimeout(function () {
    console.log(200)},1000)
console.log(300)

/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /

// 100 300 200 200 200...
console.log(100)
setInterval(function () {
    console.log(200)},1000)
console.log(300)
Copy the code

Callback hell

$.get(url1, (data1) = > {
    console.log(data1)

    $.get(url2, (data2) = > {
        console.log(data2)

        $.get(url3, (data3) = > {
            console.log(data3)
        })
    })
})
Copy the code

Promise

Promise is primarily used to address the problem of too many nested callbacks.

function getData(url) {
    return new Promise((resolve, reject) = > {
        $.ajax({
            url,
            success(data) {
                resolve(data)
            },
            error(err) {
                reject(err)
            }
        })
    })
}

const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3.json'

getData(url1).then(data1= > {
    console.log(data1)
    return getData(url2)
}).then(data2= > {
    console.log(data2)
    return getData(url3)
}).then(data3= > {
    console.log(data3)
}).catch(err= > console.error(err))
Copy the code

Examples:

1. What is the difference between synchronous and asynchronous?

Asynchrony does not block code execution, synchronization does.

2. Load an image by hand with a promise

function loadImg(src) {
    const p = new Promise((resolve, reject) = > {
        const img = document.createElement('img')
        img.onload = () = > {
            resolve(img)
        }
        img.onerror = () = > {
            const err = new Error('Image load failed${src}`)
            reject(err)
        }
        img.src = src
    })
    return p
}

const url1 = '1.jpg'
const url2 = '2.jpg'

loadImg(url1).then(img1= > {
    console.log(img1.width)
    return img1 // then returns a normal object and executes the next THEN immediately
}).then(img1= > {
    console.log(img1.height)
    return loadImg(url2) // then returns a new promise instance
                         // The next THEN is executed after the new promise state changes
}).then(img2= > {
    console.log(img2.width)
    return img2
}).then(img2= > {
    console.log(img2.height)
}).catch(ex= > console.error(ex))

Copy the code

Note: If a new promise is returned in then, the next level of THEN will be executed after the new promise state changes. If any other value is returned, the next level then is executed immediatelyCopy the code

3. What are the front-end asynchronous scenarios?

Web requests, such as Ajax, image loading
A scheduled task, such as setTimeout

4. Read the next piece of code

console.log(1)
setTimeout(function () {
    console.log(2)},1000)
console.log(3)
setTimeout(function () {
    console.log(4)},0)
console.log(5)
Copy the code

Q: What was the order in which the numbers were printed in the previous code?

A: 1, 3, 5, 4, 2

#DOM

Quotes:

What kind of data structure is DOM?
Common apis for DOM manipulation
Attr and property
Insert multiple DOM nodes at once for performance reasons

Knowledge:

Nature of the DOM
DOM node operation
DOM structure manipulation
DOM performance

Nature of the DOM

The DOM is essentially a tree, parsed from an HTML file.

DOM node operation

Get DOM node
poperty
attribute

Get DOM node

const div1 = document.getElementById('div1')
console.log('div1', div1)

const divList = document.getElementsByTagName('div') / / collection
console.log('divList.length', divList.length)
console.log('divList[1]', divList[1])

const containerList = document.getElementsByClassName('container') / / collection
console.log('containerList.length', containerList.length)
console.log('containerList[1]', containerList[1])

const pList = document.querySelectorAll('p')
console.log('pList', pList)

const pList = document.querySelectorAll('p')
const p1 = pList[0]
Copy the code

poperty

/ / property form
p1.style.width = '100px'
console.log(p1.style.width)
p1.className = 'red'
console.log(p1.className)
console.log(p1.nodeName)
console.log(p1.nodeType) / / 1
Copy the code

attribute

// attribute
p1.setAttribute('data-name'.'imooc')
console.log(p1.getAttribute('data-name'))
p1.setAttribute('style'.'font-size: 50px; ')
console.log(p1.getAttribute('style'))
Copy the code

Property and attribute: Property modifies the attributes of an object, but is not reflected in the HTML structure. Attribute modifies HTML attributes and changes the HTML structure. Both have the potential to cause DOM re-rendering.Copy the code

DOM structure manipulation

A node is added or inserted
Gets the parent element, gets the list of child elements
Deleting child elements

A node is added or inserted

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

// Create a node
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// Insert the node
div1.appendChild(newP)

// Move the node
const p1 = document.getElementById('p1')
div2.appendChild(p1)
Copy the code

Gets the parent element, gets the list of child elements

// Get the parent element
console.log(p1.parentNode)

// Get the list of child elements
const div1ChildNodes = div1.childNodes
console.log(div1.childNodes)
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child= > {
    if (child.nodeType === 1) {
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)
Copy the code

Note: the childNodes property of a node node returns all direct childNodes, including the '#text' node.Copy the code

Deleting child elements

div1.removeChild(div1ChildNodesP[0])
Copy the code

DOM performance

DOM manipulation is expensive, so avoid frequent DOM manipulation
Cache DOM queries
Change the frequent operation to a one-time operation

DOM manipulation is expensive, so avoid frequent DOM manipulation

// DOM query results are not cached
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
    // For each loop, length is computed and DOM queries are performed frequently
}
Copy the code

Cache DOM queries

const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length; i++) {
    // Cache length, only one DOM query
}
Copy the code

Change the frequent operation to a one-time operation

const list = document.getElementById('list')

// Create a document fragment that is not yet inserted into the DOM structure
const frag = document.createDocumentFragment()

for (let i = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // Insert the document fragment first
    frag.appendChild(li)
}

// Insert into the DOM structure
list.appendChild(frag)

console.log(list)
Copy the code

Examples:

1. What data structure is DOM?

A: Tree (DOM tree)

2. Common APIS for DOM manipulation

A: DOM node operations, DOM structure operations, attributes and properties

3. Attr and property

A: Property modifies the attributes of the object, but is not reflected in the HTML structure; Attribute modifies HTML attributes and changes the HTML structure. Both have the potential to cause DOM re-rendering.

4. Insert multiple DOM nodes at a time to consider performance

const list = document.getElementById('list')

// Create a document fragment that is not yet inserted into the DOM structure
const frag = document.createDocumentFragment()

for (let i = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // Insert the document fragment first
    frag.appendChild(li)
}

// Insert into the DOM structure
list.appendChild(frag)
Copy the code

#BOM

Quotes:

How do I identify the browser type?
Analyze and disassemble parts of the URL

Knowledge:

navigator
screen
location
history

The navigator and screen

// navigator
const ua = navigator.userAgent
const isChrome = ua.indexOf('Chrome')
console.log(isChrome)

// screen
console.log(screen.width)
console.log(screen.height)
Copy the code

The location and history

// location
console.log(location.href)
console.log(location.protocol)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)

// history
history.back()
history.forward()
Copy the code

See above.

# events

Quotes:

Write a generic event listener function
Describes the flow of event bubbling
Infinite drop-down list of pictures, how to listen to each click of the picture?

Knowledge:

event
The event bubbling
The event agent

event

const btn = document.getElementById('btn1')
btn.addEventListener('click'.event= > {
    console.log('clicked')})// A generic binding function
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

const a = document.getElementById('link1')
bindEvent(a, 'click'.e= > {
    e.preventDefault() // Prevent default behavior
    alert('clicked')})Copy the code

The event bubbling

<body>
    <div id="div1">
        <p id="p1">The activation</p>
        <p id="p2">cancel</p>
        <p id="p3">cancel</p>
        <p id="p4">cancel</p>
    </div>
    <div id="div2">
        <p id="p5">The activation</p>
        <p id="p6">cancel</p>
    </div>
</body>
Copy the code

const p1 = document.getElementById('p1')
const body = document.body
bindEvent(p1, 'click'.e= > {
    e.stopPropagation() // Comment out this line to experience the bubbling of events
    alert('activate')
})

bindEvent(body, 'click'.e= > {
    alert('cancel')})Copy the code

The event agent

The code is simple
Reduce browser memory usage
But don’t abuse it

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>Click to add an A TAB</button>
Copy the code

const div1 = document.getElementById('div1')
div1.addEventListener('click'.e= > {
    const target = e.target
    if (e.nodeName === 'A') {
        alert(target.innerHTML)
    }
})
Copy the code

Generic event binding

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event= > {
        const target = event.target
        if (selector) {
            // Proxy binding
            if (target.matches(selector)) {
                fn.call(target, event)
            }
        } else {
            // Plain binding
            fn.call(target, event)
        }
    })
}

// Plain binding
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click'.function (event) {
    // console.log(event.target) // Gets the triggered element
    event.preventDefault() // Prevent default behavior
    alert(this.innerHTML)
})

// Proxy binding
const div3 = document.getElementById('div3')
bindEvent(div3, 'click'.'a'.function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})
Copy the code

Examples:

1. Write a generic event listener

See general Event Binding above

2. Describe the event bubbling process

Based on DOM tree structure
Events bubble up the trigger element
Application scenario: Proxy

3. Infinite drop-down list of pictures, how to monitor the click of each picture?

The event agent
Get the trigger element with e.target
Matches is used to determine whether it is a trigger

#Ajax

Quotes:

Write a simple Ajax by hand
Common implementations across domains

Knowledge:

XMLHttpRequest
Status code
Cross-domain: Same-origin policy, cross-domain solution

XMLHttpRequest

// GET
const xhr = new XMLHttpRequest()
xhr.open('GET'.'/api'.true) // true: asynchronous
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
// POST
const xhr = new XMLHttpRequest()
xhr.open('POST'.'/login'.true) // true: asynchronous
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            alert(xhr.responseText)
        }
    }
}

const postData = {
    username: 'zhangsan'.password: '123'
}
xhr.send(JSON.stringify(postData))
Copy the code

Status code

xhr.readystatechange

0 – (uninitialized) The send method has not been called
1 – (load) The send() method has been called and the request is being sent
2 – (load done) The send() method is complete and all responses have been received
3 – (Interaction) Parsing the response content
4 – (Done) The response content is parsed and can be called on the client side

xhr.status

2xx – Indicates that the request was successfully processed, such as 200
3xx – Redirection is required, for example, 301 302 304
4xx – Client request error, such as 404 403
5xx – Server side error

Cross-domain: Same-origin policy, cross-domain solution

What is Cross-domain (Same Origin Policy)
JSONP
CORS (Server support)

The same-origin policy

When making an Ajax request, the browser requires that the current web page and the server must be of the same origin (security)
Cognate: the protocol, domain name, and port must be the same.
As the front:http://a.com:8080; Server:https://b.com/api/xxx

Loading images, CSS JS can ignore the same origin policy

<img rc= cross-domain image address />
<link href= cross-domain CSS address />
<script SRC = cross-domain js address ></script>
<img />Can be used for statistics, can use third party statistics services
<link /> <script>CDN can be used, CDNn is generally an outfield
<script>It can realize the json

Cross domain

All cross-domains must be allowed and coordinated by the server
Without the permission of the server to achieve cross-domain, indicating that the browser has vulnerabilities, danger signals

JSONP

Visit Baidu.com, does the server must return an HTML file?
The server can dynamically concatenate data as long as it conforms to HTML format requirements
In the same way<script src="http://baidu.com/getData.js">
<script>Cross-domain restrictions can be bypassed
The server can dynamically concatenate data back at will
so<script>You can get cross-domain data if the server is willing to return it

<script>
window.callback = function(data){
    this.console.log(data)
}
</script>
<script src="http://www.baidu.com/getData.js"></script>
<! Callback ({x:100, y:200})-->
Copy the code

JQuery implementation json

$.ajax({
    url: 'http://baicu.com/x-origin.json'.dataType: 'jsonp'
    jsonpCallback: 'callback'.success: function (data) {
        console.log(data)
    }
})
Copy the code

CORS – The server sets HTTP headers

// The second parameter is allowed to cross the domain name, say it is not recommended to directly write '*'
response.setHeader('Access-Control-Allow-Origin'.'http://baidu.com');
response.setHeader('Access-Control-Allow-Headers'.'X-Requested-With');
response.setHeader('Access-Control-Allow-Methods'.'PUT,POST,GET,DELETE,OPTIONS');

// Receives cross-domain cookies
response.setHeader('Access-Control-Allow-Credentials'.'true');
Copy the code

Examples:

Write a simple Ajax by hand

// Regular form
function ajax(url, successFn) {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true) // true: asynchronous
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                successFn(xhr.responseText)
            }
        }
    }
    xhr.send(null)}/ / Promise
function ajax(url) {
    const p = new Promise((resolve, reject) = > {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(
                        JSON.parse(xhr.responseText)
                    )
                } else if (xhr.status === 404 || xhr.status === 500) {
                    reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)})return p
}

const url = '/data/test.json'
ajax(url)
.then(res= > console.log(res))
.catch(err= > console.error(err))
Copy the code

2. Common implementations across domains

JSONP
CORS

# storage

Quotes:

Describes the differences between cookie, localStorage, and sessionStorage

knowledge

cookie
LocalStorage and sessionStorage

cookie

It is used for browser and server communication
Is “borrowed” to local storage
availabledocument.cookie= '... 'To modify the

The disadvantage of the Cookie

The maximum storage size is 4KB
HTTP requests must be sent to the server to increase the amount of requested data
Can only usedocument.cookie='... 'To revise it. It’s too crude

LocalStorage and sessionStorage

HTML5 is specifically designed for storage and can hold up to 5M
Easy to use API, setItem, getItem
Will not be sent out with the HTTP request.
LocalStorage data is permanently stored unless deleted by code or manually
SessionStorage data only exists in the current session and is cleared when the browser is closed
Generally use localStorage will be more

Examples:

Describes the differences between cookie, localStorage, and sessionStorage

capacity
API for ease of use
Whether to send an HTTP request

# Development environment

Knowledge:

git
A debugging tool
caught
webpack
babel
Common Linux Commands

git

The most commonly used code versioning tool
Large projects require collaboration with many people, and you must take Git
Git comes with the Mac OS. For Windows, you can download and install git from the official website
Git server common github coding.net, etc
Large companies will build their own Intranet Git services

Git git

git add .
git checkout xxx
git commit -m "xxx"
git push origin master
git pull origin master
git diff/git diff filename
git log
git show commit_id
git branch
git checkout -b xxx/git checkout xxx
git fetch
git merge xxx
git stash
git stash pop
Copy the code

List of common Git commands

Chrome Debugger

elements
console
debugger
network
application

caught

Mobile terminal H5 page, view network requests, need to use the package tool
Windows is usually used with Fiddler
Mac OS uses Charles
Cell phones and computers together with a LAN
Proxy the phone to the computer
You can browse the web to find the bag
Viewing network Requests
Site agent
https

Charles Mobile phone agent Settings

Webpack and Babel

The volume is too large, omitted here.

Linux command

The company’s online machines are usually Linux (see Aliyun)
The test machine also needs to be consistent with Linux
There is a problem with the test machine or the on-line machine, and the local machine cannot reproduce, so it needs to be checked

# Runtime environment

The runtime environment is the browser (with nodeJS on the server)
Download the web code and render the page, executing several jS
Make sure your code is stable and efficient in the browser

knowledge

Page loading process
Performance optimization
security

Page loading process

Quotes:

The entire process from entering the URL to rendering the page
Window.onload differs from DOMContentLoaded

The form of the loaded resource

The HTML code
Media files, such as pictures and videos
Javascript css

The process of loading resources

DNS resolution: Domain name -> IP address
The browser sends an HTTP request to the server based on the IP address
The server processes the HTTP request and returns it to the browser

The process of rendering a page

Generate a DOM Tree from HTML code
Generate CSSOM from CSS code
Combine DOM Tree and CSSOM to form Render Tree
Render the page according to the Render Tree
encounter<script>Pause rendering, load and execute js code first, and continue when finished

Window. The onload and DOMContentLoaded

window.addEventListener('load'.function () {
    // The page will not be executed until all resources are loaded, including images and videos
})

document.addEventListener('DOMContentLoaded'.function () {
    // When the DOM is rendered, the image and video may not have finished loading
})
Copy the code

Examples:

1. The entire process from entering the URL to rendering the page

Downloading resources: Each resource type, downloading process
Render pages: combine HTML, CSS, JavaScript, images, etc

2. Window. onload vs. DOMContentLoaded

Window. onload: the page is executed only after all resources, including images and videos, have been loaded
DOMContentLoaded: When the DOM is rendered, the image and video may not be loaded

Performance optimization

Is a comprehensive problem, there is no standard answer, as far as possible comprehensive requirements
Some details may be asked separately: handwriting anti-shake, throttling

Performance optimization principles

Use memory caching or other methods
Reduces CPU computation and network loading time
Performance optimization for all programming: space for time

Where to start

Make it load faster
- Reduce resource volume: compress code
- Reduce the number of requests: merge code, SSR server-side rendering, caching
- Use a faster network: CDN
Make rendering faster
- CSS goes in the head and JS goes at the bottom of the body
- Start executing JS as early as possible with DOMContentLoaded trigger
- Lazy loading (image lazy loading, slide up to load more)
- Cache DOM queries
- Frequent DOM operations, merged together to insert DOM structures
- Throttle and throttle

Stabilization debounce

Raises the change event after listening for text changes in an input box
Using the keyup event directly triggers the change event frequently
Anti – shake: The change event is triggered only when the user enters the end or pause

const input1 = document.getElementById('input1')

// let timer = null
// input1.addEventListener('keyup', function () {
// if (timer) {
// clearTimeout(timer)
/ /}
// timer = setTimeout(() => {
// // Simulates the change event
// console.log(input1.value)

// // Empty timer
// timer = null
/ /}, 500)
// })

// encapsulate the "anti-shake" function
function debounce(fn, delay = 500) {
    // Timer is in the closure
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() = > {
            fn.apply(this.arguments)
            timer = null
        }, delay)
    }
}

input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))

Copy the code

Throttling throttle

When you drag an element, always reach the location where the element is being dragged
If you use drag events, they will be triggered frequently and will easily stall
Throttling: This is triggered every 100 milliseconds, no matter how fast you drag it

const div1 = document.getElementById('div1')

// let timer = null
// div1.addEventListener('drag', function (e) {
// if (timer) {
// return
/ /}
// timer = setTimeout(() => {
// console.log(e.offsetX, e.offsetY)

// timer = null
/ /}, 100)
// })

/ / throttling
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() = > {
            fn.apply(this.arguments)
            timer = null
        }, delay)
    }
}

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))

div1.addEventListener('drag'.function(event) {})Copy the code

security

Q: What are the common attacks on the Web front-end?

XSS cross-site request attack
XSRF cross-site request forgery

XSS cross-site request attack

For example, post on a blog site with an embedded script. The script content is to get the cookie and send it to my server (server with cross domain). If someone sees my post, I can easily harvest their cookies.

XSS prevention: Replaces special characters such as < to < > < span style = “box-sizing: border-box! Important;

Open source library XSS

XSRF cross-site request forgery

Imagine a scenario: you are shopping, you see an item, the ID of the item is 100, the payment interface is xxx.com/pay?id=100, but there is any verification. I am the attacker. I have my eye on a product with ID 200. I sent you an email with a very attractive title, but hidden in the body of the email is . As soon as you checked the email, you helped me buy the product with ID 200.

XSRF prevention: Use the POST interface. Add authentication, such as password, SMS verification code, and fingerprint.

References:

Beginner JavaScript Interview

JavaScript prototype inheritance

Prototype inheritance

The design idea of Javascript inheritance mechanism

promise

List of common Git commands

Charles Mobile phone agent Settings

The core of JavaScript

# Variable types and calculations

Variable types

The typeof operator

Variable calculation

# Prototype and prototype chain

class

inheritance

Type Check instanceof

The prototype

Prototype chain

# scope and closure

scope

Free variables

closure

this

# asynchronous

Single threaded and asynchronous

Application scenarios

Callback hell

Promise

#DOM

Nature of the DOM

DOM node operation

DOM structure manipulation

DOM performance

#BOM

The navigator and screen

The location and history

# events

event

The event bubbling

The event agent

Generic event binding

#Ajax

XMLHttpRequest

Status code

Cross-domain: Same-origin policy, cross-domain solution

# storage

cookie

LocalStorage and sessionStorage

# Development environment

git

Chrome Debugger

caught

Webpack and Babel

Linux command

# Runtime environment

Page loading process

Performance optimization

security

Related Posts

From messy old projects to modular maintainable

Programmers treasure Chrome plugin, spitting blood recommended!

Echart official document analysis