这种设计模式在JavaScript/jQuery中被称为什么？

我正在查看JavaScript源代码以查找

我注意到slick.grid.js具有以下结构：

(function($) {
    // Slick.Grid
    $.extend(true, window, {
        Slick: {
            Grid: SlickGrid
        }
    });

    var scrollbarDimensions; // shared across all grids on this page

    ////////////////////////////////////////////////////////////////////////////
    // SlickGrid class implementation (available as Slick.Grid)

    /**
     * @param {Node}           container   Container node to create the grid in.
     * @param {Array,Object}   data        An array of objects for databinding.
     * @param {Array}          columns     An array of column definitions.
     * @param {Object}         options     Grid options.
     **/
    function SlickGrid(container,data,columns,options) {
        /// <summary>
        /// Create and manage virtual grid in the specified $container,
        /// connecting it to the specified data source. Data is presented
        /// as a grid with the specified columns and data.length rows.
        /// Options alter behaviour of the grid.
        /// </summary>

        // settings
        var defaults = {
            ...
        };

        ...

        // private
        var $container;

        ...


        ////////////////////////////////////////////////////////////////////////
        // Initialization

        function init() {
            /// <summary>
            /// Initialize 'this' (self) instance of a SlickGrid.
            /// This function is called by the constructor.
            /// </summary>

            $container = $(container);

            ...
        }

        ////////////////////////////////////////////////////////////////////////
        // Private & Public Functions, Getters/Setters, Interactivity, etc.
        function measureScrollbar() {
            ...
        }

        ////////////////////////////////////////////////////////////////////////
        // Public API

        $.extend(this, {
            "slickGridVersion": "2.0a1",

            // Events
            "onScroll":                     new Slick.Event(),

            ...

            // Methods
            "registerPlugin":               registerPlugin,

            ...

        });

        init();
    }
}(jQuery));

（函数（$）{
//光滑的网格
$.extend（真，窗口{
光滑的：{
网格：光滑网格
}
});
var scrollbarDimensions；//在该页面上的所有网格上共享
////////////////////////////////////////////////////////////////////////////
//SlickGrid类实现（作为Slick.Grid提供）
/**
*@param{Node}容器节点来创建网格。
*@param{Array，Object}data用于数据绑定的对象数组。
*@param{Array}columns列定义的数组。
*@param{Object}选项网格选项。
**/
函数网格（容器、数据、列、选项）{
/// 
///在指定的$container中创建和管理虚拟网格，
///正在将其连接到指定的数据源。将显示数据
///作为具有指定列和data.length行的网格。
///选项会改变网格的行为。
/// 
//背景
var默认值={
...
};
...
//私人的
var$容器；
...
////////////////////////////////////////////////////////////////////////
//初始化
函数init（）{
/// 
///初始化SlickGrid的“this”（self）实例。
///此函数由构造函数调用。
/// 
$container=$（container）；
...
}
////////////////////////////////////////////////////////////////////////
//私有和公共功能、getter/setter、交互性等。
函数measureScrollbar（）{
...
}
////////////////////////////////////////////////////////////////////////
//公共API
$。扩展（此{
“slickGridVersion”：“2.0a1”，
//事件
“onScroll”：新的Slick.Event（），
...
//方法
“registerPlugin”：registerPlugin，
...
});
init（）；
}
}（jQuery））；

为了简洁明了，省略了一些代码，但这应该能让您大致了解一下

以下内容的目的是什么：

（函数（$）{//code}（jQuery））这就是我所看到的模块模式吗？这是否意味着保持全局命名空间干净

$.extend（）

行是什么意思？：顶部的

$.extend（true，window，{//code}）

看起来与“名称空间”有关；什么是名称空间？它看起来像底部的

$.extend（这个，{//code}）用于公开“公共”成员和函数？如何定义私有函数或变量

如果需要，您将如何初始化多个“滑动网格”？他们会分享多少，如何互动？注意“构造函数”函数：

函数SlickGrid（…）{//code}

关于这种风格的编码有哪些书籍、链接和其他资源？是谁发明的

谢谢！♥

1）加载JS文件时立即调用该函数。它将jquery实例作为参数接收，并将其作为“$”在内部可用。所有代码都封装在该函数中，因此（除非您忘记了尚未声明的变量前面的var），没有任何东西会污染全局名称空间

2） 第二个对象的所有属性都复制到第一个对象（此处为“窗口”），这也是web浏览器中的全局命名空间对象。因此，这段代码没有多大意义。它假装是封装的，但做的恰恰相反。第二次调用$.extend也没有那么大意义。这没有错，我只是认为代码“假装”

4） 我非常建议您查看道格拉斯·克罗克福德（Douglas Crockford）的视频，网址为

---

Crockford是一个JS之神，非常有名（在严肃的JS程序员中）-而且听起来非常有趣：）

这是一个jQuery插件

（函数（$）{//code}（jQuery））

为您提供了一个新的函数作用域，因此您的名称不会被转储到全局作用域中。将jQuery作为$传递可以让您使用$速记，即使其他Javascript库使用$

$.extend

是将属性从一个对象复制到另一个对象的jQuery方法。第一个参数

true

意味着它应该是一个深度副本，而不是浅层副本。通过扩展

窗口

，将创建新的全局属性，在本例中为

Slick

底部的

$.extend（this，…）

位于大写的函数网格中

SlickGrid

将用作构造函数，在这种情况下，

此

将是新创建的对象，因此此

扩展

将向对象添加属性。他们实际上是公众成员。在这个代码示例中，

measureScrollbar

是私有的：它只对在这个函数中定义的代码可见，而不在它的外部

可以使用以下工具创建多个轴网：

var grid1 = new Slick.Grid(blah, blah);
var grid2 = new Slick.Grid(blah, blah);

---

在您展示的代码中，这两个实例将共享的唯一内容是

scrollBarDimensions

变量。

对于第一个问题，此构造允许jQuery与其他库共存，这些库可能使用$函数，但仍使用$在代码块中引用jQuery

整个包被包装在一个函数调用中，并以

$

作为参数。运行该函数时唯一的“主要”活动是以

jQuery

作为参数调用该函数，这将引用著名的全局

jQuery

到本地参数

$

，该参数掩盖了

$

可能具有的任何全局值。

简单地说，guy i

(function($) { // code }(jQuery))

$.extend()

var firstObj = { myObj:{
    first:this,
    second: {
        new: obj
    }
}}

$.extend(true, firstObj, {myObj:{second:{new:newer}}});