17

多くのライブラリがこのスタイルを使用してライブラリを定義していることに気付きました。また、最初の自己呼び出し関数が Require.js または AMD システムと関係があることにも気付きました。これらは常に引数として factory を持っています。Require.js をさらに調べ、常に Browserify を調べます。

括弧内の最初の自己呼び出し関数の最後にメイン コードが渡されるのはなぜですか。これはクロージャーなのか、それとも単に無名関数と見なされるのか、両方について詳しく説明します。これにはどのような利点がありますか？stringクロージャー内で作者が a 、this、および aを渡しているように見えますcallback。

これにより、以下の例のメイン オブジェクトをグローバル化するクリーンで安全な方法がライブラリに提供されますPleaseか?

(function( globalName, root, factory ) {
    if ( typeof define === 'function' && define.amd ) {
        define( [], factory );
    }
    else if ( typeof exports === 'object' ) {
        module.exports = factory();
    }
    else{
        root[globalName] = factory();
    }
}('Please', this, function(){

私は JavaScript を深く掘り下げて、独自の小さな MVC アーキテクチャを作成しようとしています。自分が愚かだとか、以前にやったことがあるとは聞きたくありません。自分自身に挑戦して学びたいと思っています。

JavaScript ライブラリまたはさらに優れた MVC ライブラリを作成するための優れたリソースがあれば、ぜひ知りたいです。

4

2 に答える 2

15

このコード パターンは、ユニバーサル モジュール定義(UMD) と呼ばれます。これにより、JavaScript ライブラリをさまざまな環境で使用できるようになります。モジュールを定義する 3 つの方法を提供します。

  1. RequireJSおよびDojo Toolkitによって実装されるAsynchronous Module Definition (AMD) 。

    define( [], factory );

  2. CommonJS — NodeJS モジュール。

    module.exports = factory();

  3. windowブラウザなどで、モジュールをグローバル オブジェクトに割り当てます。

    root[globalName] = factory();

globalNameIIFE には、rootおよびの 3 つのパラメータがありfactoryます。

  • globalNameモジュールの名前です。これは、モジュールを定義する 3 番目の方法、つまりモジュール オブジェクトをグローバル変数に割り当てる方法にのみ適用されます。たとえば、このパラメーターを に設定し"myAwesomeModule"、ブラウザー (AMD なし) でコードを使用すると、myAwesomeModule変数を使用してモジュールにアクセスできます。
  • rootグローバルオブジェクトの名前です。明らかに、モジュールを定義する 3 番目の方法にも適用されます。はブラウザーでの参照であるため、通常thisはこのパラメーターとして渡されます。ただし、これは strict モードでは機能しません。コードを厳密モードで動作させたい場合は、 に置き換えることができます。thiswindowthistypeof window !== "undefined" ? window : undefined
  • 最後に、factoryモジュールをオブジェクトとして返す無名関数です。

以下も参照してください。

于 2016-01-19T00:33:52.713 に答える
11

これはUniversal Module Definition (UMD) の例です。これは、JS モジュールを 3 つの一般的な JS モジュール仕様と互換性を持たせる手法です。

  1. 非同期モジュール定義(AMD、Require.js で使用)

    define('name', [ /* dependencies */ ], factory);

  2. CommonJS (Node.js エコシステム)

    module.exports = object;

  3. グローバル エクスポート (たとえば、windowブラウザで)

    global['name'] = object;

UMD は、エクスポートするオブジェクトの作成を担当するファクトリ関数をラップし、貼り付けたスニペットのように、すぐに呼び出される関数式(IIFE) に引数として渡します。IIFE は、モジュール環境を検出し、ファクトリによって作成されたオブジェクトを適切な方法でエクスポートする責任があります。パターンは次のとおりです。

(function (name, root, factory) {
   // detect the module environment and
   // export the result of factory()
})('name', this, function () {
   // module code
   // return the object to be exported
});

多くのトランスパイラとビルド ツールは、このラッパーを自動的に生成します。

于 2016-01-19T00:37:56.083 に答える