In this paper, copyright belongs to "public, | front ten thousand hours", welcome reproduced! Please indicate the source of reprint, without consent, can not modify the content of the article.Copy the code

🔥🔥🔥 “front-end 10,000 hours” in the two star column limited time discount, welcome to click the public account menu bar module to understand ~

❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleThe interview | HTML&CSS”,”The interview | JavaScript”

  • End face examination questions “before” and “reference answer” belong to “RMB 102.4 RMB 199 | brush the interview question” private column exclusive content, pay reading;

  • Articles listed in the list below article belong to “RMB 2020 RMB 2999 | from zero basis to easily obtain employment” private column exclusive content, in addition to the open source “conditional admission” section, other all need to pay;

▽ Pre-Web knowledge

  • The Old story of what happens behind the Scenes from URL input to page presentation [id: web_01]

❗❗️❗ service ❗ P.s. Public id dialog box Reply web_01, HTML_01 or css_01 View the reference answer sample ~

1. What happens behind the scenes from URL input to page presentation? 2. What does a complete HTTP transaction look like? 3. How do browsers render pages? 4. What are the cores of the browser? What are the representative browsers? 5. Refresh the page. Where will JS requests be cached?Copy the code
  • What nouns do we need to Understand when We first touch the front End?
  • To do a good job, you must first sharpen your tools — Software installation and Environment construction
  • Be a Samson and make the OPERATING System behave like a Sheep: A Command Line Primer
  • The first three lessons on the Road to Master Li Tao open the Door of Light and Color
  • Git and GitHub: Git and GitHub
  • Git and GitHub: Commit code + Team work


Del HTML

  • ① BASIC HTML [NO. : HTML_01]
1. What does DOCTYPE do? How to write? 2. List common labels and briefly describe the scenarios in which these labels are used. 3. Garbled characters appear on the page. Why? How to solve it? 4. What are the functions of the title and Alt attributes respectively? 5. How to write HTML comments? 6. Why HTML5 only writes <! DOCTYPE HTML >? 7. Data - What does the attribute do? 8. What is the difference between <img> title and Alt? 9. What are Web standards and W3C standards? What does DOCTYPE do? How to distinguish strict mode from promiscuous mode? What do they mean? 11. What are HTML Global attributes?Copy the code
  • “② HTML elements, attributes in detail” [Ref. : HTML_02]
1. What are the common values of meta? 2. What does meta Viewport do? 3. List common labels and briefly describe the scenarios in which these labels are used. 4. How to display the characters <div></div> on an HTML page? 5. How do you understand HTML semantics? 6. What SEO does the front end need to pay attention to? 7. What is your understanding of the importance of web standards and W3C?Copy the code
  • ③ HTML Form details [NO. : HTML_03]
1. What is the difference between POST and GET? 2. What is the function of name in input? 3. What is the function of label? How to use it? 4. How to group radio? 5. Placeholder properties? 6. Type =hidden What does the hidden field do? Give an example. 7. What is a CSRF attack? How to prevent? 8. What is a web verification code for? What kind of security problem is it to solve? 9. Common Web security and protection principles?Copy the code


Del CSS

  • CSS Basics and Selectors introduction [Id: CSS_01]
1. How many ways to load the CSS? 2. What does @import do? How to use it? 3. How many CSS selectors are common? 4. What are the usage scenarios for ID and class selectors? 5. What does @charset do? 6. Describe the difference between SRC and href. 7. What is the difference between using link and @import when importing pages?Copy the code
  • CSS Selector In Detail [Ref. : CSS_02]
1. What are the pseudo-class selectors? 2. What is the difference between pseudo-elements and pseudo-classes?Copy the code
  • CSS Structure and Cascading [ID: CSS_03]
1. How is the priority of the selector calculated? 2. What is CSS inheritance? Which attributes can and cannot be inherited?Copy the code
  • CSS Values and Units [ID: CSS_04]
1. Have you ever used graphics with retina resolution? What technology does it use? 2. What's the difference between PX, EM, REM and vw?Copy the code
  • “CSS to add styles to text: ① font properties” [id: CSS_05]
