提升網站品質,擁抱 Javascript ES6

隨著網頁技術的演進,其實這一年來,我在工作上已經都使用 Javascript ES6,越來越少接觸 jQuery,因此最近就花了一些時間,將部落格的 js 重構改成 ES6 的寫法,也把網站速度分數提升到 滿分一百分 ( PageSpeed Insights ),用篇文章稍微紀錄一下,象徵正式告別 jQuery 的時代開始。

有用到 ES6 的地方

坦白說我很感謝 jQuery,它開啟了我對 Javascript 熱情,不過或許這就是科技吧,當下熱門的技術通常不到幾年就會迭代更換,也因此反而激起了我回頭練習基礎語法的動力,當你的基礎夠扎實,就如同武林高手一般,內功越深練甚麼武功都快,下面幾個項目是我在這個 Blog 裡有用到 ES6 語法的地方,沒有很多但挺實用,分享給大家~

1. 改用 fetch

過去在讀取外部檔案,或發送 http request,如果是用 jQuery 還滿方便的,只要透過$.getJSON$.ajax$.POST都可以輕鬆完成,但相對要付出許多層層疊疊的 callback,但 ES6 提供了 fetch 這個 promise 的方法,透過 fetch 就能輕鬆實現從或外部取得資料或發送 http request 的功能。

fetch('XXXX.json')
.then(response => {
  return response.json();
}).then(result => {
  return result;
});

2. 使用 async、 await

async 和 await 是 promise 的語法糖,在主流瀏覽器已經全部支援的狀況下,沒道理不採用這麼好用的新語法,由於上述 fetch 是 promise 物件,所以透過 async 和 await,就能再確認資料載入後,再進行後續的事情 ( 在畫面上產生 DOM、隨機取出文章...等 )。

!async function(){
  const list = () => {
    return fetch('XXXX.json')
      .then(response => {
        return response.json();
      }).then(result => {
        return result;
      });
  };
  const data = await list();
  // do something...
}();

3. 使用 const、let 和箭頭函數

變數宣告 const、let 以及箭頭函式,都是 ES6 裡頭滿好用的新功能,重點除了可以大幅減少程式碼,更可以明確定義某個範圍內的變數,不過由於 jQuery 在某些狀況並不支援 const、let 和箭頭函式,也加深了要移除 jQuery 的決心。( 並非所有的函式都要換成箭頭函式,在某些情境下箭頭函式的確很好用 )

// 原本寫法
var a =  function(){ ... }

// 改成箭頭函式
const a = () => { ... }

4. 使用 every 處理陣列

every 是 ES6 語法裡處理陣列的好方法,有別於 forEach 無法停止 ( 迴圈一定得跑完才會停 ),every 可以撰寫邏輯判斷,只要 return false 就會停止迴圈,加速,加快陣列的操作和運算。

const arr = [...];
arr.every(e => {
  if(...){
    return false;
  }else{
    return true;
  }
});

5. 使用模板字符串 Template Literal

過去要透過 Javascript 在 HTML 顯示字串或是產生 HTML tag,都得使用一般的字串搭配 + 號來實現,在 ES6 裡可以直接使用模板字符串來完成,甚至是換行也不用像過去得添加\n才能夠換行,直接換行即可,相當的方便實用。

// 原本寫法
var a = 'oxxo';
var b = 'xoox';
var c = a + '你是不是' + b + '呀?';

// 改成模板字符串
var a = 'oxxo';
var b = 'xoox';
var c = `${a}你是不是${b}呀?`;

小結

接觸 ES6 的語法之後,也讓我萌生許多不同的想法和創意,我想再來可能會陸陸續續把一些過去用 jQuery 寫得醜醜的程式碼改掉,敬請期待囉~

有興趣瞧瞧其他新文章嗎?