再学电商项目之谷粒商城之ES6新特性

前言

这段时间白天基本上都在忙着实习写的项目，一个人处理前后端，现在项目大体都能上手写代码了，但每次都在前端的开发过程中一遇到问题就会卡很久，浪费了很多时间，之前系统学的前端说实话大都不太深入，当时学Vue也只是跟着案例敲了几遍，也已经过了很长时间了，再就是之前学的电商项目还有很多东西每太明白，很多整合的技术也太久没用到，难免手生很多了，现在再通过一个谷粒商城来巩固一下，让自己在以后前端开发的时候也避一些坑

1、简介

ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商
协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本
程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且
从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。
它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
每年一个新版本

2、什么是 ECMAScript

来看下前端的发展历程：
 web1.0 时代：
最初的网页以 HTML 为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端
单向流通。开发人员也只关心页面的样式和内容即可。
 web2.0 时代：

• 1995 年，网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言。
• 1996 年，微软发布了 JScript，其实是 JavaScript 的逆向工程实现。
• 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组
  织 ECMA，希望这种语言能够成为国际标准。
• 1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的
  标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。JavaScript 和 JScript 都是
  ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准

所以，ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的 js 语言，如 JavaScript 则是规范的具体实现

3、新特性

下面以一个小demo的形式呈现，毕竟这种官方文档的话多了去了，需要的也可以评论我私发给你。

一些基础

let arr = [1,2,3];
    let [a,b,c] = arr;
    console.log(a,b,c);

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

    //对象解构
    const{name:abc,age,language} = person;

    console.log(abc,age,language);

    let ss = `<div>
                <span>hello world</span>
            </div>`;
    console.log(ss);

    let info = `我是${abc}，今年${age + 100}了，我想说：${fun()}`;
    console.log(info);

    function fun(){
        return "这是一个函数"
    }

    function add2(a, b = 1){
        return a + b;
    }
    console.log(add2(20));

    //不定参数
    function fun1(...values){
        console.log(values.length)
    }
    fun1(1,2)
    fun1(1,2,3,4)
    
    //箭头函数
    var print = obj => console.log(obj);
    print("hello")

    var sum2 = (a, b) => a + b;
    console.log(sum2(11,12));
    
    var sum3 = (a, b) => {
        c = a + b;
        return a + c;
    }

    console.log(sum3(10,20));

    var hello2 = (param) => console.log("hello," + param.name);
    hello2(person)
    //解构之后的方法  =>  箭头+解构
    var hello2 = ({name}) => console.log("hello," + name);
    hello2(person)

    console.log(Object.keys(person));//(3) ['name', 'age', 'language']
    console.log(Object.values(person));//hello.html:110 (3) ['jack', 21, Array(3)]
    console.log(Object.entries(person));//hello.html:111 (3) [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方法的第一个参数是目标对象 后面的参数都是源对象
    Object.assign(target, source1, source2);
    console.log(target);
    //声明对象简写
    const bookName = "假如给我三天光明"
    const bookId = 1001
    const book1 = {bookName: bookName, bookId: bookId}

    const book2 = {bookName, bookId}
    console.log(book2);

    //对象的函数属性简写
    let person1 = {
        name: "William",
        //以前：
        eat: function (food) {
            console.log(this.name + "在吃" + food);
        },
        //箭头函数this不能使用 要使用对象.属性
        // eat2: food => console.log(this.name + "在吃" + food) 
        eat2: food => console.log(person1.name + "在吃" + food),
        eat3(food){
            console.log(this.name + "在吃" + food);
        } 
    }
    person1.eat("香蕉");
    person1.eat2("苹果");
    person1.eat3("橘子");

    //对象的扩展运算符 (...)用于取出参数对象所有可遍历属性然后拷贝到当前对象
    let p1 = {name: "Bob", age: 18}
    let someone = { ...p1 }
    console.log(someone)

    //合并对象
    let age1 = { age: 15 }
    let name1 = { name: "Cute" }
    let p2 = {name: "zhangsan"}
    p2 = { ... age1, ...name1 }
    console.log(p2)//cute 最后的值会覆盖之前的值
</script>

<script>
    //数组中新增了map和reduce方法
    //map()：接收一个哈桑农户，将原数组中的所有元素用这个函数处理后放入新数组返回
    let arr1 = ['1', '20', '-5', '3'];
    // arr1 = arr1.map((item) => {
    //     return item*2;
    // });
    arr1 = arr1.map(item => item*2);
    console.log(arr1);
    //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
    //arr.reduce(callback,[initialValue])
    //2 40 -10 6
    /**
        1. previous (上一次调用回调返回的值，或者是提供的初始值(initialValue))
        2. currentValue (数组中当前被处理的元素)
        3. index (当前元素在数组中的索引)
        4. array (调用 reduce 的数组)
    */
    let res = arr1.reduce((a,b) => {
        console.log("上一次处理后："+a);
        console.log("当前正在处理: "+b);
        return a + b;
    });
    console.log(res);//38

promise

在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致 JavaScript 的所
有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连
串的 ajax 请求 a,b,c,d… 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层
层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外
层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…总之，这
种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度

以上这些都是现在企业开发的一些基础，我在现在写的项目中也发现ES6中箭头函数等的新特性的写法特别常见，开始自己写起来很不适应，后来感觉越写越丝滑，老项目中有很多jsp页面看着是真的头疼。接下来看个promise的小demo，可以有效地发送异步请求
先看对应的json数据

user: [
{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}
]
user_course: [
	{
    "id": 10,
    "name": "chinese"
	}
]
course_score: [
	{
    "id": 100,
    "score": 90
	}
]

再就是promise的小demo

//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) => {
            console.log("出现异常", err);
        });

通过比较，我们知道了 Promise 的扁平化设计理念，也领略了这种上层设计带来的好处。
我们的项目中会使用到这种异步处理的方式

模块化

1）、什么是模块化
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先
导包。而 JS 中没有包的概念，换来的是 模块。
模块功能主要由两个命令构成：export和import。
 export命令用于规定模块的对外接口。
 import命令用于导入其他模块提供的功能。

//main.js
import abc from "./hello.js"
import {name, add} from "./user.js"

//因为hello.js里面是导出default 这里可以随便取名
abc.sum(1,2);
console.log(name);
add(1,3);

//hello.js
//更快的导出方式 既声明了对象 又同时导出
// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

export default {
    sum(a, b){
        return a + b;
    }
}
// export {util}

// export 不仅可以导出对象，一切JS变量都可以导出，比如：基本类型变量、函数、数组、对象

//user.js
var name = "william"
var age = 21

function add(a,b){
    return a + b;
}

export {name, age, add}

但是上面的代码暂时无法测试，因为浏览器目前还不支持 ES6 的导入和导出功能。除非借
助于工具，把 ES6 的语法进行编译降级到 ES5，比如Babel-cli工具
我们暂时不做测试，大家了解即可。