進入JS 忍者的世界(下) Day2

2022 iThome 鐵人賽

DAY 3

Modern Web

JS 忍者訓練計畫系列第 3 篇

14th鐵人賽

機器人幽默研究員

團隊啊 ah

2022-09-03 00:56:00

858 瀏覽

分享至

網路應用程式進階學習，除了跨瀏覽器的支援考量外，測試跟效能也常常被提到，除了穩定性跟速度上的體驗更好，更重要的更是控制複雜度吧。

儘管測試跟效能牽涉到廣博的學習，在持續學習者的學習道路上，佔了一定的必要性，無論學習或實踐的程度如何，每次總有新的體會。

這章想學到什麼？

開發函示庫之跨瀏覽起支援的考量有哪些
概觀最佳實務慣例的測試函式寫法，以及其他
概觀最佳實務慣例中需要的效能分析時間戳，以及其他

程式碼閱讀練習或撰寫

開發函示庫之跨瀏覽起支援的考量有哪些（無程式）

目標使用者預期想要的東西與需求
瀏覽器市場佔有率
支援該瀏覽器所需花費的心力與資源

概觀最佳實務慣例的測試函式寫法，以及其他

之後會看不同測試基本元件包括：斷言、測試群組、非同步測試，但最基本的概念就是這個執行是對或錯，然後顯示是對或錯。以下例子跟程式碼

如果錯誤就會顯示錯誤訊息，前者為判斷式，後者為錯誤訊息，像這樣惟其中一種的斷言設計方式。

//我們有一個像這樣格式的函式 assert(condtion, message)

function assert (condtion, message) {
  return condtion ? 'PASS' : message
}
assert(1 === '1', '數字不相等')

概觀最佳實務慣例中需要的效能分析時間戳，以及其他

我們可以用時間戳來測試這段程式要執行的時間，進行效能分析。但真正提到效能應該卻不只，還包括佔用的空間、程式寫法好壞、資源大小的處理、伺服器或網路快慢等等等，許多不同的面向，甚至到「使用者體驗的好效能」。

以下，簡單練習一個計算 1~1000000 的城市要花多久時間，約 16 ~ 44 毫秒

let maxCount = 1000000;
let start = new Date().getTime();
let total = 0;
for (var n = 0; n <= maxCount; n++) {
  /* 執行想測量的動作*/
    total = total + n;
}
let elapsed = new Date().getTime() - start;
console.log(total)
console.log(true, "Measure Time: " + elapsed);

其他有趣的發現，setTimeout 設定一秒，執行時間會差幾毫秒

let start = new Date().getTime();
let mark = setTimeout(()=>{
    let elapsed = new Date().getTime() - start;
    console.log(elapsed)
}, 1000)

補：看看有哪些 JS 測試工具，一些舉例

AVA、Cypress、jest、Mocha、vitest 等等。

補：Jest 程式閱讀以及 3A原則（Arrange, Act and Assert (AAA) Pattern）

describe("groupBy()", function () {
    it("需回傳以你定義的 key 的群組, () => {
      // （1A）Arrange 初始化或要用的的參數
      const roleModels = [
        {
          userId: 1,
          name: "John Williams",
          type: "Composer"
        },
        {
          userId: 2,
          name: "Hans Zimmer",
          type: "Composer"
        },
        {
          userId: 3,
          name: "Michael Jordan",
          type: "Athlete"
        },
        {
          userId: 4,
          name: "Stephen King",
          type: "Author"
        }
      ];

      // （2A）Act 執行
      const byType = groupBy(roleModels, "type");

      // （3A）Assert 期待結果判斷
      expect(byType).toMatchObject({
        Athlete: [
          {
            name: "Michael Jordan",
            type: "Athlete",
            userId: 3
          }
        ],
        Author: [
          {
            name: "Stephen King",
            type: "Author",
            userId: 4
          }
        ],
        Composer: [
          {
            name: "John Williams",
            type: "Composer",
            userId: 1
          },
          {
            name: "Hans Zimmer",
            type: "Composer",
            userId: 2
          }
        ]
      });
    });
  });

完整 Copen

明天又能學到什麼呢？下集待續