迈向全栈开发学习(2)

二、es6语法学习：

　　这几天把es6的语法过了一遍了，把一些常用的语法做了些小练习，算是基本入门了，我主要看这个网站进行学习的http://es6.ruanyifeng.com/。

　　   对项目添加了一些简单的配置，为了方便可查看效果。

路由配置：

import letTest from './es6/let.js';
import classTest from './es6/class.js';
import moduleFunc from './es6/moduleAction.js';
import promise from './es6/promise.js';

export default {
    "let": { "func": letTest },
    "class": { "func": classTest },
    'module': { 'func': moduleFunc },
    'promise': { 'func': promise }
}

入口文件：

import person from './es6/person.js';
import route from './route.js'

let hash = window.location.hash;
let strHash = hash.substr(1, hash.length);
if (strHash == '') {
    let p = new person('webpack', 'hello');
    document.write(p.say());
} else {
    route[strHash]['func']();
}

http://localhost:7777/#let 这样既可查看运行例子，以锚点作为为例子的名称。

1、let 命令：

export default function() {
    let name = 'zach';

    while (true) {
        let name = 'obama';
        document.write(name);//obama
        document.write('<br />')
        break;
    }

    document.write(name);//zach
}

2、class

class Animal {
    constructor() {
        this.type = "animal";
    }

    says(say) {
        say = say || 'hello';
        document.write(`${this.type} says ${say} <br/>`);
    }
}

class Cat extends Animal {
    constructor() {
        super(); //访问父类的属于属性与方法
        this.type = "cat";
    }
}

export default function() {
    let animal = new Animal();
    animal.says();

    let cat = new Cat();
    cat.says('hi');
}

2、module 加载

export let counter = 3;
export function inCounter() {
    counter++;
}

引用，执行方法

import { counter, inCounter } from './module.js';

export default () => {
    let html = `<div>${counter}</div>`;
    document.write(html);
    inCounter();
    html = `<div>${counter}</div>`;
    document.write(html);
}

3、promise 异步方法

function actionProise() {
    let promise = new Promise(function(reslove, reject) {
        try {
            let box = document.createElement('div');
            document.body.appendChild(box);
            let i = 0;
            let t = setInterval(() => {
                i++;
                box.innerHTML = i;
                if (i > 99) {
                    clearInterval(t);
                    reslove(i); //异步执行成功
                }
            }, 500);
        } catch (e) {
            reject(e.message); //异步执行失败
        }
    });
    return promise;
}

export default () => {
    document.write('<div>异步执行开始</div>');
    actionProise().then((value) => {
        document.write('<div>异步执行成功</div>');
    }, (error) => {
        document.write('<div>异步执行失败</div>');
    });
}

以上就是我的es6方法的，学习了，详细运行下例子就知道了。上面的列子也包括了一些es6的语法糖的写法。

源码地址：https://github.com/codeyoyo/Full-stack-development.git