VSCode installation, ECMAScript 6 syntax

First install the Chinese plug-in: Chinese (Simplified) Language Pack for Visual Studio Code
In the lower right corner, pop up whether to restart vs. click "yes"
If the interface does not change after restart, click Manage - > command palette [Ctrl+Shift+p]
Enter "configure display language" in the search box and enter
open locale.json File, modify the attribute "locale" under the file: "zh CN"

{
    // Defines the display language for VS Code.
    // See https://go.microsoft.com/fwlink/?LinkId=761051 , for a list of supported languages.
<span class="token string">"locale"</span><span class="token punctuation">:</span><span class="token string">"zh-cn"</span> <span class="token comment">// Changes will take effect after VS Code is restarted. </span>


}


1
2
3
4
5
6


Restart vs


 2. Plug in installation


 3. Create project
vscode itself does not have the option to create a new project, so create an empty folder first, such as project_xxxx. 
Then open vscode, and select File - > open folder in vscode to open the folder, so that you can create a project.

 4. Save workspace
After opening the folder, select File - > Save workspace as , name the workspace file and store it in the folder just now

 5. New folders and pages

 6. Preview web page
Open web page preview as file path
The "open in browser" plug-in needs to be installed:
Right click the file - > open in default browser
Open web page preview as server
The Live Server plug-in needs to be installed:
Right click file - > open with live server

 7. Set font size
Left column manage - > Settings - > search "font" - > font size

 8. Enable full Emmet syntax support
Search Emmet in settings: enable the following options and restart vs if necessary


 Introduction to ECMAScript 6
Self study reference: http://es6.ruanyifeng.com/
ECMAScript 6.0 (hereinafter referred to as ES6) is the next generation standard of JavaScript language, which has been officially released in June 2015. Its goal is to make JavaScript language can be used to write complex large-scale applications and become an enterprise development language.

 1. Relationship between ECMAScript and JavaScript
A common question is, what is the relationship between ECMAScript and JavaScript?
To make this clear, we need to look back on history. In November 1996, Netscape, the creator of JavaScript, decided to submit JavaScript to ECMA, the standardization organization, in the hope that the language would become an international standard. The next year, ECMA released the first edition of standard document 262 (ECMA-262), which stipulated the standard of browser scripting language and called it ECMAScript. This edition is version 1.0.
Therefore, the relationship between ECMAScript and JavaScript is that the former is the specification of the latter, and the latter is an implementation of the former (other ECMAScript dialects include Jscript and ActionScript)

 2. Relationship between ES6 and ECMAScript 2015
The word ECMAScript 2015 (ES2015 for short) is also often seen. What is its relationship with ES6?
In 2011, when ECMAScript version 5.1 was released, version 6.0 was developed. Therefore, the original meaning of ES6 is the next version of JavaScript language.
The first version of ES6, released in June 2015, is officially known as ECMAScript 2015 standard (ES2015 for short).
In June 2016, the slightly revised ECMAScript 2016 standard (ES2016 for short) was released as scheduled. This version can be regarded as ES6.1, because the difference between the two is very small, basically the same standard. According to the plan, the ES2017 standard will be released in June 2017.
Therefore, ES6 is not only a historical term, but also a general term, meaning the next generation standard of JavaScript after version 5.1, covering ES2015, ES2016, ES2017, etc., while ES2015 is the official name, especially the official version of the language standard released in that year. Where ES6 is mentioned in this book, it generally refers to ES2015 standard, but sometimes it also refers to "next generation JavaScript language".

 Basic grammar
The ES standard does not contain the definition of DOM and BOM, but only covers the basic data type, keyword, statement, operator, built-in object, built-in function and other general syntax.
This part only studies the minimum necessary knowledge of ES6 in the front-end development, which is convenient for the understanding of the code in the later project development.

 1. let declaration variable

// var declared variable has no local scope
// let declared variables have local scope
{
var a = 0
let b = 1
}
console.log(a)  // 0
console.log(b)  // ReferenceError: b is not defined

// var can be declared multiple times
// let can only be declared once
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m)  // 2
console.log(n)  // Identifier 'n' has already been declared

// var will increase variables
// let does not have variable promotion
console.log(x)  //undefined
var x = "apple"


console.log(y)  //ReferenceError: y is not defined
let y = "banana"


1
2
3
4
5
6
7


 2. const declaration constant (read-only variable)

// 1. Change not allowed after declaration    
const PI = "3.1415926"
PI = 3  // TypeError: Assignment to constant variable.

// 2. Once the declaration must be initialized, otherwise an error will be reported
const MY_AGE  // SyntaxError: Missing initializer in const declaration

3. Deconstruction assignment

Deconstructing assignment is an extension of assignment operator.

It is a pattern matching for an array or object, and then assigning values to the variables in it.

In code writing, it is concise and easy to read, and its semantics is clearer; it also facilitates the acquisition of data fields in complex objects.

//1. Array deconstruction
// tradition
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)

//2. Object deconstruction
let user = {name: 'Helen', age: 18}
// tradition
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } =  user//Note: the variable of the structure must be an attribute in user
console.log(name, age)

4. Template string

The template string is equivalent to the enhanced version of the string. In addition to being a normal string, it can also be used to define multi line strings, and to add variables and expressions to the string.

// 1. Multiline string
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?

// 2. String inserts variables and expressions. Variable names are written in ${}, and JavaScript expressions can be put in ${}.
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.

// 3. Calling function in string
function f(){
    return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);  // Game start,have fun!

5. Declaration object shorthand

const age = 12
const name = "Amy"


//Tradition
const person1 = {age: age, name: name}

console.log(person1)
// ES6
const person2 = {age, name}

console.log(person2) //{age: 12, name: "Amy"}


1
2
3
4
5
6
7
8
9
10


 6. Shorthand of definition method
// tradition
const person1 = {
    sayHi:function(){
        console.log("Hi")
    }
}
person1.sayHi();//"Hi"

// ES6
const person2 = {
sayHi(){

console.log("Hi")
}
}

person2.sayHi()  //"Hi"


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


 7. Object extension operator
Extension operator (...) It is used to take out all traversable properties of the parameter object and copy them to the current object.

// 1. Copy object
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}

// 2. Merge objects
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)  //{age: 15, name: "Amy"}

8. Default parameters for functions

function showInfo(name, age = 17) {
    console.log(name + "," + age)
}


//The default parameter is used only if the parameter is not passed, or if it is undefined
//A null value is considered a valid value delivery.
showInfo("Amy", 18)  // Amy,18
showInfo("Amy", "")  // Amy,
showInfo("Amy", null)  // Amy, null
showInfo("Amy")     // Amy,17
showInfo("Amy", undefined) // Amy,17


1
2
3
4
5
6
7
8
9
10
11


 9. Indefinite parameter
Indefinite parameters are used to express the number of indefinite parameters, such as Variable name, by Plus a named parameter identifier. A named parameter can only be placed at the end of the parameter list, and there is only one indefinite parameter.
function f(...values) {
    console.log(values.length)
}
f(1, 2)      //2
f(1, 2, 3, 4)  //4


1
2
3
4
5


 10. Arrow function
Arrow function provides a more concise way to write functions. The basic syntax is:
Parameter = > function body

1
// tradition
var f1 = function(a){
    return a
}
console.log(f1(1))

// ES6
var f2 = a => a

console.log(f2(1))


1
2
3
4
5
6
7
8
9
10

// When an arrow function has no parameters or multiple parameters, enclose them with ().
// When the arrow function body has multiple lines of statements, wrap them with {} to represent code blocks,
// When there is only one line statement and you need to return the result, you can omit {} and the result will be returned automatically.
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8

//The preceding code is equivalent to:
var f4 = (a,b) => a+b


1
2
3
4
5
6
7
8
9
10
11


 10. Object optimization
Object.values() gets an array of property values of an object whose elements are enumerable property values found on the object. The order of properties is the same as that given by manually cycling the property values of an object
var obj = { k1: 'v1', k2: 2 };
console.log(Object.values(obj)); // ['v1', 42]

//Class array object
var obj = { 0: 'a', 1: 'b', 2: 'c' };

console.log(Object.values(obj)); // ['a', 'b', 'c']


1
2
3
4
5
6

Object.keys() gets the array composed of the attribute names (keys) of the objects, and returns the array whose elements d are strings. The elements come from the attributes that can be directly enumerated from the given objects. The order of these properties is the same as when traversing the object properties manually
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

//Class array object
var obj = { 0: 'a', 1: 'b', 2: 'c' };

console.log(Object.keys(obj)); // console: ['0', '1', '2']


1
2
3
4
5
6

Object.entries() gets an array of attribute names and values of an object. Its elements are arrays corresponding to enumerable attribute key value pairs found directly on the object. The order of the attributes is the same as that given by manually cycling the attribute values of an object.
const obj = {  k1: 'v1', k2: 2  };
console.log(Object.entries(obj)); // [ ['k1', 'v1'], ['k2', 2] ]

