是时候停止使用JavaScript IIFE！

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

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

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

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

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

例如，可以写：

 
 
 
   
  
  
  { let x = 1;}

那么x对外不可用。

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

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

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

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

不再需要闭包

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

例如，它可能会产生：

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

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

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

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

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

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

别名变量

同样，写如下内容：

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

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

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

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

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

捕捉全局对象

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

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

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

 
 
 
   
  
  
  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添加额外函数调用和引入嵌套。

优化压缩

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

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

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

分享标题：是时候停止使用JavaScript IIFE！
转载来于：http://www.hantingmc.com/qtweb/news31/443081.html

成都网站建设公司_创新互联，为您提供营销型网站建设、网站策划、微信公众号、做网站、网页设计公司、网站设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容