JavaScript による UMD 仕様の詳細な紹介 (コード付き)

この記事では、JavaScript での UMD 仕様について詳しく説明します (コード付き)。必要な方は参考にしていただければ幸いです。

1. UMD 仕様

アドレス: https://github.com/umdjs/umd

UMD 仕様はすべての仕様の中で最も醜い仕様です。 ！ ！これにより、モジュールが AMD と CommonJs の両方の仕様と互換性を持つようになるため、ブラウザ側とサーバー側の両方の参照をサポートする必要がある一部のサードパーティ ライブラリで主に使用されます。 UMD も時代の産物であり、様々な環境が ES ハーモニーの統一仕様を実現する時、それもまた歴史の舞台から退くことになります。

UMD 仕様の構造は一見すると非常に複雑ですが、その主な理由は、このパラダイムを理解するには JavaScript の基本的な知識が必要であるためです。その基本構造は次のとおりです。コード パラダイムの推論

2.1 基本構造

最初に最も外側の構造を見てみましょう:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    方法
    function a(){};    //    私有方法，因为它没被返回 (见下面)
    function b(){};    //    公共方法，因为被返回了
    function c(){};    //    公共方法，因为被返回了

    //    暴露公共方法
    return {
        b: b,
        c: c
    }
}));

これは非常に単純で、自己実行関数です。これはモジュール標準であるため、この自己実行関数は最終的にモジュール

をエクスポートできることを意味します。コードの観点から見ると、実際には次の 2 つの一般的な実装方法があります。

returnモジュールを返します。

1. ##実際のパラメータはオブジェクトに渡され、関数内で生成され、エクスポートする必要があるものはこのオブジェクトのプロパティに設定されます。

#上記の関数本体内に return 文がないことがわかります。したがって、UMD は実装時に 2 番目の方法を採用していると推測できます。 UMD はモジュール仕様であるため、その機能は使用要件に従ってモジュールを生成することです。つまり、その役割はモジュール ファクトリと呼ばれます。ファクトリ メソッドを定義でき、このメソッドが実行されるたびにモジュールが定義され、その基本構造が決まります。

2. (function (){}());

   つまり、匿名関数をカスタマイズし、それを実際のパラメータとして自己実行関数に渡し、メソッド内で実行します。このファクトリ メソッドは、形式的なメソッドを通じてアクセスされます。関数内のパラメータ (または、コールバック関数またはコールバックの方が詳しいでしょう) はグローバル オブジェクトにハングされるだけで、基本的なモジュールのエクスポートが完了します。

場合によっては、モジュールを非グローバル環境にマウントすることによって、コードをより柔軟にすることができます。これには、ブラウザ環境に関する基本的な知識が必要です。ページに「iframe」を埋め込んだ後に導入された新しい Window オブジェクトを追跡するための 3 つの属性があります。単一ページの Window.self は、self が含まれているかどうかによってコード内で識別されることがよくあります。グローバル オブジェクトなので、ここでの記述方法は互換性があるように改善できます:

(function (factory){
    //假设没有使用任何模块化方案，那么将工厂函数执行后返回的内容直接挂载到全局
    window.Some_Attr = factory（）;
}(function(){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

2.2 AMD への適応

次に、まず AMD の標準適応、標準アドレス: AMD 標準 github アドレス: を追加しましょう。

(function(root,factory){
    root.Some_Attr = factory();
}(self !== undefined ? self : this, function(){
    
}));

2.3 CommonJs の適応

次に、最初に

CommonJs

の標準適応を追加しましょう。

/*
* AMD规范的模块定义格式是define(id?, dependencies?, factory),factory就是实际的模块内容
*/
(function (factory){
    //判断全局环境是否支持AMD标准
    if(typeof define === 'function' && define.amd){
        //定义一个AMD模块
        define([/*denpendencies*/],factory);
    }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

適応を

CommonJs## に追加します。 # の適応、関数本体の戻り内容 (通常はオブジェクト) は

module.exports にマウントされます。 node.js

コードを記述した場合、これは確実にそうではありません。馴染みがないこと。

上記の断片をまとめてみると、UMD がどのようなものかを理解できるでしょう。 3. よりターゲットを絞った UMD パラダイム

UMD は、さまざまなシナリオに適した、よりターゲットを絞ったパラダイムを提供しています。興味のある読者はご自身で確認してください (アドレスが示されています)。セクション1)。

ここに jqueryPlugin 開発パラダイムを投稿します。これは、ほとんどの開発者にとってより役立つと思われます。上記の分析を理解していれば、次のコードを理解するのは難しくないはずです。

/*
* CommonJs规范使用require('moduleName')的格式来引用模块，使用module.exports对象输出模块，所以只要把模块的输出内容挂载到module.exports上就完成了模块定义。
*/
(function (factory){
    //判断全局环境是否支持CommonJs标准
      if(typeof exports === 'object' && typeof define !== 'function'){
             module.exports = factory(/*require(moduleA), require(moduleB)*/);
      }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

4モジュール開発

フロントエンドのモジュール化自体は、最初は require() と require.js について混乱していましたが、フロントエンド開発ではモジュール化は非常に重要です。一生 1 ページにコードを書き続けるだけの場合は、このレベルに合格する必要があります。興味のある読者は、以下の基本的なカテゴリに従って学習してください。

以上がJavaScript による UMD 仕様の詳細な紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。