标签: iife

我有一个有很多.js文件的角度应用程序.向每个文件添加一个IIFE然后添加是很无聊的'use strict'.

有没有办法自动化这个？我用gulp来运行任务.

在ES5中,编写此类代码被认为是一种很好的做法:

(function () {
    //some magic
})();

但是在使用let关键字创建的ES6变量中没有附加到window对象.

那么,现在是否需要在IIFE中编写我们的代码,或者它仍然有一些我没有听说过的目的？

让我们看两个例子,我将尝试解释我想要理解的内容.

var Car = function(){
  // Init class
  function Car() { };
  // Private func/vars
  var private = { color:'red' };
  // Public func/vars
  Car.prototype = {
    newColor: function(color) { private.color = color },
    getColor: function() { return private.color }
  };

  return Car.prototype; // return with prototype
};

var myCar = new Car();

和:

var Car = (function(){
  // Init class
  function Car() { };
  // Private func/vars
  var private = { color:'red' };
  // Public func/vars
  Car.prototype = { …

我的团队没有任何经验丰富的JS开发人员,但是我们正在Node编写一个库,并得到了一个真正的JS开发人员的建议:"我们应该使js更加模块化 - 不要污染全局命名空间并使其更具可读性对新人说,"并告诉我们做以下事情:

module.exports = (function(){
      return {
         nameToExpose: functionToExpose
         ...
    };
})();

而不是

module.exports.nameToExpose = functionToExpose;

有什么意义,如果有的话？后者不会制作任何本地声明,这些声明将由IIFE确定,即使它确实如此,它们将是模块文件的本地声明,而不是整个程序的全局声明require().

关于这个网站的一些谷歌搜索和挖掘并没有找到关于这个特定问题的任何答案,尽管我已经读过很多其他IIFE的解释(并且在上面的评论中总结了这些解释).一些测试肯定会发现后者实际上没有放入functionToExpose全局命名空间,尽管它的原始名称记录在函数类型本身中.

这是一个TypeScript类：

class Greeter {
    public static what(): string {
        return "Greater";
    }

    public subject: string;

    constructor(subject: string) {
        this.subject = subject;
    }

    public greet(): string {
        return "Hello, " + this.subject;
    }
}

当TS针对ES5时，将其转换为IIFE：

var Greeter = /** @class */ (function () {
    function Greeter(subject) {
        this.subject = subject;
    }
    Greeter.what = function () {
        return "Greater";
    };
    Greeter.prototype.greet = function () {
        return "Hello, " + this.subject;
    };
    return Greeter;
}());

但是，通常将其作为构造函数呈现时，其工作方式相同。当然，它看起来更像JavaScript和手写的:)

function Greeter(subject) {
    this.subject = subject;
} …

我看到下面有人发布的代码。我对它记录的内容感到困惑。它记录变量a函数，而不是200。为什么？

var a = 1;
(function a() {
  a = 200;
  console.log(a)
})()

Stoyan Stefanov在JavasScript Patterns中说:"你需要一个直接的函数来将所有代码包装在其本地范围内,而不是将任何变量泄漏到全局范围"第70页.

这是他的榜样

(function() {
    var days = ['Sun','Mon'];
    // ...
    // ...
    alert(msg);
}());

但肯定是因为天被定义为var,它只是功能范围？立即函数的唯一好处是立即调用函数.没有范围优势.Corrcet？

在JS代码中使用命名IIFE来描述和分组相关代码的利弊是什么？

我一直在使用这个"模式"来为我的更多程序代码提供结构,这些代码只能在一个地方执行.

例

(function hideStuffOnInstantiaton(){
    $('oneThing').hide().removeClass();
    $('#somethign_else').slideUp();
    $('.foo').fadeOut();
}());

我觉得这比两者都好:

// hide Stuff on Instantiaton
$('oneThing').hide().removeClass();
$('#somethign_else').slideUp();
$('.foo').fadeOut();

因为随着时间的推移,评论可能会与代码分开,而且评论所适用的行不是很明显

并:

function hideStuffOnInstantiaton(){
    $('oneThing').hide().removeClass();
    $('#somethign_else').slideUp();
    $('.foo').fadeOut();
};

hideStuffOnInstantiaton();

因为如果它只在一个地方执行,为什么要分开函数及其执行？

使用此模式时是否存在任何性能,可维护性,可测试性或跨浏览器注意事项？我不相信我已经看到很多人在野外使用它但我觉得它可能非常有用

以下TypeScript:

enum PrimaryColors { Red, Green, Blue };

生成以下JavaScript:

var PrimaryColors;
(function (PrimaryColors) {
    PrimaryColors[PrimaryColors["Red"] = 0] = "Red";
    PrimaryColors[PrimaryColors["Green"] = 1] = "Green";
    PrimaryColors[PrimaryColors["Blue"] = 2] = "Blue";
})(PrimaryColors || (PrimaryColors = {}));
;

我很尴尬地承认我不明白JavaScript在做什么.
括号中的函数使用另一个赋值作为索引/键来分配字符串值.我之前没见过这样的东西.
那个函数后面的(PrimaryColors ||(PrimaryColors = {})的目的是什么？
如果答案是正确学习JavaScript,我会很乐意接受它,只要它附带一个明确解释我所看到的内容的建议来源这里.

我正在阅读JavaScript IIFE和迄今为止的理解概念,但我想知道外部括号.具体来说,他们为什么需要？例如,

(function() {var msg='I love JavaScript'; console.log(msg);}());

效果很好,但是

function() {var msg='I love JavaScript'; console.log(msg);}();

生成语法错误.为什么？关于IIFE的讨论很多,但我没有看到为什么需要括号的明确解释.