從單子到模式匹配，我們將引導您了解高級開發人員使用的最新、最棒的 JavaScript 技術。

譯自Top 5 Cutting-Edge JavaScript Techniques，作者 Alexander T Williams。

JavaScript 是現代 Web 開發領域必不可少的工具，它不斷變化和發展，樹立了新的標準。在本文中，我們重點介紹五種前沿 JavaScript 技術，向開發人員展示構建動態 Web 應用程序的新穎創新方法，這些應用程序提供高水平的交互性和性能。從單子到模式匹配，我們將引導你了解高級開發人員的最新最棒的 JS 技術。

JavaScript 為何如此流行？

JavaScript 因其靈活性而獲得極大歡迎，并已確立了自己作為全球使用最廣泛的編程語言。JS 通常用于創建具有高度交互性的動態 Web 應用程序，例如實時更新、直觀、功能豐富的用戶界面等。此外，JavaScript 允許應用程序跨各種平臺運行。

JS 可用于各種項目，例如為電子商務服務提供支持或制作動畫和手機游戲。然而，這僅僅是該編程語言功能的縮影。我們還看到 JS 被用于企業環境中，尤其是在關鍵的 ERP 支持的流程（如 SAP 人員擴充）中，因為它允許創建自定義儀表板和 UI，并構建在原生 Web 平臺之上。

許多領先的平臺（如 Facebook）使用開源用戶界面框架React Native，它構建在 JavaScript 之上。這使他們能夠構建可在 iOS 和 Android 上運行的移動應用程序（如今，甚至 Apple Vision Pro），同時使用單個代碼庫。因此，開發時間大大縮短，使用的資源更少，并且用戶體驗在所有平臺和設備上保持一致。

Node.js 等服務器端運行時環境使得在 Web 瀏覽器之外運行 JavaScript 成為可能，進一步提高了應用程序的可擴展性和部署可能性。為了使 JS 更加通用和多功能，大量與 JS 兼容的 API 也將 Web 應用程序鏈接到外部服務。

最后，JavaScript 得到一個強大的庫和框架生態系統的支持，該生態系統有助于簡化和加速開發，允許開發人員選擇預先編寫的代碼來執行特定功能。

5項前沿技術

我們選擇了五種前沿 JavaScript 技術，開發人員現在應該使用這些技術，以幫助你克服眾多開發問題并創建更有效、更用戶友好的應用程序。

1. Monads（異步操作）

Monads 有助于組合需要上下文的函數以返回一個值，并且在簡化錯誤管理和減少意外結果的可能性方面非常有效。

Monads 旨在盡可能簡化代碼中函數的組合。它們通常在構建需要最高精度的企業級應用程序時使用。單子可以使代碼更易于管理，從而產生復雜的回調、嵌套條件分支等。從本質上講，單子旨在盡可能簡化代碼中函數的組合。

單子可以分解為三種函數組合：

• 函數映射：a => b
• 具有上下文的函子映射：Functor(a)=> Functor(b)
• Monads 展平（從上下文中解包值）并使用上下文映射：Monad(Monada))=> Monad(b)

函數組合是允許創建函數管道的基礎，從而實現高效的數據流。管道的第一階段是輸入，最后階段是從其初始狀態轉換的輸出。但是，要實現這一點，管道中的每個階段都必須能夠預測前一階段將返回什么數據類型。

這正是單子式所擅長的，通過映射函數來建立智能管道。它們以類似于 Promise 的方式工作，而且可以無縫地一起使用。

這里有一個單子用來從異步API中獲取一個用戶，然后將該用戶數據傳遞給另一個異步API來執行計算：

const composeM = chainMethod => (...ms) => (
    ms.reduce((f, g) => x => g(x)[chainMethod](f))
  );
  const composePromises = composeM('then');
  const label = 'API call composition';
 
  // a => Promise(b)
  const getUserById = id => id === 3 ?
    Promise.resolve({ name: 'Kurt', role: 'Author' }) : undefined;
 
  // b => Promise(c)
  const hasPermission = ({ role }) => (
    Promise.resolve(role === 'Author')
  );
 
  // Compose the functions (this works!)
  const authUser = composePromises(hasPermission, getUserById);
  authUser(3).then(trace(label)); // true

2. 聲明式編程

一種聲明式方法通常用于開發人員優先考慮簡潔的、富有表現力的代碼。