Introduction of the principle of the font icon, begin to use iconfont to achieve the font icon demo.Copy the code
  • “CSS to style text: ② Text properties”
  • CSS Basic Visual Formatting: ① Block Box Formatting [ID: CSS_07]
1. What are the block-level elements and inline elements? What are the void elements? What is the difference between a block-level element and an inline element? 2. What is the difference between the IE box model and the W3C box model? 3. In what scenarios does margin merging occur? How to merge? How do I keep margins from merging adjacent elements? Give me an example of a parent-child margin merge?Copy the code
  • CSS Basic Visual Formatting: ② “Inline Box formatting” [Id: CSS_08]
1. () 2. And the line - height: 200%; What's the difference? 2. In what scenarios does margin merging occur? How to merge? How do I keep margins from merging adjacent elements? Give an example of a parent-child margin merge. 3. Are the "border", "border" and other "box attributes" controlled by font size or line-height? Height =line-height can be used to center a single line of text vertically? How does the code work? 5. What are the features of inline-block? 6. How does inline-block work in practice? 7. How to remove the gap between the two buttons? 8. If a page has a row of product images with different heights, how can we make them "top aligned" if we use inline-block?Copy the code
  • CSS styles boxes, backgrounds, links, lists, forms, tables, etc.
1. How many ways can an element be "invisible"? What's the difference? 2. Single line text overflow plus... How to do that? 3. How to create a circular clickable area on the page?Copy the code
  • Let the Box Move: ① Float [Ref. Css_10]
1. What are the characteristics of floating elements? What is the impact on the parent container, other floating elements, normal elements, and literals? 2. What does clearing float mean? How do I clear the float? Two or more ways.Copy the code
  • Let the Box Move: ② “Positioning” and BFC [Ref. Css_11]
1. How many positioning methods are there? How to achieve positioning respectively? What are the reference points? What are the usage scenarios? 2. What does z-index do? How to use it? 3. What is BFC? How do I generate a BFC? What does the BFC do? Give an example. 4. In what scenarios does margin merging occur? How to merge? How do I keep margins from merging adjacent elements? Give me an example of a parent-child margin merge?Copy the code
  • Show the “Movable Box” more elegantly: ① The Magic Use of “False Elements” [Ref. Css_12]
1. How to use pseudo-element to clear float? 2. What methods can be used to optimize CSS3 Animation rendering?Copy the code
  • “More elegant display of” Movable box “: ②” Center “box [Ref. : CSS_13]
1. How to center block level elements horizontally? How do I center row elements horizontally? How do I center an inline-block element horizontally? 2. Vertical up and down in the middle?Copy the code
  • “Display the” Movable Box “more elegantly: ③ Common” Layout “[Ref. Css_14]
Question: How responsive layout works?Copy the code
  • Make these “presentations” more scalable — Media Query [Ref. Css_15]
1. What new features do you know about HTML5 and CSS3? 2. What's the difference between Canvas and SVG?Copy the code
  • CSS Extension: ① Browser Compatibility [id: CSS_16]
What do you mean by progressive enhancement and graceful degradation? 2. What is a CSS Hack? On which site do YOU view the browser compatibility of tags (attributes)? 3. What is the Hack of IE6 and ie7? 4. List as many examples of browser-compatible processing as possible. 5. What is CSS Reset? What is a CSS precompiler? What is a post-compiler (PostCSS)? 6. What is the difference between CSS Reset and normalize.css? 7. Write as many browser compatibility issues as you can? 8. How do I make Chrome display text less than 12px? 9. Comparison of CSS preprocessors: Less, Sass? 10. Common Compatibility Problems?Copy the code
  • CSS Extension: ② CSS Coding Specification [No. : CSS_17]
1. List the CSS coding specifications. 2. What is the role of coding specification? List more than 5 coding specifications.Copy the code
  • CSS Extension: ③ Introduction to common Emmet Syntax
  • CSS Extension: ④ Flex Layout
  • CSS Extension: ⑤ CSS3 Transition
  • “CSS Extension: ⑥ CSS3 Deformation”
  • CSS Extension: ⑦ CSS3 Animation


