JavaScript による UMD 仕様の詳細な紹介 (コード付き)-jsチュートリアル-php.cn

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

不言

リリース： 2018-09-19 17:16:43

オリジナル

3397 人が閲覧しました

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

1. UMD 仕様

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

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

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

2.1 基本構造

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

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

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

ログイン後にコピー

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

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

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

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

(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 === &#39;function&#39; && 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(&#39;moduleName&#39;)的格式来引用模块，使用module.exports对象输出模块，所以只要把模块的输出内容挂载到module.exports上就完成了模块定义。
*/
(function (factory){
    //判断全局环境是否支持CommonJs标准
      if(typeof exports === &#39;object&#39; && typeof define !== &#39;function&#39;){
             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 仕様の詳細な紹介 (コード付き)