JavaScript 中的聲明式編程重點關注代碼的整體目標，而不是如何實現這些目標。這使得代碼更簡單，更易讀——因此，更易于維護。當開發人員優先考慮簡潔、富有表現力的代碼以快速交付項目時，通常會使用聲明式方法。

讓我們將聲明式方法與命令式方法進行比較：

命令式：

function evenSum(numbers) {
    let result = 0;
 
    for (let i = 0; i < numbers.length; i++) {
        let number = numbers[i]
        if (number % 2 === 0) {
            result += number;
        }
    }
 
    return result;
}

聲明式：

const evenSum = numbers => numbers
    .filter(i => i % 2 === 0)
    .reduce((a, b) => a + b)

3. 用于提高 Node.js 性能的服務器端緩存

服務器端緩存可用于根據使用指標自動擴展資源。

緩存并不是什么新鮮事物，可能不被認為特別新潮，但由于客戶端和服務器端 Web 應用程序都可以使用緩存，因此它是提高性能的強大工具。特別是，服務器端緩存可通過加快數據檢索來提高 Node.js 性能。

我們來看看內存緩存技術的一個簡單示例：

const cache = require('memory-cache');
 
function getDataFromCache(key) {
  const cachedData = cache.get(key);
  if (cachedData) {
    return cachedData;
  }
 
  // If data is not in cache, fetch it from the source
  const data = fetchDataFromSource();
 
  // Store data in cache for future use
  cache.put(key, data, 60000); // Cache for 60 seconds
 
  return data;
}

服務器端緩存可以用來基于使用指標自動化資源的擴展。AWS Lambda、Azure Functions 或 Google Cloud Functions 可以被編程為動態調整服務，同時用于 JavaScript 的 AWS SDK 允許您監控使用情況、優化云成本和自動化擴展操作，確保您僅為所需的資源付費。

4. 不可變性

不可變性指的是不能改變的東西。在 JavaScript（及其編程語言）中，它指的是一旦設置后永遠不會改變的值。由于應用程序不斷地改變和更新，不可變性似乎是不必要的——但事實并非如此。

這種技術的好處是能減少調試，減少意外結果。

不可修改的數據非常重要，因為它有助于增強代碼庫的一致性，簡化狀態管理。與其修改值，不如創建一個新值，這樣可提高可預測性，進而可減少錯誤（例如，當數據結構意外更改時發生的錯誤）。這會導致減少調試以及減少意外結果。

不可變性用于 name 值的一個示例：

// Import stylesheets
import './style.css';
 
// Write JavaScript code!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>Open the console to see results</h1>`;
 
class Person {
  //_name = "Nee";
  //_name = ["Nee", "Ra"];
  _name = { first: "Nee", middle: "L" };
  
  get name() {
    return this._name;
  }
  
  set name(value) {
    console.log('In setter', value);
    this._name = value;
  }
}
 
let p = new Person();
//p.name = "Ra";                        // Setter executes
//p.name.push("Lee");                   // Setter doesn't execute
//p.name = [...p.name, "Lee"];          // Setter executes
//p.name.middle = "Lee";                // Setter doesn't execute
p.name = { ...p.name, middle: "Lee" };  // Setter executes

5. 模式匹配

模式匹配是一種條件分支，可以簡潔地匹配數據結構模式，同時綁定變量。模式匹配通常用于編寫 XSLT 樣式表來轉換 XML 文檔。

模式匹配比標準 switch 語句更有效。

當需要針對任何給定模式測試值時，模式匹配比標準 switch 語句更有效，并且提供了更多的控制，允許開發人員編寫更復雜的表達式。

以下是使用 match 模塊實現階乘函數的示例，使用 JU-nify 庫：

match = function () {
  var unify = unification.unify;
 
  function match_aux(patterns, value) {
    var i, result;
 
    for (i = 0; i < patterns.length; i += 1) {
      result = unify(patterns[i][0], value);
      if (result) {
        return patterns[i][1](result);
      }
    }
    return undefined;
  }
 
  return function(patterns, value) {
    return match_aux(patterns, value);
  };
}();
 
var fact = function (n) {
  return match([
    [0, function() { return 1; }],
    [$('n'), function(result) {
      return result.n * fact(result.n - 1);
     }]
  ], n);
};

結論

JavaScript 靈活、多功能，并且可以在各種平臺上部署。使用上述技術意味著開發人員可以為其應用程序創建功能強大但簡潔的代碼。