这有什么用？ Snap.svg.js 中对 var 的 IIFE 赋值

Question

我的自主 javascript 学习终于让我阅读了图书馆，在那里我找到了以下片段（t运行为简洁起见）。我在 windows apache 服务器 (xampp) 上使用带有 firebug 的 Firefox。

我认为下面的代码片段就足够了，但如果有人需要它，可以在此处找到整个库：snap.svg.js on github

var Snap = (function(root) {
Snap.version = "0.4.0";

function Snap(w, h) {              // can be either width, height OR 
 if (w) {
  if (w.nodeType) {                        // deterimines if parameter is a dom element
   return wrap(w);
  }
  if (is(w, "array") && Snap.set) {        // deterimines if parameter is an array
   return Snap.set.apply(Snap, w);
  }
  if (w instanceof Element) {              // deterimines if parameter is a Snap.Element
   return w;
  }
  if (h == null) {                         // by elimination determines if parameter is a dom element id.
   w = glob.doc.querySelector(String(w));
   return wrap(w);
  }
 }

<numerous public and private properties and methods> 
.
.
.
glob.win.Snap = Snap;
return Snap;
}(window || this));

Firebug 在实例化任何用户对象之前在 window 上下文中显示 Snap 对象。我想知道究竟是什么机制将 Snap 对象注入 DOM。那是我注意到 "var Snap" 的时候。最初，我以为就是这样。但是，因为当我更改变量名甚至删除它时它并没有破坏应用程序，所以我感到困惑。

进一步的调查导致生命底部的发现……具体来说，"glob.win.Snap = Snap"。由于 "window" 被传递到 iife，这似乎是在 window 中实际创建 Snap 对象的原因。将名称更改为 glob.win.Snappy 证实了这一点。

我还在学习中，如有错误请指正。我试图了解这个图书馆发生了什么。似乎函数 Snap() 正在通过 glob.win.Snap 赋值被注入到 window 上下文中。我没有看到顶部的 "var Snap" 或 "return Snap" 正在做任何事情。事实上，我可以删除它们并且一切似乎都运行良好。所以，我的第一个问题：这两行是否起到了我没有看到的某些功能？

第二个问题是："this" fallback 参数指的是什么？我对 Snap 的有限理解是它总是在 window 命名空间中使用，所以 "this" 不会总是 window?

就在我认为我开始将范式从经典语言转变为原型语言时，我运行像这样跨过代码，这让我退缩了。我真的很感激一些见解。

Answer 1

我看了参考的源代码，这里有一个更精简的版本：

var Snap = (function(root) {
    Snap.version = "0.4.0";

    function Snap(w, h) {}

    var glob = {
        win: root.window,
        doc: root.window.document
    };

    ...

    glob.win.Snap = Snap;
    return Snap;
}(window || this));

Snap.plugin(...);

It seems that the function Snap() is being injected to the window context via the glob.win.Snap assignment. I don't see that the "var Snap" at the top or the "return Snap" are doing anything.

你是对的，var Snap = ...; 的声明和通过 return Snap; 的赋值是多余的，因为该变量存在于全局范围内（即 Window 对象）并且已经被声明通过 glob.win.Snap = Snap;

我假设他们只是保留了那个 var 声明，因为它在使用 class 模式时几乎是标准的：

var MyClass = (function() {
    function MyClass(n) {}
    return MyClass;
})();

A secondary question is: What does the "this" fallback parameter refer to? My limited understanding of Snap is that it is always used within the window namespace so wouldn't "this" always be the window?

在某些 JavaScript 环境中，根对象不被称为 window（例如 node.js 中的 global）。 window || this 将计算根对象，不管它叫什么。

你会经常在 JavaScript 模块中看到这样的依赖注入。有关更多信息，请参阅 https://carldanley.com/js-module-pattern/。

但是，如果由于 var glob = { win: root.window, ... } 赋值而没有 window 对象可用，则该库似乎不会运行。他们可能只是将 this 保留在那里，因为它是标准模块模式的一部分。

这有什么用？ Snap.svg.js 中对 var 的 IIFE 赋值

What purpose does this serve? IIFE assignment to var in Snap.svg.js

javascript

iife

snap.svg