//Class array object
const obj = { 0: 'a', 1: 'b', 2: 'c' };

console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]


1
2
3
4
5
6

Object.assign Method is used to merge objects, copy all enumerable properties of the source object to the target object. The first parameter is the target object, and the subsequent parameters are all the source objects
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);

target // {a:1, b:2, c:3}


1
2
3
4
5
6

If the target object has a property with the same name as the source object, or multiple source objects have properties with the same name, the following properties will overwrite the previous ones
var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}


1
2
3
4
5

For further usage, see: https://www.cnblogs.com/youngGao/p/7989645.html
Declaration object shorthand
const age = 23
const name = "Zhang San"
const person1 = { age: age, name: name }

const person2 = { age, name }

console.log(person2);


1
2
3
4
5
6

Function attribute shorthand of object
let person3 = {
    name: "jack",
    // Previously:
    eat: function (food) {
        console.log(this.name + "Eating" + food);
    },
    //Arrow function this cannot be used, object. Property
    eat2: food => console.log(person3.name + "Eating" + food),
    eat3(food) {
        console.log(this.name + "Eating" + food);
    }
}

person3.eat("banana");
person3.eat2("apple")
person3.eat3("orange");


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


 11. Object extension operator
// 1. Copy object (deep copy)
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone)  //{name: "Amy", age: 15}

//2. Consolidated object
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}

p2 = { ...age1, ...name1 }

console.log(p2)


1
2
3
4
5
6
7
8
9
10
11


 12. Array method
The map and reduce methods are added to the array.
//map(): receive a function, process all elements in the original array with this function and put them into the new array to return.
 let arr = ['1', '20', '-5', '3'];

//  arr = arr.map((item)=>{
//     return item2
//  });

arr = arr.map(item=> item2);

console.log(arr);// //[2, 40, -10, 6]


1
2
3
4
5
6
7
8

//reduce() performs the callback function for each element in the array in turn, excluding the elements deleted or never assigned in the array,
//arr = [2, 40, -10, 6]
//arr.reduce(callback,[initialValue])
/**
1,previousValue (The value returned by the last callback call, or the initial value provided)
2,currentValue (Elements currently processed in the array)
3,index (Index of the current element in the array)
4,array (Array calling reduce)*/
let result = arr.reduce((a,b)=>{
    debugger
    console.log("After last processing:"+a);
    console.log("Currently processing:"+b);
    return a + b;
},100);
console.log(result)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


Promise
 //demand
        // 1. Find out the current user information
        // 2. Find out the course according to the current user's id
        // 3. Find out the score according to the current course id
    <span class="token comment">//Original</span>
    $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        url<span class="token punctuation">:</span> <span class="token string">"mock/user.json"</span><span class="token punctuation">,</span>
        <span class="token function">success</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Query user:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
            $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                url<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`mock/user_corse_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json`</span></span><span class="token punctuation">,</span>
                <span class="token function">success</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Course found:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                    $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                        url<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`mock/corse_score_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json`</span></span><span class="token punctuation">,</span>
                        <span class="token function">success</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Score found:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span><span class="token punctuation">,</span>
                        <span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"An exception occurred:"</span> <span class="token operator">+</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"An exception occurred:"</span> <span class="token operator">+</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"An exception occurred:"</span> <span class="token operator">+</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


    <span class="token comment">//1. Use Promise to encapsulate asynchronous operations</span>
    <span class="token comment">//resolve is a callback when promise succeeds. resolve returns data to then</span>
    <span class="token comment">//reject is the callback in case of failure. It changes the project status to rejected</span>
    <span class="token comment">//So we can capture it in then and then perform a callback for the "failed" situation</span>
    <span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">//1. Asynchronous operation</span>
        $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">"mock/user.json"</span><span class="token punctuation">,</span>
            success<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Query user succeeded:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
                <span class="token function">resolve</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            error<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// The functions in then have the same meaning as our normal callback functions</span>
    p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                url<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`mock/user_corse_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>obj<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json`</span></span><span class="token punctuation">,</span>
                success<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Query user course succeeded:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
                    <span class="token function">resolve</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                error<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Results of the previous step"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
        $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`mock/corse_score_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json`</span></span><span class="token punctuation">,</span>
            success<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Query course score successfully:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            error<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">//Simplification</span>
    <span class="token keyword">function</span> <span class="token keyword">get</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                url<span class="token punctuation">:</span> url<span class="token punctuation">,</span>
                data<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
                success<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token function">resolve</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                error<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">"mock/user.json"</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"User query successful~~~:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
            <span class="token keyword">return</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`mock/user_corse_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Course query succeeded~~~:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
            <span class="token keyword">return</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`mock/corse_score_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Course score query succeeded~~~:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Exception occurred"</span><span class="token punctuation">,</span>err<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

