天天看點
傳回

《分布式微服務電商》專題(九)-電商項目前端ES6

文章目錄

  • ​​1.前端常見技術​​
  • ​​2.VS環境搭建​​
  • ​​3.ES6介紹​​
  • ​​3.1.let作用域.html​​
  • ​​3.2.解構表達式.html​​
  • ​​3.3.函數優化.html​​
  • ​​3.4.對象優化.html​​
  • ​​3.5.map和reduce.html​​
  • ​​3.6.promise.html​​
  • ​​3.7.子產品化import/export​​

1.前端常見技術

前後端對比

《分布式微服務電商》專題(九)-電商項目前端ES6

2.VS環境搭建

VScode中安裝如下插件：

  • Auto Close Tag
  • Auto Rename Tag
  • Chinese
  • ESlint
  • HTML CSS Support
  • HTML Snippets
  • JavaScript ES6
  • Live Server
  • open in brower
  • Vetur33
  • Vue 2Snippets 文法提示
  • 谷歌浏覽器中安裝插件Vue Devtools

3.ES6介紹

ECMAScript6.0（以下簡稱ES6，ECMAScript是一種由Ecma國際通過ECMA-262标準化的腳本），是JavaScript語言的下一代标準，2015年6月正式釋出，從ES6開始的版本号采用年号，如

  • ES2015，就是ES6。
  • ES2016，就是ES7。
  • ES2017，就是ES8。
ECMAScript是規範，JS的規範的具體實作。

打開VSCode—打開檔案夾—建立es6檔案夾—建立檔案1、let.html—​

​shift+!+Enter​

​生成模闆。填入下面内容後，右鍵open with live server

3.1.let作用域.html

  • let不會作用到{}外，var會越域跳到{}外
  • var可以多次聲明同一變量，let會報錯
  • var定義之前可以使用，let定義之前不可使用。（變量提升問題） 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<script>
       // var 聲明的變量往往會越域
       // let 聲明的變量有嚴格局部作用域
        //{
            //var a = 1;
            //let b = 2;
        //}
        //console.log(a);  // 1
        //console.log(b);  // ReferenceError: b is not defined

        // var 可以聲明多次
        // let 隻能聲明一次
        // 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 會變量提升
        // let 不存在變量提升
        // console.log(x);  // undefined
        // var x = 10;
        // console.log(y);   //ReferenceError: y is not defined
        // let y = 20;

        // let
        // 1. const聲明之後不允許改變
        // 2. 一但聲明必須初始化，否則會報錯
        //const a = 1;
        //a = 3; //Uncaught TypeError: Assignment to constant variable.
    
    </script>
    
</body>
</html>      
var在{}之外也起作用
let在{}不起作用
var多次聲明同一變量不會報錯，let多次聲明會報錯，隻能聲明一次。
var 會變量提升（列印和定義可以順序反）。let 不存在變量提升（順序不能反）
let的·聲明之後不允許改變

3.2.解構表達式.html

  • 支援​

    ​let arr = [1,2,3]; let [a,b,c] = arr;​

     ​這種文法
  • 支援對象解析：​

    ​const { name: abc, age, language } = person;​

     ​ 冒号代表改名，舊:新
  • 字元串函數
  • ​

    ​支援一個字元串為多行``​

     ​
  • 占位符功能 ${} 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>

        //數組解構
        //let arr = [1,2,3];
        //let a = arr[0];
        //let b = arr[1];
        //let c = arr[2];

        //let [a,b,c] = arr;
        //console.log(a,b,c);


        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //const name = person.name;
        //const age = person.age;
        //const language = person.language;
        // 對象解構 
        // 把name屬性變為abc，聲明了abc、age、language三個變量
        const { name:abc, age, language } = person;
        console.log(abc, age, language);


        //4、字元串擴充
        let str = "hello.vue";
        console.log(str.startsWith("hello"));//true
        console.log(str.endsWith(".vue"));//true
        console.log(str.includes("e"));//true
        console.log(str.includes("hello"));//true


        //字元串模闆 ``可以定義多行字元串
        let ss = `<div>
                <span>hello world<span>
            </div>`;
        console.log(ss);

        function fun() {
            return "這是一個函數"
        }

        // 2、字元串插入變量和表達式。變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達式。
        let info = `我是${abc}，今年${age + 10}了, 我想說： ${fun()}`;
        console.log(info);

    </script>

