モジュール型プログラミングとは何ですか? jsモジュールプログラミングの概要-jsチュートリアル-php.cn

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

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

3 AMD

4 CommonJS

5 概要

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

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

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

2 なぜモジュール化するのか
次の例を見てみましょう

// 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 を参照することしか知らない場合、と書くと、A.js を参照しないため、プログラムエラーが発生し、ファイルの参照順序が間違っているはずがありません。コード全体のデバッグや変更に不便をもたらします。

別の問題があります。上記のコードは 2 つのグローバル変数を公開しており、

3 AMD

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

次の状況を想定します

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return &#39;2018-08-9&#39;
            }            if(type === 2){                return &#39;2018 年 8 月 9 日&#39;
            }
        }
    }
})// a-util.jsdefine([&#39;./util.js&#39;],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine([&#39;./a-util.js&#39;],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire([&#39;./a.js&#39;],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 のロードは、後続のステートメントの実行には影響しません。

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

var a = require(&#39;a&#39;);
console.log(1)

ログイン後にコピー

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

AMDはブラウザ側でのモジュール開発のための仕様です。この仕様はもともとJavaScriptではサポートされていないため、AMD仕様を使用して開発する場合はサードパーティのライブラリ関数、つまりRequireJSを導入する必要があります。 1，然后才会打印 2018 年 8 月 9 日。因此 AMD 的加载并不会影响后续的语句执行。

如果不是异步加载会出现什么情况呢

// ? 代表该参数可选
    define(id?, dependencies?, factory);

ログイン後にコピー

后面的语句需要等待 a 加载完成才能执行，如果加载时间过长，整个程序都会卡在这。因此，浏览器不能同步加载资源，这也是 AMD 的产生背景。

AMD 是在浏览器端实现模块化开发的规范。由于该规范不是 JavaScript 原始支持的，使用 AMD 规范进行开发的时候需要引入第三方的库函数，也就是 RequireJS。

RequireJS 主要解决的问题

使 JS 异步加载，避免页面失去响应
管理代码之间的依赖性，有利于代码的编写和维护

下面来看看如何使用 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：是定义的模块所依赖模块的数组
factory：为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。
具体的规范说明可以参考 AMD (中文版)
举个例子，创建一个名为 “alpha” 的模块，使用了 require，exports，和名为 “beta” 的模块:

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

ログイン後にコピー

一个返回对象的匿名模块：

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

ログイン後にコピー

一个没有依赖性的模块可以直接定义对象：

require([module],callback);

ログイン後にコピー

如何使用

AMD 采用 require 语句加载模块

require([&#39;./a.js&#39;],function(a){
    var date = new Date()
    a.printDate(date)
})

ログイン後にコピー

module：是一个数组，里面的成员是要加载的模块
callback：加载成功之后的回调函数

例如

// 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([&#39;./a.js&#39;],function(a){
    var date = new Date()
    a.printDate(date)
})// 使用//

ログイン後にコピー

具体的使用方法如下

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

ログイン後にコピー

假设这里有 4 个文件，util.js，a-util.js 引用了 util.js，a.js 引用了 a-util.js，main.js 引用了 a.js。

其中，data-main 属性的作用是加载网页程序的主模块。

上例演示了一个主模块最简单的写法，默认情况下，require.js 假设依赖和主模块在同一个目录。

使用 require.config() 方法可以对模块的加载行为进行自定义。require.config()

RequireJS によって解決される主な問題

ページの応答損失を避けるために JS を非同期でロードできるようにする
コード間の依存関係を管理する, コードの作成とメンテナンスに役立ちます

require.js の使い方を見てみましょう

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

require.config({

　　　　baseUrl: "src",

　　　　paths: {

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

　　　　}

　　});

ログイン後にコピー

id: 定義されたモジュールの名前を参照します
dependency: 定義されたモジュールが依存するモジュールの配列です
factory: モジュールを初期化します。実行する関数またはオブジェクト。関数の場合は、一度だけ実行する必要があります。それがオブジェクトの場合、このオブジェクトはモジュールの出力値である必要があります。
特定の仕様については、AMD (中国語版) を参照してください。
たとえば、「alpha」という名前のモジュールを作成し、require、exports を使用し、「beta」という名前のモジュールを作成します:

const util = require(&#39;util&#39;);

ログイン後にコピー

const util = require(&#39;util&#39;);var date = new date();
util.getFormatDate(date,1);

ログイン後にコピー

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

ログイン後にコピー

 // foobar.js
 // 定义行为
 function foobar(){
         this.foo = function(){
                 console.log(&#39;Hello foo&#39;);
        }  
         this.bar = function(){
                 console.log(&#39;Hello bar&#39;);
          }
 } // 把 foobar 暴露给其它模块
 exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require(&#39;./foobar&#39;).foobar,
test = new foobar();
test.bar(); // &#39;Hello bar&#39;

ログイン後にコピー

🎜module: は配列であり、内部のメンバーはロードされるモジュールです🎜
🎜callback: ロードが成功した後のコールバック関数です🎜

require.config()

 // foobar.js
 // 定义行为
 function foobar(){
         this.foo = function(){
                 console.log(&#39;Hello foo&#39;);
        }  
         this.bar = function(){
                 console.log(&#39;Hello bar&#39;);
          }
 } // 把 foobar 暴露给其它模块
 exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require(&#39;./foobar&#39;).foobar,
test = new foobar();
test.bar(); // &#39;Hello bar&#39;

ログイン後にコピー