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 });用于暴露"公共"成员和功能？你会如何定义私有函数或变量？

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是向对象添加属性.他们实际上是公共成员.在此代码示例中,measureScrollbar它是私有的:它只对此函数中定义的代码可见,而不是在其外部.

您可以使用以下命令创建多个网格:

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

在您展示的代码中,这两个实例将共享的唯一内容是scrollBarDimensions变量.