</body>
</html>

3.3.函數優化.html

支援函數形參預設值 ​

​function add2(a, b = 1) { }​

​​ 支援不定參數 ​

​function fun(...values) {}​

​ 支援箭頭函數 ​

​var print = obj => console.log(obj);​

​ 箭頭函數+結構 ​

​var hello2 = ({name}) => console.log("hello," +name);​

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <script>
            //在ES6以前，我們無法給一個函數參數設定預設值，隻能采用變通寫法：
            function add(a, b) {
                // 判斷b是否為空，為空就給預設值1
                b = b || 1;
                return a + b;
            }
            // 傳一個參數
            console.log(add(10));

            //現在可以這麼寫：直接給參數寫上預設值，沒傳就會自動使用預設值
            function add2(a, b = 1) {
                return a + b;
            }
            console.log(add2(20));

            //2）、不定參數
            function fun(...values) {
                console.log(values.length)
            }
            fun(1, 2)      //2
            fun(1, 2, 3, 4)  //4

            //3）、箭頭函數。lambda
            //以前聲明一個方法
            // var print = function (obj) {
            //     console.log(obj);
            // }
            var print = obj => console.log(obj);
            print("hello");

            var sum = function (a, b) {
                c = a + b;
                return a + c;
            }

            var sum2 = (a, b) => a + b;
            console.log(sum2(11, 12));

            const person = {
                name: "jack",
                age: 21,
                language: ['java', 'js', 'css']
            }

            function hello(person) {
                console.log("hello," + person.name)
            }
            hello(person);

            //箭頭函數+解構
            var hello2 = ({name}) => console.log("hello," +name);
            hello2(person);
        </script>

</body>
</html>

3.4.對象優化.html

對象簡寫很常見

可以擷取map的鍵值對等​

​Object.keys()​

​​、​

​values​

​​、​

​entries​

​​

​Object.assgn(target,source1,source2)​

​ 合并

如果屬性名和屬性值的變量名相同，可以省略​

​const person2 = { age, name }​

​ 代表age屬性的值是變量age的值

​

​…​

​代表取出該對象所有屬性拷貝到目前對象。​