🚀HTML+CSS combat: PC “simple book” static homepage development (difficulty: ☆☆)

  • ① Structure + header [ref. : HTML-cSS_01]
1. What is box model? 2. What is the value of CSS property box-sizing? What are the roles of the two?Copy the code
  • “PC side” simple book static home page: ② sidebar + recommendation”
  • Static home page of “Simple Book” on PC: ③ Rotation + button group + Content area


Del JavaScript first

  • ① JS Overview — Into the WORLD of JS [Ref. Js_01]
1. A brief introduction to the development history of JavaScript. What are ES3, ES5 and ES6 respectively? 2. What are some basic rules for writing JavaScript? 3. What does "use strict" mean in JavaScript code? 4. What are the limitations of strict mode?Copy the code
  • ② Operator, Operator Priority [No. : Js_02]
1. What is NaN? What's so special about it? 2. What is the difference between == and ==? Console. log(1+"2") and console.log(1-"2")? 4. Why does console.log(0.2+0.1==0.3) output false? If (a > 10) {b = a}else {b = a-2} 6. What is the output of the following code? var a = 1; a+++a; typeof a+2; 7. What does the following code output? var d = a = 3, b = 4 console.log(d) 8. What does the following code output? var d = (a = 3, b = 4) console.log(d) 9. What is the output of the following code? Why is that? var a = 1, b = 2, c = 3; var val = typeof a + b || c >0 console.log(val) var d = 5; var data = d ==5 && console.log('bb') console.log(data) var data2 = d = 0 || console.log('haha') console.log(data2) var x = !!" Hello" + (!" world", !!" from here!!" ); Console. log(x) 10. What is the result of the following code? Why is that? var a = 1; var b = 3; console.log( a+++b ); 11. What is the output result of the following code? Why is that? console.log(1+1); console.log("2"+"4"); console.log(2+"4"); console.log(+"4");Copy the code
  • ③ Variables, Values, Data Types, Data Type Conversions [Ref. Js_03]
1. How many data types does JavaScript define? What are primitive types? What are complex types? Is NULL an object? 2. What is the difference between the object type and the original type? What happens when a function argument is an object? 3. How to determine which type "value" belongs to? Does typeOF determine the type correctly? Instanceof? What does Instanceof do? How is the internal logic implemented? 4. Null, undefined 5. What are the rules for type conversion in JS? 6. The output of the following code? Why is that? console.log(a); var a = 1; console.log(b); 7. What does the following code output? var a = typeof 3+4 console.log(a) 8. What does the following code output? var a = typeof typeof 4+4 console.log(a)Copy the code
  • ④ Process Control Statement [No. : JS_04]
1. What is the difference between break and continue? 2. switch... What does a break in a case statement do? 3. for... Of, for... What is the difference between in and forEach and map? 4. Write a code example for the following: ① If... Else; (2) the switch... The use of case; ③ While; (4) the do... While; ⑤ For traversal number group usage; 6 for... The use of in to traverse an object; ⑦ Break and continue. 5. What does the following code output? Var a = 2 if(a = 1) {console.log("a = 1")}else {console.log(" A = 1")}Copy the code


Introduction to del JavaScript

  • ① JS Function — Develop functional Thinking
