标签: iife

我想了解是否有任何区别:

(function($){

...

})(jQuery);

与

(function($){

...

})($);

注意jQuery被替换为$.这个可以吗？它不能在任何地方使用,因为它无法工作？它可以工作,但也许是非标准的？有人可以解释一下这是错误还是可以？谢谢

我正在研究Immediatly Invoked Function Expressions(IIFE)的行为,在这样做时我遇到了以下情况.

(function () {
    document.write("bar");
})

(function () {
    document.write("foo");
}());

我认为第一个只是一个分组运算符,里面有一个函数表达式而不调用它.第二个是分组运算符以及函数表达式,但现在调用该函数.

我觉得奇怪的是两者都被调用了,为什么呢？

(function () {
    document.write("bar");
})

var x = 1;

(function () {
    document.write("foo");
}());

当我通过在两者之间插入变量声明来打破这两个时,它只是写foo.这是我的预期.

output我的只有一项rollup.config.js：

export default {
  input: './src/Index.tsx',
  output: {
    dir: './myBundle/bundle',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    typescript(),
    nodeResolve(),
    commonjs(),
    babel(),
    json(),
    terser(),
  ],
};

为什么 Rollup 指责我进行代码分割？ [!] Error: UMD and IIFE output formats are not supported for code-splitting builds.

在以下构造中:

(function(){

    var x = function(){
        alert('hi!');
    }

    var y = function(){
        alert("hi again!");
    }

    this.show = function(){
        alert("This is show function!");
    }

})();

为什么要this引用window对象？IIFE中的所有内容是否应与全球范围隔离？是x和y函数也是window全局对象的属性？

而且,即使我var h = ...在开头使用put :

var h = (function(){

    var x = function(){
        alert('hi!');
    }

    var y = function(){
        alert("hi again!");
    }

    this.show = function(){
        alert("This is show function!");
    }

})();

this仍然指的是窗口对象 - 我可以show()从全局范围调用!怎么会？

我正在浏览引导程序JS源代码,我遇到了一些我以前没见过的东西:

+function ($) { "use strict";
//...
}(window.jQuery);

函数声明前面的+处理是什么？是否可以缓解一些潜在的缩小问题？

我相信在表达式类型之前放置一个+会将表达式的结果转换为数字,但我不知道它的相关性是什么.

感谢任何能为我揭示这一点的人.

我在我的控制器中指定了一个函数,如下所示:

$scope.myFunction = function(){ console.log('test'); }

我希望在更改选择框时触发此功能.因此,我对select元素应用ng-change,如下所示:

 <select ng-options="..." ng-model="..." ng-change="myFunction();"></select>

但我也想在我的页面加载时触发myFunction函数.所以我想把我的功能变成IIFE:

($scope.myFunction = function(){ console.log('test'); }());

但是,现在该功能仅在页面加载时触发,而不是由ng-change触发.我注意到当我更改括号时,该函数也会被ng-change触发:

($scope.myFunction = function(){ console.log('test'); })();

有人可以解释为什么这甚至重要吗？

非常感谢!

创建模块的常见做法是将它们包装在parens中,这样就不会泄漏模块外的任何变量(连接时等).

还有voidoperator,它计算给定的表达式并返回undefined.(见MDN)

我想知道在parens中使用包装函数而不是使用包装函数的原因是什么void.它是历史的,是否与连接有关？

我知道,当其中一个文件缺少分号时,你可能会遇到连接问题,直到你注意到它为止会导致令人讨厌的问题.

例子

说,module1.js(注意缺少的逗号):

(function () {
    return function () {
        console.log('module1. I should not be called');
    };
})()

和,module2.js:

(function () {
    return function () {
        console.log('module2. I should not be called either');
    };
})();

如果将这些脚本连成一个包,它将产生以下结果:

(function () {
    return function () {
        console.log('module1. I should not be called');
    };
})()(function () {
    return function () {
        console.log('module2. I should not be called either');
    };
})();

由于两个模块(文件)都返回一个函数,所以第二个假定的IIFE成为第一个模块的 …

显然,ES6不需要命名空间,因为每个文件都是一个单独的模块.

但是,如何避免全局命名空间干扰？

例如,巴贝尔编译我scripts/main.js仅仅通过替换文件const用var.

var alert = 'This line doesn\'t do anything.'
window.alert(alert)

ANS使用IIFE的命名空间(如下所示)可防止名称冲突:

const ANS = (function () {
  const alert = 'This works'
  window.alert(alert + '.')
  return {alert: alert + ' too.'}
})()
alert(ANS.alert)

向命名空间添加属性ANS比将它们添加到全局命名空间更简洁window,或this.而且,IIFE提供了进一步的封装.

那么,不是第二种方式,即用IIFE创建自定义命名空间,比第一种更好吗？如果是这样,在ES2015中有更新/更好的方法吗？Babel为什么不为我这样做？

对于具有旧版应用程序的某些库代码，我具有IIFE函数，这些代码需要适用于IE10 +（无需加载ES6模块等）。

但是，我开始开发一个将使用ES6和TypeScript的React应用，并且我想重用我已经拥有的代码而不复制文件。经过一番研究，我发现我想使用UMD模式来允许这些库文件既可以用作<script src=*>导入，又可以让React应用通过ES6模块加载来导入它们。

我想出了以下转换：

var Utils = (function(){
  var self = {
    MyFunction: function(){
      console.log("MyFunction");
    }
  };
  return self;
})();

至

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (factory((global.Utils = {})));
}(this, (function (exports) { 
  exports.MyFunction = function(){
      console.log("MyFunction");
    };
})));

这将允许通过Import Utils from './Utils.js'命令加载，也可以使用脚本标签将其插入<script src='Utils.js'></script>

但是，我的某些IIFE使用其他IIFE作为依赖项（我知道这很糟糕，但是是现实）。

var Utils = Utils; // Used …

背景: 我有一个自学成才的爱好者对C++的理解水平,已经转化为对javascript的类似理解.为了更好地理解javascript,我决定编写一个Greasemonkey脚本来解决Google如何处理来自同一域的多个结果的问题.

我写了我的剧本,这简直太容易了.现在我觉得这个脚本对其他人有用,所以我想发布它.在我这样做之前,我想确定我不会发布不负责任的代码.

我知道糟糕的垃圾收集通常被认为是扩展的问题,并做了一些研究,我需要在javascript中做什么来防止这种情况.似乎答案是当函数退出时,函数中包含的任何内存都将被回收.这似乎解释了为什么我看到的一些流行脚本被包含在一个无用的功能中.

这引出了我这些问题:

1. 我应该怎么做我的基本javascript函数,以确保它不会泄漏内存？

2. 这是我在许多脚本中看到的答案:

   (function(){  
       //code goes here    
   })();
   

   Run Code Online (Sandbox Code Playgroud)

3. 在上面的代码中,第一个括号的目的是什么？这对我来说似乎是多余的.

4. 当我试图理解这一行时,我把它重写为:

   (function main(){  
       //code goes here  
   })   
   main();  
   

   Run Code Online (Sandbox Code Playgroud)

这个想法是,这只是调用以前未命名的功能.这不起作用,为什么？

我对一般答案更感兴趣,但如果需要这里是我目前的代码:http: //pastebin.com/qQWKfnJT