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

Question

我正在查看 SlickGrid 的 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));

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

1. 下面的目的是什么:(function($) {//code }(jQuery)); 这是我看到的模块模式吗？这是为了保持全局命名空间的清洁吗？

2. $.extend() 行是什么意思？:最上面的 $.extend(true, window, {//code }); 看起来就像它与“命名空间”有关；什么是命名空间？看起来底部的 $.extend(this, {//code }); 是用来暴露“公共(public)”成员和函数的？您将如何定义私有(private)函数或变量？

3. 如果需要，您将如何初始化多个“SlickGrids”？他们会分享多少以及他们将如何互动？注意“构造函数”函数:function SlickGrid(...) {//code }。

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

谢谢! ♥

Answer 1

这是一个 jQuery 插件。

(function($) {//code }(jQuery)); 为您提供了一个新的函数作用域，因此您的名称不会转储到全局作用域中。将 jQuery 作为 $ 传递允许您使用 $ 速记，即使其他 Javascript 库使用 $。

$.extend 是一种将属性从一个对象复制到另一个对象的 jQuery 方法。第一个参数 true 意味着它应该是深拷贝而不是浅拷贝。通过扩展 window，创建了新的全局属性，在本例中为 Slick。

最下面的$.extend(this,...)是一个大写的函数SlickGrid。 SlickGrid 旨在用作构造函数，在这种情况下 this 将是新创建的对象，因此此 extend 将属性添加到物体。他们实际上是公共(public)成员。在此代码示例中，measureScrollbar 是私有(private)的:它仅对该函数中定义的代码可见，外部不可见。

您可以创建多个网格:

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

在您显示的代码中，这两个实例唯一共享的是 scrollBarDimensions 变量。