Question

我的自我指导的javascript研究最终导致我阅读库，在那里我找到了以下代码段（为简洁而截断）。我在Windows apache服务器（xampp）上使用带有firebug的Firefox。

我认为下面的代码段就足够了，但如果有人需要，可以在这里找到整个图书馆：snap.svg.js on github

＆＃13;

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));

＆＃13;

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

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

我还在学习，如果我错了，请纠正我。我试图了解这个库发生了什么。似乎函数Snap（）通过glob.win.Snap赋值注入窗口上下文。我没有看到＆＃34; var Snap＆＃34;在顶部或＆＃34;返回Snap＆＃34;正在做任何事情。事实上，我可以把它们拿出去，一切似乎都很好。所以，我的第一个问题是：这两行是否具有一些我没有看到的功能？

第二个问题是：＆＃34;这是什么＆＃34;后备参数是指？我对Snap的有限理解是它总是在窗口命名空间中使用，所以不会这样做＃34;这个＆＃34;永远是窗口？

当我认为我开始将范式从古典语言转换为原型语言时，我遇到了像这样的代码，它让我回头。我非常欣赏一些见解。

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(...);

似乎函数Snap（）正在注入窗口通过glob.win.Snap赋值的上下文。我没有看到“var Snap“在顶部或”返回Snap“正在做任何事情。

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

我认为他们只是保留了var声明，因为它在使用类模式时非常标准：

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

第二个问题是：“this”回退参数是指什么至？我对Snap的有限理解是它总是在内部使用窗口命名空间所以“this”不会一直是窗口吗？

在某些JavaScript环境中，根对象不会被称为window（例如node.js中的global）。 window || this将评估根对象，无论它被称为什么。

您将在JavaScript模块中经常看到此类依赖注入。有关详情，请参阅https://carldanley.com/js-module-pattern/。

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

这有什么用途？ IIFE分配给Snap.svg.js中的var

1 个答案: