1 モジュール型プログラミングとは

2 モジュール型である必要がある理由

3 AMD

4 CommonJS

5 概要

テクノロジーを理解するには、まずテクノロジーの背景とそれが解決する問(wèn)題を理解する必要がありますではなく、使い方を知るだけで十分です。以前の狀態(tài)は実際の原因やメリットを知らずに、ただ理解するだけだったかもしれないので、今日はそれをまとめてみましょう。

1 機(jī)能を決定し、これらのモジュール間に必要な接続を確立し、モジュールの相互協(xié)力によって全體の機(jī)能を完成させます。

例えば、Javaのインポート、C#の使用。私の理解では、モジュール式プログラミングにより、さまざまな機(jī)能を分離でき、1 つの機(jī)能を変更しても他の機(jī)能に影響を與えることはありません。

2 なぜモジュール化するのか

次の例を見(jiàn)てみましょう

// A.jsfunction sayWord(type){
    if(type === 1){
        console.log("hello");
    }else if(type === 2){
        console.log("world");
    }
}// B.jsfunction Hello(){
    sayWord(1);
}// C.jsHello()

上記 3 つのファイルのうち、B.js は A.js のコンテンツを參照し、C.js は B.js のコンテンツを參照するとします。 . C.js の人が B.js を參照することしか知らない場(chǎng)合、と書(shū)くと、A.js を參照しないため、プログラム エラーが発生し、ファイルの參照順序が間違っているはずがありません。コード全體のデバッグや変更に不便をもたらします。

別の問(wèn)題があります。上記のコードは 2 つのグローバル変數(shù)を公開(kāi)しており、

3 AMD

AMD は非同期モジュール定義です。モジュールは非同期でロードされます。モジュールのロードは、後続のステートメントの実行には影響しません。

次の狀況を想定します

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return '2018-08-9'
            }            if(type === 2){                return '2018 年 8 月 9 日'
            }
        }
    }
})// a-util.jsdefine(['./util.js'],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine(['./a-util.js'],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})
console.log(1);// 使用// <script src = "/require.min.js" data-main="./main.js"></script>

1 が最初にページに印刷され、次に August 9, 2018 が印刷されます。したがって、AMD のロードは、後続のステートメントの実行には影響しません。

非同期でロードされない場(chǎng)合はどうなりますか

var a = require('a');
console.log(1)

以下のステートメントは、実行する前にロードされるまで待つ必要があります。ロード時(shí)間が長(zhǎng)すぎると、プログラム全體がここで停止します。したがって、ブラウザはリソースを同期的に読み込むことができません。これが AMD の背景でもあります。

AMDはブラウザ側(cè)でのモジュール開(kāi)発のための仕様です。この仕様はもともとJavaScriptではサポートされていないため、AMD仕様を使用して開(kāi)発する場(chǎng)合はサードパーティのライブラリ関數(shù)、つまりRequireJSを?qū)毪工氡匾ⅳ辘蓼埂?1，然后才會(huì)打印 2018 年 8 月 9 日。因此 AMD 的加載并不會(huì)影響后續(xù)的語(yǔ)句執(zhí)行。

如果不是異步加載會(huì)出現(xiàn)什么情況呢

// ? 代表該參數(shù)可選
    define(id?, dependencies?, factory);

后面的語(yǔ)句需要等待 a 加載完成才能執(zhí)行，如果加載時(shí)間過(guò)長(zhǎng)，整個(gè)程序都會(huì)卡在這。因此，瀏覽器不能同步加載資源，這也是 AMD 的產(chǎn)生背景。

AMD 是在瀏覽器端實(shí)現(xiàn)模塊化開(kāi)發(fā)的規(guī)范。由于該規(guī)范不是 JavaScript 原始支持的，使用 AMD 規(guī)范進(jìn)行開(kāi)發(fā)的時(shí)候需要引入第三方的庫(kù)函數(shù)，也就是 RequireJS。

RequireJS 主要解決的問(wèn)題

• 使 JS 異步加載，避免頁(yè)面失去響應(yīng)

• 管理代碼之間的依賴(lài)性，有利于代碼的編寫(xiě)和維護(hù)

下面來(lái)看看如何使用 require.js

要想使用 require.js，首先要 define

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();           //Or:
           return require("beta").verb();
       }
   });

• id：指的是定義的模塊的名字

• dependencies：是定義的模塊所依賴(lài)模塊的數(shù)組

• factory：為模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值。

  具體的規(guī)范說(shuō)明可以參考 AMD (中文版)
  舉個(gè)例子，創(chuàng)建一個(gè)名為 “alpha” 的模塊，使用了 require，exports，和名為 “beta” 的模塊:

define(["alpha"], function (alpha) {
       return {
         verb: function(){
           return alpha.verb() + 2;
         }
       };
   });

一個(gè)返回對(duì)象的匿名模塊：

define({
     add: function(x, y){
       return x + y;
     }
   });

一個(gè)沒(méi)有依賴(lài)性的模塊可以直接定義對(duì)象：

require([module],callback);

如何使用

AMD 采用 require 語(yǔ)句加載模塊

require(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})

• module：是一個(gè)數(shù)組，里面的成員是要加載的模塊

• callback：加載成功之后的回調(diào)函數(shù)

例如

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return '2018-08-09'
            }            if(type === 2){                return '2018 年 8 月 9 日'
            }
        }
    }
})// a-util.jsdefine(['./util.js'],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine(['./a-util.js'],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})// 使用// 

具體的使用方法如下

require.config({
    paths:{        "a":"src/a.js",        "b":"src/b.js"
    }
})

