Question

在我的页面中，我有几个img标签如下：

<img class="img-fluid meeseks" src="img/meeseks_red.jpg" data-color="#ee5b61" />

在js文件中我创建了这个：

function Store(path,color){
    this.path=path
    this.color=color}

然后，开始编写代码，我写了这个：

img_path=[]
    for (var i=0;i<img.length;i++){
        img_path.push( new Store(img[i].getAttribute("src"),img[i].getAttribute("data-color")))
    }

获取存储每个图像的src和颜色的对象数组。

现在，在研究IIFE时，我写了这个似乎也有效：

(function store_inf(){
    img_path=[]
    for (var i=0;i<img.length;i++){
        img_path.push( new Store(img[i].getAttribute("src"),img[i].getAttribute("data-color")))
    }
    return img_path

})()

在这种情况下，哪种方式更好？我也注意到，如果我省略了返回的东西正常工作（如果我记录img_path数组，我总是有一个对象数组）

因此IIFE返回一个永久性的数组，即使在调用了IIFE之后，在全局范围内？感谢

Answer 1

您当前的代码有效，因为img_path实际上是全局，而您的IIFE是无用的。你可能会这样做：

var img_path=(function(){
var img=document.getElementByTagName("img");
var img_path=[];//now local
for (var i=0;i<img.length;i++){
    img_path.push( new Store(img[i].getAttribute("src"),img[i].getAttribute("data-color")))
}
return img_path
})()

现在有一个封闭的img_path和img数组以及一个全局的img_path。

请注意，您也可以这样做：

var img_path=document.querySelectorAll("img").values().map(el=>new Store(el.src,el.getAttribute("data-color")));

Answer 2

img_path全球化的原因与IIFE无关。它是全局的，因为您尚未使用var关键字声明它。未使用var（或const或let）声明的所有内容都将附加到全局范围，在您的情况下，它将附加到window对象。只需在IIFE（或非IIFE）代码版本之后尝试console.log(window.img_path)。

我建议你在js中开始使用use strict，因为它会指出更多“不明显”的错误。

Answer 3

你应该多关心分号，它们不是为了休闲，而是因为你需要它们。存在边缘情况，其中引入歧义而没有分号。也就是说，如果不以任何方式使用结果（作为参数或赋值），则不需要函数namen，也不需要返回任何内容。你也不需要存储函数，它实际上没有做太多，只需使用JS对象文字，如下所示。该函数也可以写成：

(function () {
  "use strict";

  var i, img_path;

  img_path = [];
  for (i = 0; i < img.length; i++)
  {
    img_path.push({
      "path": img[i]["src"],
      "color": img[i]["data-color"]
    });
  }

  // TODO: use img_path here because outside this function scope it does not exist
}());
// ^ better parens placement

有关如何编写干净代码并遵守开源JS样式的更多信息，请查看JSLint和类似工具。你会看到这样一个工具给你带来多少样式错误。

Answer 4

这里的IIFE并不是真正让你大吃一惊的部分。

在JavaScript中，您必须声明变量。如果你在浏览器中使用JS，并且你没有使用严格模式（你应该是，一旦你对语言有了更好的处理），你就会知道为什么会发生这些事情。

var x = 1;

function makeGlobalsHappen () {
  y = 2;
  var z = 4;
}

makeGlobalsHappen();
x; // 1
y; // 2
z; // ERROR! z is not defined

这与IIFE无关（其中我没有）。

我是ES5的选择加入严格模式，还是使用现代JS模块（严格按照设计）：

const x = 1;
const makeGlobals = () => {
  y = 2; // ERROR! y is undefined
  const z = 4;
};
makeGlobals(); // *BOOM*

了解IIFE

4 个答案: