是时候停止使用JavaScript IIFE!

开发 前端
JavaScript语言中,IIFE代表立即调用函数表达式,它是一个定义后即刻执行的函数。为什么我说别再在代码中编写IIFE了?本文将给你答案。

本文转载自公众号“读芯术”(ID:AI_Discovery)

[[322118]]

JavaScript语言中,IIFE代表立即调用函数表达式,它是一个定义后即刻执行的函数。

为什么我说别再在代码中编写IIFE了?本文将给你答案。

可以在JavaScript中定义Block-Scoped 变量

以ES6作为标准发布,你可以使用let和const声明块级作用域的变量和常量。它还引入了独立块,可以将变量和常量隔离到外部无法使用的自身块中。

例如,可以写:

  1. { let x = 1;} 

那么x对外不可用。

这要比以下代码清晰许多:

  1. (()=>
  2.   let x = 1
  3. })(); 

现如今,几乎所有浏览器都支持ES6,停止使用IIFE能将变量从外部分离。

另一种隔离变量的方法是使用模块,它也得到广泛支持。只要不将其导出,其他模块就无法使用。

不再需要闭包

闭包是返回另一个函数的函数。返回的函数能够运行在其外部的代码,但内部的代码则由闭包函数运行。

例如,它可能会产生:

  1. const id = (() => { 
  2.   let count = 0
  3.   return () => { 
  4.     ++count; 
  5.     return `id_${count}`; 
  6.   }; 
  7. })(); 

而既有了块和模块以隔离数据,上述函数就变得更加复杂和不必要了。

可以将所有函数放入其自身模块,这样就不必担心暴露数据了,但这也会产生副作用。由于不是纯函数,很难对其进行测试。

在可以避免嵌套的时候,返回函数的函数也会引入嵌套,所以它比没有返回函数的函数更易混淆。用模块代替是最好的方法。使用模块可以编写:

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

上面代码中,有相同的count声明且导出了id函数,以供其他模块使用。这像IIFE一样,隐藏了count并暴露出我们想要的函数,但是嵌套较少,不需要定义另一个函数来运行它。

别名变量

同样,写如下内容:

  1. window.$ = function foo() { 
  2.   // ... 
  3. };(function($) { 
  4.   // ... 
  5. })(jQuery); 

使用模块就可以编写,为何还要仅为给变量创建别名而编写IIFE?利用模块,可以导入不同名称的内容。

你可以这样为变量创建别名的编写方式:

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

此外,不要给窗口对象添加新属性,这会影响全局作用域。

是时候停止使用JavaScript IIFE!

捕捉全局对象

使用globalThis,就不必担心不同作用域中全局对象的名称问题,它正在成为一种标准。无需再使用IIFE以捕获全局对象,你可以在区域顶级编写如下内容:

  1. (function(global) { 
  2.   // ... 
  3. })(this); 

甚至即使在“globalThis”之前,编写如下内容设置全局对象也不太难:

  1. const globalObj = self || window|| global; 

或者如果想更精确,可以写:

  1. const getGlobal = () => { 
  2.   if (typeof self !== 'undefined') {return self; } 
  3.   if (typeof window !== 'undefined') {return window; } 
  4.   if (typeof global !== 'undefined') {return global; } 
  5.   throw new Error('unable to locateglobal object'); 
  6. }; 

不必通过IIFE添加额外函数调用和引入嵌套。

优化压缩

应用JavaScript模块,就不必用IIFE隔离代码,这可以适当地压缩文件。

网络包、浏览、包裹、汇总等(Webpack、Browserify、Parcel、Rollup等程序),都可以正确处理模块,为何不用这些程序来创建更清晰的代码。

在代码中编写IIFE了已经过时了,它还增加了额外的函数定义和嵌套。2020年,请选择使用模块和块来分离代码!

责任编辑:赵宁宁 来源: 读芯术
相关推荐

2020-10-23 09:57:23

TypeScriptany代码

2013-09-22 17:08:37

RSA加密组件

2023-08-29 17:47:02

嵌套 if开发

2017-09-18 13:34:44

Facebook

2022-03-16 00:07:55

OAuth2授权框架

2020-07-15 10:32:34

5G网络华为

2020-12-28 14:22:33

GoogleChromiumWindows 7

2023-05-05 00:03:29

forEach函数开发

2023-02-24 09:38:22

UbuntuFlatpak

2012-09-19 15:30:59

2012-03-17 21:45:02

JavaScript

2023-10-19 15:25:40

2012-08-23 11:03:55

IE浏览器

2022-07-03 14:05:34

CopilotGitHub

2021-02-03 10:54:31

SolarWinds攻击黑客

2012-08-28 13:49:34

HTML5HTML5热点关注HTML5业界资讯

2023-10-04 07:25:59

JavaScriptpromises

2022-07-04 10:44:31

GitHubVUE VLOGOpenSea

2023-02-26 00:17:45

2022-12-31 19:20:15

JavaScriptstage 3装饰器
点赞
收藏

51CTO技术栈公众号