​let someone = { …p1 }​

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <script>

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)];

        const target  = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };

        // 合并
        //{a:1,b:2,c:3}
        Object.assign(target, source1, source2);
        console.log(target);//{a: 1, b: 2, c: 3}

        //2）、聲明對象簡寫
        const age = 23
        const name = "張三"
        const person1 = { age: age, name: name }
        // 等價于
        const person2 = { age, name }//聲明對象簡寫
        console.log(person1);
        console.log(person2);

         //3）、對象的函數屬性簡寫
         let person3 = {
            name: "jack",
            // 以前：
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭頭函數this不能使用，要使用的話需要使用：對象.屬性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("香蕉");
        person3.eat2("蘋果");
        person3.eat3("橘子");

        //4）、對象拓展運算符

        // 1、拷貝對象（深拷貝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone);  //{name: "Amy", age: 15}

        // 2、合并對象
        let age1 = { age: 15, hobby:"美女" }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        p2 = { ...age1, ...name1 } 
        console.log(p2);

    </script>
    
</body>
</html>

3.5.map和reduce.html

​

​map()：​

​​接收一個函數，将原數組中的所有元素用這個函數處理後放入新數組傳回。

​​

​reduce()：​

​ 為數組中的每一個元素依次執行回調函數，不包括數組中被删除或從未被指派的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //數組中新增了map和reduce方法。
        let arr = ['1', '20', '-5', '3'];

        //map()：接收一個函數，将原數組中的所有元素用這個函數處理後放入新數組傳回。
        arr = arr.map((item) => {
            return item * 2
        });
        arr = arr.map(item => item * 2);
        console.log(arr);

        //reduce() 為數組中的每一個元素依次執行回調函數，不包括數組中被删除或從未被指派的元素，
        //[2, 40, -10, 6]
        //arr.reduce(callback,[initialValue])
        /**
        1、previousValue （上一次調用回調傳回的值，或者是提供的初始值（initialValue））
        2、currentValue （數組中目前被處理的元素）
        3、index （目前元素在數組中的索引）
        4、array （調用 reduce 的數組）*/
        let result = arr.reduce((a,b)=>{
            console.log("上一次處理後："+a);
            console.log("目前正在處理："+b);
            return a + b;
        },100);
        console.log(result);

    </script>
</body>

</html>

3.6.promise.html

優化異步操作。封裝ajax

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <script>
        //1、查出目前使用者資訊
        //2、按照目前使用者的id查出他的課程
        //3、按照目前課程id查出分數
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查詢使用者：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查詢到課程：", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查詢到分數：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出現異常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
        //                 console.log("出現異常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
        //         console.log("出現異常了：" + error);
        //     }
        // });


        //1、Promise可以封裝異步操作
        // let p = new Promise((resolve, reject) => { //傳入成功解析，失敗拒絕
        //     //1、異步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success: function (data) {
        //             console.log("查詢使用者成功:", data)
        //             resolve(data);
        //         },
        //         error: function (err) {
        //             reject(err);
        //         }
        //     });
        // });

        // p.then((obj) => { //成功以後做什麼
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_corse_${obj.id}.json`,
        //             success: function (data) {
        //                 console.log("查詢使用者課程成功:", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
        //                 reject(err)
        //             }
        //         });
        //     })
        // }).then((data) => { //成功以後幹什麼
        //     console.log("上一步的結果", data)
        //     $.ajax({
        //         url: `mock/corse_score_${data.id}.json`,
        //         success: function (data) {
        //             console.log("查詢課程得分成功:", data)
        //         },
        //         error: function (err) {
        //         }
        //     });
        // })

        function get(url, data) { //自己定義一個方法整合一下
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("使用者查詢成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("課程查詢成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data) => {
                console.log("課程成績查詢成功~~~:", data)
            })
            .catch((err) => { //失敗的話catch
                console.log("出現異常", err)
            });
            
    </script>
</body>

</html>

corse_score_10.json 得分

{
    "id": 100,
    "score": 90
}

user.json 使用者

{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}

user_corse_1.json 課程

{
    "id": 10,
    "name": "chinese"
}

以前嵌套ajax的時候很繁瑣。

  • 把Ajax封裝到​

    ​Promise​

     ​中，指派給let p
  • 在Ajax中成功使用​

    ​resolve(data)​

     ​​，失敗使用​

    ​reject(err)​

     ​
  • ​

    ​p.then().catch()​

     ​

3.7.子產品化import/export

子產品化就是把代碼進行拆分，友善重複利用。類似于java中的導包，而JS換了個概念，是導子產品。

子產品功能主要有兩個指令構成 export 和import

  • export用于規定子產品的對外接口
  • import用于導入其他子產品提供的功能

user.js

var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}
// 導出變量和函數
export {name,age,add}      
// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

// 導出後可以重命名
export default {
    sum(a, b) {
        return a + b;
    }
}
// export {util}

//`export`不僅可以導出對象，一切JS變量都可以導出。比如：基本類型變量、函數、數組、對象。      
import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);
html 數組 json
上一篇: 《分布式微服務電商》專題(十)-電商項目前端Vue基礎文法
下一篇: 5月3号學習筆記

繼續閱讀