10

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. 必要に応じて、複数の「SlickGrid」をどのように初期化しますか？彼らはどれだけ共有し、どのように相互作用しますか？「コンストラクタ」関数に注意してくださいfunction SlickGrid(...) { // code }。

  4. このスタイルでのコーディングに関する本、リンク、およびその他のリソースは何ですか？誰がそれを発明したのですか？

ありがとう！♥</p>

4

5 に答える 5

9

これは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);

示したコードでは、これら2つのインスタンスが共有するのはscrollBarDimensions変数だけです。

于 2011-02-28T17:14:26.037 に答える
3 
(function($) { // code }(jQuery))

これは閉鎖です。それは基本的にその中のすべてを「//コード」の外のものから安全に保ちます。jQueryと$を渡しますが、知識が豊富な人は、なぜそれが必要なのかを説明する必要があります。

$.extend()

これは、2つのオブジェクトを取得してそれらをマージするjQuery関数です。最初のオブジェクト「window」を2番目のオブジェクト{Slick：{Grid：SlickGrid}}に置き換えます。これは、Grid：Nullのウィンドウオブジェクトがある場合、Grid：SlickGridと等しくなることを意味します。

最初のパラメーターとしてtrueを追加すると、ネストされたオブジェクトも置き換えられます。

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

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

これは、情報を格納するために多くのオブジェクトを使用している場合に役立ちます。

＃3の意味はわかりませんが、http：//960.gsで優れたグリッドシステムを確認してください。

JavaScripttheGoodPartsは素晴らしい本です。JohnResigによるProJavaScriptも、基本を超えた優れた本です。

于 2011-02-28T17:15:36.753 に答える
1

簡単に言えば、あなたの例の男は、ある種のjQueryプラグインを書いただけです...プラグインのコーディング方法に関するソースへの参照については、jquery.comのPLUGINSセクションを確認してください。それらはシンプルでわかりやすく、探索するのが楽しいものです。

于 2011-02-28T17:15:30.807 に答える
0

1）その関数は、JSファイルがロードされるとすぐに呼び出されます。jqueryインスタンスをパラメーターとして受け取り、内部で「$」として使用できるようにします。すべてのコードはその関数にカプセル化されているため（まだ宣言されていない変数の前にある変数を忘れない限り）、グローバル名前空間を汚染するものはありません。

2）2番目のオブジェクトのすべてのプロパティが1番目のオブジェクト（ここでは「ウィンドウ」）にコピーされます。これは、Webブラウザのグローバル名前空間オブジェクトでもあります。したがって、このコードはあまり意味がありません。カプセル化するふりをしますが、その逆です。$ .extendの2回目の呼び出しも、それほど意味がありません。それは間違いではありません、私はコードが「ふり」をしていると思います。

4）http://developer.yahoo.com/yui/theater/でダグラスクロックフォードのビデオをチェックすることを強くお勧めします。クロック フォードはJSの神であり、（真面目なJSプログラマーの間で）非常に有名です。聞く ：）

于 2011-02-28T17:13:08.537 に答える
0

最初の質問の場合、この構成は、jQueryが$関数を使用する可能性のある他のライブラリと共存できるようにする方法ですが、コードブロック内でjQueryを参照するために$を使用します。

パッケージ全体は$、パラメーターとしての関数呼び出しでラップされます。jQueryこれが実行されるときの唯一の「メイン」アクティビティは、引数としてその関数を呼び出すことです。これjQueryにより、ローカルパラメータへの既知のグローバルへの参照が与えられ、持つ可能性のある$グローバル値がマスクされます$。

于 2011-02-28T17:15:00.753 に答える