學習 NodeJS 5-ES6常用語法

5 ES6常用語法

5.1 ES6簡介

• 1995：JavaScript誕生。
• 1997：ECMAScript標準確立。
• 1999：ES3出現，與此同時IE5風靡一時
• 2009：ES5出現，例如foreach，Object.keys，Object.create和JSON標準。
• 2015：ES6/ECMAScript2015出現。
• 目標：JavaScript語言可以用來編寫複雜的大型應用程序，成爲企業級開發語言。

5.2 ES6常用命令

• 函數的Rest參數和擴展
• Promise使用
• module.exports 和 ES6 import / export 的使用

函數的Rest參數和擴展 :

// 函數Rest操作符 (...m)
let sum3 = (...m) =>{
  let total = 0;
  for (var i of m){
    total += i;
  }
  console.log(`total3:${total}`);
};
sum3(4,8,9,10);

// 擴展 (...m)
let arr1 = [1,3];
let arr2 = [4,8];
// 效果如同：console.log(arr1.concat(arr2));
console.log([...arr1,...arr2]);

var [x,y] = [4,8];     // x=4;y=8
console.log(...[4,8]); // 拆分成4和8
let xy = [...'ES6'];   // 拆分成'E','S','6'
var [x,...y] = [4,8,10,30]; // x=4,y=[8,10,30]

Promise的使用：resolve放置結果，reject放置錯誤信息，promise避免callback，使用鏈式操作，清晰。

let checkLogin = function () {
  return new Promise(function (resolve,reject) {
    let flag = document.cookie.indexOf("userId")>-1?true:false;
    if (flag = true){
      resolve({
        status:0,
        results:true
      })
    } else {
      reject("error");
    }
  })
};

let getUserInfo = () =>{
  return new Promise((resolve,reject)=>{
    let userInfo = {
      userId:"101"
    }
    resolve(userInfo);
    console.log(userInfo);
  })
};

checkLogin().then(res=> {
  if(res.status==0){
    console.log("login success");
    return getUserInfo();
  }
}).catch((error)=>{
  console.log(`error:${error}`);
}).then((res2)=>{
  console.log(`userId:${res2.userId}`)
});

Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
  console.log(`res1:${res1.results},res2:${res2.userId}`);
});

ES6 import / export 的使用:

export let sum=(x,y)=>{
  return x+y;
}

export let minus = (m,n) =>{
  return m-n;
}

// 引入JS模塊
export default {
  props:[ "num" ] ,

  data () {
    return {
      num:0,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  
  methods:{
    increament(){
      this.$emit("incre");
      import('./../util');
    },
    decreament(){
      this.$emit("decre");
    }
  }
}

import {sum,minus} from './util'     // import * as util from './util' 作爲服務
console.log(`sum:${sum(1,2)}`);      // console.log(`sum:${util.sum(1,2)}`);
console.log(`minus:${minus(1,2)}`);  // console.log(`minus:${util.minus(1,2)}`);

5.3 AMD CMD CommonJS和ES6

什麼是AMD CMD CommonJS？是一個規範也是一個標準？他們之間有什麼區別？項目當中都是如何運用的？

• AMD是RequireJS在推廣過程中對模塊定義的規範化產出。異步模塊加載，依賴前置。

define(['package/lib], function(lib){
  function foo(){
    lib.log('hello world!');
  }

  return {
    foo: foo
  };
})

• CMD是SeaJS在推廣過程中對模塊定義的規範化產出。同步模塊加載，依賴前置。

define(function (require, export, module) {
  // 通過 require 引入依賴
  var $ = require('jquery');
  var Spinning = require('./spinning');
})

• CommonJS規範 - module.exports。在NodeJS後臺使用，前端瀏覽器不識別。相當於export-default輸出。

exports.area = function (r) {
  return Math.PI * r * r;
};
exports.circumference = function (r) {
  return 2 * Math.PI * r;
};

• ES6 export/import特性

export default {
  props:[ "num" ] ,

  data () {
    return { }
  },

  methods:{
    increament(){
      this.$emit("incre");
      import('./../util');
    },
    decreament(){
      this.$emit("decre");
    }
  }
}