Write a function that returns the sum of squares of parameters. Function sumOfSquares() {// result2 = sumOfSquares(1, 1) {// result2 = sumOfSquares(1, 2)} 3) console.log(result) // 29 console.log(result2) // 10 2. The output of the following code? Why is that? sayName("world"); sayAge(10); function sayName(name) { console.log("hello ", name); } var sayAge = function(age) { console.log(age); }; 3. The output of the following code? Why is that? var x = 10; bar() function bar() { var x = 30; function foo() { console.log(x) } foo(); } 4. The output of the following code? Why is that? var x = 10 bar() function foo() { console.log(x) } function bar() { var x = 30 foo() } 5. The output of the following code? Why is that? var a = 1 function fn1() { function fn3() { function fn2() { console.log(a) } fn2() var a = 4 } var a = 2 return fn3 } Var fn = fn1() fn() //? 6. The output of the following code? Why is that? var a = 1 function fn1() { function fn2() { console.log(a) } function fn3() { var a = 4 fn2() } var a = 2 return fn3 } Var fn = fn1() fn() //? 7. The output of the following code? Why is that? var a = 1 function fn1() { function fn3() { var a = 4 fn2() } var a = 2 return fn3 } function fn2() { console.log(a) } Var fn = fn1() fn() //? 8. The output of the following code? Why is that? var a = 1 var c = {name: "oli", age: 2} function f1(n) { ++n } function f2(obj) { ++obj.age } f1(a) f2(c) f1(c.age) console.log(a) console.log(c) 9. The output of the following code? Why is that? var obj1 = {a:1, b:2}; var obj2 = {a:1, b:2}; console.log(obj1 == obj2); console.log(obj1 = obj2); console.log(obj1 == obj2);Copy the code
  • “② JS array — Let the data row” [Ref. : Js_06]
1. Write a function squireArr, whose argument is an array, the function is to change each item in the array to the square of the original value. Var arr = [3, 4, 6] function squireArr(arr) {// squireArr(arr) console.log(arr); Write a function squireArr that takes an array and returns a new array. Each entry in the new array is the square of the value of the original array. Var arr = [3, 4, 6] function squireArr(arr) {var arr2 = squireArr(arr) console.log(arr) // 6] console.log(arr2) // [9, 16, 36] 3. Iterate over the Company object, printing the value of each item in it. Var company = {name: "qdywxs", age: 3, sex: "male"} 4. Go through the array, printing the square of each item in the array. var arr = [3, 4, 5]Copy the code
  • ③ JS objects — Understanding Objects [Id: Js_07]
1. What are the built-in objects in JS? 2. What does the following code output? Var name = "sex" var company = {name: "qdywxs", age: 3, sex: "male"} console.log(company[name]) 3. What does the following code output? Var name = "sex" var company = {name: "qdywxs", age: 3, sex: "male"} console.log(company.name)Copy the code
  • 4. Understanding DOM — Interacting with the Web
  • “⑤ JS Events — Asynchronous Coding”


Del JavaScript based

  • JS functions: ① Treating functions as “Values”
  • JS Functions: ② Nested functions, scopes, and closures [ref. Js_11]
What is a closure? What does a closure do? What are the use scenarios for closures? 2. Use recursion to complete the sum from 1 to 100? 3. How about the garbage collection mechanism and memory management? 4. What is your understanding of JS execution context stack and scope chain? 5. How much of the following code is output? If you want to print 3, how do you change the code? var fnArr = []; for(var i=0; i<10; i++) { fnArr[i] = function() { return i }; } console.log(fnArr[3]()) 6. Encapsulate a Car object. var Car = (function() { var speed = 0; // add return {setSpeed: setSpeed, getSpeed: getSpeed, speedUp: speedUp, speedDown: speedDown } })() Car.setSpeed(30) Car.getSpeed() // 30 Car.speedUp() Car.getSpeed() // 31 Car.speedDown() Car.getSpeed() / / 30 July. What is the output of the following code? How to print 0,1,2,3,4 continuously? for(var i=0; i<5; i++) { setTimeout(function() { console.log("delayer:" + i) }, 0) } 8. What is the output of the following code? function makeCounter() { var count = 0 return function() { return count++ }; } var counter = makeCounter() var counter2 = makeCounter(); Console.log (counter()) // 0 console.log(counter()) // 1 console.log(counter2()) //? The console. The log (counter2 ()) / /?Copy the code
  • JS array: ① ES3 array method [id: js_12]
1. Which API of an array changes the original array? 2. Write a function that operates on an array and returns a new array containing only positive numbers. Function filterPositive(arr) {var arr = [3, -1, 2, 0, 0, 0, 0, 0, 0 true] filterPositive(arr) console.log(filterPositive(arr)) // [3, 2] 3. Complete the code, array by name, age, arbitrary field sort. var users = [ {name: "John", age: 20, company: "Baidu"}, {name: "Pete", age: 18, company: "Alibaba"}, {name: "Ann", age: 19, company: "Tecent"} ] users.sort(byField("age")) users.sort(byField("company")) 4. Splice implements push, POP, shift, and unshift methods, respectively. Such as:  function push(arr, value) { arr.splice(arr.length, 0, value) return arr.length } var arr = [3, 4, 5] arr. Push (10) // Arr becomes [3, 4, 5, 10] and returns 4.Copy the code
  • JS array: ② ES5 array method [id: js_13]
1. For... Of, for... What is the difference between in and forEach and map? 2. Which API of an array changes the original array? 3. How to eliminate duplicate elements in an array? 4. What are the ways to check whether a variable is an array? 5. ["1", "2", "3"].map(parseInt) 6. Select the maximum value of the array (ES5, ES6). 7. Implement a Reduce function similar to the original Reduce function. Ex: var sum = reduce([1, 2, 3], function(memo, num) {return memo + num; }, 0); 8. How to flatten a multidimensional array with native JS? Var array = [1, [2], [3, [4, [5]]]] function flat (arr) {/ / completion}. The console log (flat (array)) / / [1, 2, 3, 4, 5]Copy the code
  • Object-oriented Programming: ① Object Constructors [Ref. Js_14]
1. What is the principle of new? What is the difference between creating an object as new and creating it as a literal? What does Object. Create do? 3. How to determine which data type value belongs to? Does typeOF determine the type correctly? Instanceof? What does Instanceof do? How is the internal logic implemented? 4. What methods does JavaScript have to define objects? 5. In the following code? What does new essentially do? function Modal(msg) { this.msg = msg } var modal = new Modal()Copy the code
  • Object-oriented Programming: ② Using Prototypes [Ref. Js_15]
1. What is JS prototype? How to understand prototype chains? 2. How does JS implement inheritance? Clone (Number, String, Object, Array, Boolean); 4. Extend String to obtain the most frequent character in the String: var STR = "ahbbCCdeDDddfg "; var ch = str.getMostOften(); console.log(ch); ToString = toString (); toString = toString (); Function People() {} var p = new People() p.tostring () 6. Function Person(name) {this.name = name; function Person(name) {this.name = name; } Person.prototype.sayName = function() { console.log("My name is :" + this.name); } var p = new Person("Oli") p.sayName(); 7. What is the difference between the following two ways? Function People(name, sex) {this.name = name; this.sex = sex; this.printName = function() { console.log(this.name); }} function Person(name, sex) {this.name = name; this.sex = sex; } Person.prototype.printName = function() { console.log(this.name); } var p1 = new Person("Aman", 2); Function Person(name, sex){// complete}; Person. Prototype. GetName = function() {// complete}; Function Male(name, sex, age) {// complete}; Prototype. GetAge = function() {// getAge = function(); Var catcher = new Male("Oli", "Male ", 2); catcher.getName(); 9. What is the function of call in the following code? function Person(name, sex) { this.name = name; this.sex = sex; } function Male(name, sex, age) { Person.call(this, name, sex); // What does call do here? this.age = age; }Copy the code
  • Objects provided by JS: ① “strings” as objects [Id: js_16]
1. What are the common ways to write a multiline string declaration? 2. What does the following code output? Var STR = "C:\Users\Document\node\index.js" console.log(str.length C: \ Users \ Document \ node \ index js?Copy the code
  • Regular expressions (js_17)
Write a function isValidUsername(STR) to check whether the user entered a valid username. This function contains 6 to 20 characters. 2. Write a function isPhoneNum(STR) to check whether the user enters a mobile phone number. 3. Write a function isEmail(STR) to check whether the user entered an email address. 4. Write a function trim(STR) that removes whitespace from both sides of the string. \d, \w, \s, [a-za-z0-9], \b,., *, +,? What are x{3} ^ and $respectively? 6. What are greedy and non-greedy models?Copy the code
  • ③ Date [id: js_18]
Write a function that takes a time object as a string of milliseconds and returns a string. Assuming that the parameter is the time object t milliseconds, return the following strings based on the time of t: N/A Just before (the interval between T and the current time is less than 1 minute) n/A 3 minutes ago (the interval between T and the current time is greater than or equal to 1 minute and less than 1 hour) N/A 8 hours ago (the interval between t and the current time is greater than or equal to 1 hour) Less than 24 hours) - 3 days ago (t is greater than or equal to 24 hours from the current time, < 30 days) - 2 months ago (the distance between t and the current time is greater than or equal to 30 days and less than 12 months) - 8 years ago (the distance between t and the current time is greater than or equal to 12 months) function friendlyDate(time) {// Supplement} var STR = FriendlyDate ("1556286683394") // x minutes ago var str2 = friendlyDate("1555521999999") // x days agoCopy the code
  • ④ Math [id: js_19]
Write a function that returns a random integer from min to Max, including min and not including Max. 2. Write a function that generates a random color string. The valid color is #000000 ~ # FFFFFF. Function getRandColor() {var color = getRandColor() console.log(color) // #3e2f1b 3. Write a function that generates a random string of length n, ranging from 0 to 9, a to z, and a to z. Function getRandStr(len) {var STR = getRandStr(10); // 0a3iJiRZap 4. Write a function to generate a random IP address that is valid from 0.0.0.0 to 255.255.255.255. Function getRandIP() {var IP = getRandIP() console.log(IP) // 10.234.121.45Copy the code
  • ⑤ JSON [id: js_20]
1. What rules should be followed for JSON data? 2. Implementing a simple deepCopy function using JSON objects? 3. What is the difference between XML and JSON? What does Eval do? 5. What is the difference between deep copy and shallow copy? How to do that?Copy the code
  • Objects provided by browsers: ① BOM [ID: JS_21]
1. How to encode and decode URL? Why code? 2. What are the disadvantages of iframe? 3. Complete the following functions to determine the user's browser type. Function isAndroid() {// 完 全} function isIphone() {// 完 全}Copy the code
  • Objects provided by browsers: ② DOM [ref. Js_22]
1. What is the Virtual DOM and why do we use it? 2. How to add, remove, copy, create, and find nodes? 3. OffsetWidth /offsetHeight, clientWidth/clientHeight and scrollWidth/scrollHeight 4. What is the difference between attributes and properties? 5. Write a function to operate the CSS in batches. Function CSS (node, styleObj){// complete} CSS (document.body, {"color": "red", "background-color": "# CCC "}) 6. When the mouse is placed over the li element, img-Preview displays the data-img image of the current li element. <ul class="ct"> <li data-img="1.png"> Place the mouse to view the image 1</li> <li data-img="2.png"> Place the mouse to view the image 2</li> <li data-img="3.png"> Place the mouse to view the image 3 < / li > < / ul > < div class = "img - preview" > < / div > < script > / / completion < / script >Copy the code
  • Object provided by browser: ③ Timer [Id: Js_23]
1. What are the characteristics of setTimeout, setInterval, requestAnimationFrame? 2. Implement a throttle function? 3. Why does setTimeout countdown have errors? 4. Explain briefly the concept of single thread and task queue. 5. Describe the difference between synchronous and asynchronous. 6. What are the ways of JS lazy loading? 7. The principle of function anti-shake throttling? 8. Defer and Async? 9. What is the output of the following code? Why is that? var flag = true; setTimeout(function() { flag = false; }, 0) while(flag) {} console.log(flag); 10. What is the output of the following code? Why is that? var a = 1; setTimeout(function() { a = 2; console.log(a); }, 0); var a ; console.log(a); a = 3; console.log(a);Copy the code
  • JS Events: ① Event Streams and DOM2 Event Handlers [id: Js_24]
1. What is the DOM event model? 2. Explain the event propagation mechanism of DOM2.Copy the code
  • JS Events: ② Event Objects and Event Agents [Id: Js_25]
Explain the following concepts: event propagation mechanism, preventing propagation, canceling the default event, event proxy? 2. Write a Demo to demonstrate the process of event propagation and the effect of preventing propagation? 3. What is the event delegate of JS? What is its principle?Copy the code
  • JS Event: ③ Use of Common Events [Id: Js_26]
Try: wide window. Onload and document. What is the difference between onDOMContentLoaded?Copy the code


🚀 Native JS combat: small DEMO series (difficulty: ☆)

  • Tab Switch
  • Modal Box
  • JS Animation
  • Lazy loading of pictures
  • Waterfall Flow Layout


Del ES6 + special breakthrough | learn live

  • “Building environments using Parcel”
  • ES2015
  • JS Basics: Var, let and const
  • JS array: ① What are the “traversal” methods in ES5 and ES6?
  • JS Arrays: How to convert “Array-like Objects” into arrays?
  • JS Arrays: ③ How to generate new arrays?
  • JS Array: ④ How to find an array?
  • JS functions: ① Default values of function parameters
  • JS functions: ② How to handle uncertain parameters?
  • JS functions: ③ Inverse operation of REST parameters
  • JS functions: ④ Arrow functions [Ref. : ES6_09]
1. Arrow function? 2. What are the differences between arrow functions and ordinary functions? 3. Backquotation marks? 4. Use ES6 to change the following template. Let iam = iam; let name = "Oli"; Let STR = "iam + name +" ; 5. Property shorthand, method shorthand? 6. for... Of cycle? 7. String add method?Copy the code
  • “JS functions: ⑤ Thoroughly understand the context of this” [ref. : es6_10]
1. How to change the pointer to this inside a function? 2. How to judge this? What is this of the arrow function? 3. What are the internal implementations of call, apply, and bind?Copy the code

  • JS Object: ① Object Property

  • JS object: ② Set data structure

  • JS object: ③ Map data Structure

  • JS Object: ④ Object Copy

  • Object-oriented Programming: ① How to Declare a Class?

  • “Object-oriented Programming: ②” Attribute Reading and Writing “and” Static Methods”

  • Object-oriented Programming: ③ “Inheritance” and “ES6 Modularity” [Ref. Es6_17]

1. Import and export? 2. Do you understand the class in ES6? What is the difference between classes in ES6 and classes in ES5? 3. ECMAScript6 "class" Why is there such a thing as class? 4. How does the prototype implement inheritance? How does Class implement inheritance? What is the nature of Class?Copy the code

  • “JS built-in Objects:” Strings “as Objects — String concatenation Problems”

  • JS built-in objects: regular expressions — ① Y modifier

  • JS built-in objects: regular expressions — ② U modifier

  • Deconstructing Assignment: Deconstructing Assignment of Arrays, objects, and functions [Ref. Es6_21]

1. Var, let, const 2. Use deconstruction to exchange the values of two variables? 3. Deconstruct assignment? 4. Function default parameters? 5. What is variable promotion in JavaScript? What is a temporary dead zone?Copy the code
  • Asynchronous Operations: Promise Objects [REF. Es6_22]
1. How many states does a Promise have? What are the features of Promise, and what are its advantages and disadvantages? 2. Is the Promise constructor executed synchronously or asynchronously? Then? How does Promise implement then processing? 3. What is the difference between Promise and setTimeout? 4. How to implement promise.all ()? 5. How to realize the Promise. Prototype. Finally ()? 6. all()? 7. Tell me what you know about Promise?Copy the code
  • ES2016 (Update…)
  • ES2017 (Update…)
  • ES2018 (Update…)
  • ES2019 (In update…)


▽ 🚀 native JS combat: Making wheels series

  • Implement a simple swipe left and right gesture library
  • Web Rotation: ① “Process Oriented” Writing method
  • Web Rotation: ② “Object-oriented” Writing method
  • Web Casting: ③ Add animation to Casting


Interaction between front and back ends

  • Rules and Standards for Interaction: HTTP — ① The Five-Tier Network Model and the History of the HTTP Protocol [Interaction_01]
1. How does HTTPS implement encryption? 2. What is the difference between HTTP and HTTPS? 3. How to clear the page cache every time the page is opened?Copy the code
  • Rules and Standards for Interaction: HTTP — ② HTTP Three-way Handshake, URIs, urls, and UrNs
  • Rules and Standards for Interaction: HTTP — ③ HTTP packets
  • “Servers that Respond to Requests: Building a Simple” Web Server “with Node.js”
  • “The Requesting” Client: ① Understanding the HTTP Client”
  • [Id: interaction_06] [id: interaction_06]
1. What do HTTP status codes know? 2. What is the difference between 301 and 302? 3. What is AJAX? What does it do? 4. How many HTTP request methods and differences? 5. How AJAX works?Copy the code
  • (3) The browser sends the HTTP data request asynchronously. (4) The browser sends the HTTP data request asynchronously.
1. Write down the use of AJAX for GET and POST. 2. Wrap an AJAX function?Copy the code
  • “Request” client: ④ Browser asynchronously send “HTTP data Request” — Simple News list Switch with AJAX”
  • “Requesting clients: same-origin Policy and Cross-domain” [Ref. : interaction_09]
1. What is the same origin policy? 2. What is cross-domain? How many implementations are there of enumeration across domains? 3. What is the principle of JSONP? 4. What is the difference between JSON and JSONP?Copy the code
  • ⑥ Browser Storage — Cookies and Sessions [Id: interaction_10]
1. What are Cookie, Session, localStorage respectively? 2. Cookie, sessionStorage and localStorage 3. How to implement communication between multiple tabs in the same browser? 4. How to use HTML5 offline storage? Can you explain the working principle? 5. How do browsers manage and load HTML5 offline storage resources? 6. What are the methods of session tracing in Web development? 7. Encapsulate a Storage object with localStorage to achieve the following effect: storage. set("name", "front-end 10,000 hours ") // Set the value of name to" front-end 10,000 hours ". Storage.set("age", 2, 30); Storage.set("people", ["Oli", "Aman", "Dante"], 60) storage.get ("name") // "front-end 10000 hours" storage.get ("age") /* If not more than 30 seconds, Returns 2 of numeric type; If it takes more than 30 seconds, return undefined and clear the age field in localStorage. */ storage.get ("people") // If not more than 60 seconds, return array; If more than 60 seconds, return undefined.Copy the code
  • “The Client that Initiates the Request: ⑦ A Brief analysis of browser Caching”


▽ Front-end Expansion

  • Introduction to NPM and Node.js: ① Node.js
  • NPM and Node.js: Introduction to NPM
  • Introduction to NPM and Node.js: ③ NPM in Detail
  • Introduction to NPM and Node.js: ④ Developing Weather Command Line Applications
  • Front-end Engineering: ① Introduction to “Front-end Engineering”
1. How to do modular development? 2. How does Webpack implement packaging?Copy the code
  • “Front-end Engineering: ② JS module loading scheme and” Componentization “Preliminary Discussion”
Involve face test: talk about your understanding to AMD, CMD?Copy the code


▽ 🚀 Native JS project combat: mobile music player (difficulty: ☆☆)

  • ① Project Overview and Environment Building
  • ② Static page (large structure + mobile adaptation + header)
  • ③ Static Pages (SVG + Panels)
  • SVG Sprite + buttons + Bar-area + Actions
  • “⑤ JS Effect Implementation (general structure + Mock Data)”
  • ⑥ JS effect implementation (play/pause + up/next track)
  • ⑦ JS effect implementation (sliding window switch + lyrics loading)
  • ⑧ JS effect realization (lyrics positioning + time progress bar + project online)



Learn the basic syntax of react. js

🚀React.js project: PC “Simple book” project development

Vue.js basic grammar learning

🚀 vue. js project actual combat: mobile terminal “tourism website” development