本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)

[[322118]]

JavaScript語言中，IIFE代表立即調(diào)用函數(shù)表達式，它是一個定義后即刻執(zhí)行的函數(shù)。

為什么我說別再在代碼中編寫IIFE了?本文將給你答案。

可以在JavaScript中定義Block-Scoped 變量

以ES6作為標(biāo)準(zhǔn)發(fā)布，你可以使用let和const聲明塊級作用域的變量和常量。它還引入了獨立塊，可以將變量和常量隔離到外部無法使用的自身塊中。

例如，可以寫：

{ let x = 1;} 

那么x對外不可用。

這要比以下代碼清晰許多：

(()=>{ 
  let x = 1; 
})(); 

現(xiàn)如今，幾乎所有瀏覽器都支持ES6，停止使用IIFE能將變量從外部分離。

另一種隔離變量的方法是使用模塊，它也得到廣泛支持。只要不將其導(dǎo)出，其他模塊就無法使用。

不再需要閉包

閉包是返回另一個函數(shù)的函數(shù)。返回的函數(shù)能夠運行在其外部的代碼，但內(nèi)部的代碼則由閉包函數(shù)運行。

例如，它可能會產(chǎn)生：

const id = (() => { 
  let count = 0; 
  return () => { 
    ++count; 
    return `id_${count}`; 
  }; 
})(); 

而既有了塊和模塊以隔離數(shù)據(jù)，上述函數(shù)就變得更加復(fù)雜和不必要了。

可以將所有函數(shù)放入其自身模塊，這樣就不必?fù)?dān)心暴露數(shù)據(jù)了，但這也會產(chǎn)生副作用。由于不是純函數(shù)，很難對其進行測試。

在可以避免嵌套的時候，返回函數(shù)的函數(shù)也會引入嵌套，所以它比沒有返回函數(shù)的函數(shù)更易混淆。用模塊代替是最好的方法。使用模塊可以編寫：

let count = 0;export const id =() => { 
  ++this.count; 
  return `id_${count}` 
} 

上面代碼中，有相同的count聲明且導(dǎo)出了id函數(shù)，以供其他模塊使用。這像IIFE一樣，隱藏了count并暴露出我們想要的函數(shù)，但是嵌套較少，不需要定義另一個函數(shù)來運行它。

別名變量

同樣，寫如下內(nèi)容：

window.$ = function foo() { 
  // ... 
};(function($) { 
  // ... 
})(jQuery); 

使用模塊就可以編寫，為何還要僅為給變量創(chuàng)建別名而編寫IIFE?利用模塊，可以導(dǎo)入不同名稱的內(nèi)容。

你可以這樣為變量創(chuàng)建別名的編寫方式：

import { $ as jQuery } from"jquery";const $ = () => {}; 

此外，不要給窗口對象添加新屬性，這會影響全局作用域。

捕捉全局對象

使用globalThis，就不必?fù)?dān)心不同作用域中全局對象的名稱問題，它正在成為一種標(biāo)準(zhǔn)。無需再使用IIFE以捕獲全局對象，你可以在區(qū)域頂級編寫如下內(nèi)容：

(function(global) { 
  // ... 
})(this); 

甚至即使在“globalThis”之前，編寫如下內(nèi)容設(shè)置全局對象也不太難：

const globalObj = self || window|| global; 

或者如果想更精確，可以寫：

const getGlobal = () => { 
  if (typeof self !== 'undefined') {return self; } 
  if (typeof window !== 'undefined') {return window; } 
  if (typeof global !== 'undefined') {return global; } 
  throw new Error('unable to locateglobal object'); 
}; 

不必通過IIFE添加額外函數(shù)調(diào)用和引入嵌套。

優(yōu)化壓縮

應(yīng)用JavaScript模塊，就不必用IIFE隔離代碼，這可以適當(dāng)?shù)貕嚎s文件。

網(wǎng)絡(luò)包、瀏覽、包裹、匯總等(Webpack、Browserify、Parcel、Rollup等程序)，都可以正確處理模塊，為何不用這些程序來創(chuàng)建更清晰的代碼。

在代碼中編寫IIFE了已經(jīng)過時了，它還增加了額外的函數(shù)定義和嵌套。2020年，請選擇使用模塊和塊來分離代碼!