For details, see https://blog.csdn.net/qq_34645412/article/details/81170576

 modularization

 1. The background of modularity
With the website becoming an "Internet application", the Javascript code embedded in the web page becomes more and more huge and complex.
Javascript modular programming has become an urgent need. Ideally, developers only need to implement the core business logic, and other modules that have been written by others can be loaded.
However, Javascript is not a modular programming language, it does not support the concept of "class", "package" and "module".

 2. Modular specification

CommonJS modular specification
ES6 modular specification


 CommonJS module specification
Each file is a module with its own scope. Variables, functions, and classes defined in one file are all private and invisible to other files.

1. Create "module" folder

2. Export module

Create modeling common JS / four operations.js

//Define members:
const sum = function(a,b){
    return a + b
}
const subtract = function(a,b){
    return a - b
}
const multiply = function(a,b){
    return a * b
}
const divide = function(a,b){
    return a / b
}


1
2
3
4
5
6
7
8
9
10
11
12

Exporting Members in a module
// Export members:
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}


1
2
3
4
5
6
7

Can be abbreviated
//Shorthand
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}


1
2
3
4
5
6
7

3. Import module

Create modeling common JS / import module.js
//Introduce module, note: current path must be written/
const m = require('./Four operations.js')
console.log(m)

const result1 = m.sum(1, 2)
const result2 = m.subtract(1, 2)
console.log(result1, result2)


1
2
3
4
5
6
7

4. Run program
node introduction module.js

1
CommonJS uses exports and require to export and import modules

 ES6 modular specification
ES6 uses export and import to export and import modules
Create the modeling-es6 folder
1. Export module

Create src/userApi.js  file
export function getList() {
    console.log('Get data list')
}

export function save() {
    console.log('Save data')
}


1
2
3
4
5
6
7

2. Import module

Create src/userComponent.js file
//Just take the methods you need, multiple methods are separated by commas
import { getList, save } from './userApi.js'
getList()
save()


1
2
3
4

Note: the program cannot run at this time, because the modularization of ES6 cannot Node.js It needs to be edited to ES5 with Babel before execution.

3. Initialize project
npm init -y

1
4. Configure.babelrc
{
    "presets": ["es2015"],
    "plugins": []
}


1
2
3
4

5. Install transcoder

Install in project
npm install --save-dev babel-preset-es2015

1
6. Define run script

package.json Add "build-m" in:
{
    // ...
    "scripts": {
       "build": "babel src -d dist"
    }
}


1
2
3
4
5
6

7. Execute command transcoding
npm run build

1
8. Run program
node dist/userComponent.js

1
Another writing method of ES6 modularization
1. Export module

Create src/userApi2.js
export default {
    getList() {
        console.log('Get data list 2')
    },

    save() {
        console.log('Save data 2')
    }
}


1
2
3
4
5
6
7
8
9

2. Import module

Create src/userComponent2.js
import user from "./userApi2.js"
user.getList()
user.save()


1
2
3

3. Execute command transcoding
npm run build

1
4. Run program
node dist/userComponent2.js

1
                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>


    Posted by VisionsOfCody on Sat, 13 Jun 2020 01:59:37 -0700

Programmer Group

VSCode installation, ECMAScript 6 syntax

Article catalog

Front end development

VSCode

Initial settings

1. Chinese interface configuration

2. Plug in installation

3. Create project

4. Save workspace

5. New folders and pages

6. Preview web page

7. Set font size

8. Enable full Emmet syntax support

Introduction to ECMAScript 6

1. Relationship between ECMAScript and JavaScript

2. Relationship between ES6 and ECMAScript 2015

Basic grammar

1. let declaration variable

2. const declaration constant (read-only variable)

3. Deconstruction assignment

4. Template string

5. Declaration object shorthand

6. Shorthand of definition method

7. Object extension operator

8. Default parameters for functions

9. Indefinite parameter

10. Arrow function

10. Object optimization

11. Object extension operator

12. Array method

Promise

modularization

1. The background of modularity

2. Modular specification

CommonJS module specification

ES6 modular specification

Hot Keywords