邁向全棧開發學習(2)

2、es6語法學習：

　　這幾天把es6的語法過了一遍了，把一些經常使用的語法作了些小練習，算是基本入門了，我主要看這個網站進行學習的http://es6.ruanyifeng.com/。

　　   對項目添加了一些簡單的配置，爲了方即可查看效果。

路由配置：

 1 import letTest from './es6/let.js';
 2 import classTest from './es6/class.js';
 3 import moduleFunc from './es6/moduleAction.js';
 4 import promise from './es6/promise.js';
 5 
 6 export default {
 7     "let": { "func": letTest },
 8     "class": { "func": classTest },
 9     'module': { 'func': moduleFunc },
10     'promise': { 'func': promise }
11 }

入口文件：

 1 import person from './es6/person.js';
 2 import route from './route.js'
 3 
 4 let hash = window.location.hash;
 5 let strHash = hash.substr(1, hash.length);
 6 if (strHash == '') {
 7     let p = new person('webpack', 'hello');
 8     document.write(p.say());
 9 } else {
10     route[strHash]['func']();
11 }

http://localhost:7777/#let 這樣既可查看運行例子，以錨點做爲爲例子的名稱。

一、let 命令：

 1 export default function() {
 2     let name = 'zach';
 3 
 4     while (true) {
 5         let name = 'obama';
 6         document.write(name);//obama
 7         document.write('<br />')
 8         break;
 9     }
10 
11     document.write(name);//zach
12 }

二、class

 1 class Animal {
 2     constructor() {
 3         this.type = "animal";
 4     }
 5 
 6     says(say) {
 7         say = say || 'hello';
 8         document.write(`${this.type} says ${say} <br/>`);
 9     }
10 }
11 
12 class Cat extends Animal {
13     constructor() {
14         super(); //訪問父類的屬於屬性與方法
15         this.type = "cat";
16     }
17 }
18 
19 export default function() {
20     let animal = new Animal();
21     animal.says();
22 
23     let cat = new Cat();
24     cat.says('hi');
25 }

二、module 加載

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

引用，執行方法

1 import { counter, inCounter } from './module.js';
2 
3 export default () => {
4     let html = `<div>${counter}</div>`;
5     document.write(html);
6     inCounter();
7     html = `<div>${counter}</div>`;
8     document.write(html);
9 }

三、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