假設(shè)這里有 4 個(gè)文件，util.js，a-util.js 引用了 util.js，a.js 引用了 a-util.js，main.js 引用了 a.js。

其中，data-main 屬性的作用是加載網(wǎng)頁(yè)程序的主模塊。

上例演示了一個(gè)主模塊最簡(jiǎn)單的寫(xiě)法，默認(rèn)情況下，require.js 假設(shè)依賴(lài)和主模塊在同一個(gè)目錄。

使用 require.config() 方法可以對(duì)模塊的加載行為進(jìn)行自定義。require.config()

RequireJS によって解決される主な問(wèn)題

• ページの応答損失を避けるために JS を非同期でロードできるようにする

• コード間の依存関係を管理する, コードの作成とメンテナンスに役立ちます

require.js の使い方を見(jiàn)てみましょう

require.js を使用したい場(chǎng)合は、まず定義する必要があります

require.config({

　　　　baseUrl: "src",

　　　　paths: {

　　　　　　"a": "a.js",
　　　　　　"b": "b.js",

　　　　}

　　});

• id: 定義されたモジュールの名前を參照します

• dependency: 定義されたモジュールが依存するモジュールの配列です

• factory: モジュールを初期化します。 実行する関數(shù)またはオブジェクト。関數(shù)の場(chǎng)合は、一度だけ実行する必要があります。それがオブジェクトの場(chǎng)合、このオブジェクトはモジュールの出力値である必要があります。
  特定の仕様については、AMD (中國(guó)語(yǔ)版) を參照してください。

  たとえば、「alpha」という名前のモジュールを作成し、require、exports を使用し、「beta」という名前のモジュールを作成します:

const util = require('util');

??オブジェクトを返す匿名モジュール:??

const util = require('util');var date = new date();
util.getFormatDate(date,1);

??依存関係のないモジュールはオブジェクトを直接定義できます:??

// util.jsmodule.exports = {
    getFormatDate:function(date, type){
         if(type === 1){                return '2017-06-15'
          }          if(type === 2){                return '2017 年 6 月 15 日'
          }
    }
}// a-util.jsconst util = require('util.js')
module.exports = {
    aGetFormatDate:function(date){
        return util.getFormatDate(date,2)
    }
}

??使用方法????AMD は require ステートメントを使用してモジュールをロードします??

 // foobar.js
 // 定義行為
 function foobar(){
         this.foo = function(){
                 console.log('Hello foo');
        }  
         this.bar = function(){
                 console.log('Hello bar');
          }
 } // 把 foobar 暴露給其它模塊
 exports.foobar = foobar;// main.js//使用文件與模塊文件在同一目錄var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar'

• ??module: は配列であり、內(nèi)部のメンバーはロードされるモジュールです??
• ??callback: ロードが成功した後のコールバック関數(shù)です??
??例:??rrreee ??具體的な使い方は以下の通りです??rrreee??ここに4つのファイルがあるとします、util.js、a-util.jsはutil.jsを指し、a.jsはa-util.jsを指し、main.jsはaを指します。 js 。 ????その中で、data-main屬性はWebプログラムのメインモジュールをロードするために使用されます。 ????上記の例は、メイン モジュールを作成する最も簡(jiǎn)単な方法を示しています。デフォルトでは、require.js は依存関係がメイン モジュールと同じディレクトリにあることを前提としています。 ????モジュールの読み込み動(dòng)作をカスタマイズするには、require.config() メソッドを使用します。 require.config() はメインモジュール (main.js) の先頭に記述されており、このオブジェクトの paths 屬性で各モジュールの読み込みパスを指定します。ベースディレクトリ (baseUrl) を変更します??rrreee??4 CommonJS????commonJS は、nodejs のモジュール仕様であり、ビルドツールの高度な自動(dòng)化により、現(xiàn)在フロントエンドで広く使用されており、npm を使用するコストは高くなります。とても低い。 commonJS は JS を非同期的にロードするのではなく、同期的に一度にロードします。 commonJS には、??rrreee?? などのモジュールをロードするために使用されるグローバル メソッドがあり、その後、util?? によって提供されるメソッドを呼び出すことができます。 rrreee??commonJS には、モジュール定義 (エクスポート)、モジュール?yún)⒄?(必須)、モジュール識(shí)別 (モジュール) の 3 つのモジュール定義があります。????exports() オブジェクトは、現(xiàn)在のモジュールの変數(shù)またはメソッドをエクスポートするために使用され、唯一のエクスポート ポートです。 require() は外部モジュールを?qū)毪工毪郡幛耸褂盲丹欷蓼?。モジュール オブジェクトはモジュール自體を表します。 ????例を教えてください??rrreee??または次の方法??

 // foobar.js
 // 定義行為
 function foobar(){
         this.foo = function(){
                 console.log('Hello foo');
        }  
         this.bar = function(){
                 console.log('Hello bar');
          }
 } // 把 foobar 暴露給其它模塊
 exports.foobar = foobar;// main.js//使用文件與模塊文件在同一目錄var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar'

5 總結(jié)

CommonJS 則采用了服務(wù)器優(yōu)先的策略，使用同步方式加載模塊，而 AMD 采用異步加載的方式。所以如果需要使用異步加載 js 的話建議使用 AMD，而當(dāng)項(xiàng)目使用了 npm 的情況下建議使用 CommonJS。

相關(guān)推薦：

論JavaScript模塊化編程

requireJS框架模塊化編程實(shí)例詳解

以上がモジュール型プログラミングとは何ですか? jsモジュールプログラミングの概要の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。