アドバンスドタスク4:AMD_CMD_RequireJS

テーマ1:なぜモジュール化を使うのか?
モジュール化を使用して、次の操作を行います.

名前の競合を解決します.

は依存管理を行うことができる.

コードの可読性を強化する.

コードはデカップリングされ、コードの多重化率が向上する.

テーマ2:CMD、AMD、CommonJS仕様はそれぞれ何を指しますか?どのようなアプリケーションがありますか

CMD:

CMDはCommon Module Definition汎用モジュール定義であり、CMD仕様は国内で発展したものであり、AMDにrequireJSがあり、CMDにブラウザの実現SeaJSがあり、SeaJSが解決すべき問題はrequireJSと同様であるが、モジュール定義方式とモジュールロード(運用、解析と言える)のタイミングには異なる
構文
Sea.jsは1つのモジュールの1つのファイルを推奨して、統一的な書き方に従います
define

define(id?, deps?, factory)

CMDが推奨するから

は1つのファイル1つのモジュールであるため、モジュールid

としてファイル名を用いることが多い.

CMDは依存を推奨するのが近いので、defineのパラメータに依存を書くのは一般的ではなく、factoryに

を書く.
factoryには3つのパラメータがあります

  function(require, exports, module)

require
requireはfactory関数の最初のパラメータです

require(id)

requireは、モジュール識別を一意のパラメータとして受け入れ、他のモジュールが提供するインタフェースを取得する方法です.
exports
exportsは、モジュールインタフェースを外部に提供するオブジェクトです.
module
moduleは、現在のモジュールに関連付けられたプロパティとメソッドを格納したオブジェクトです.
demo

  //       myModule.js
  define(function(require, exports, module) {
    var $ = require('jquery.js')
    $('div').addClass('active');
  });

  //     
  seajs.use(['myModule.js'], function(my){

  });

AMD:

AMDはAsynchronous Module Definitionで、中国語名は非同期モジュール定義の意味です.ブラウザ側でモジュール化された開発の仕様です
JavaScriptオリジナルサポートではないため、AMD仕様によるページ開発には対応するライブラリ関数、すなわち有名なRequireJSが必要であり、実際にAMDはRequireJSが普及過程でモジュール定義の規範化の産出である
requireJSは主に2つの問題を解決する

複数のjsファイルに依存関係がある可能性があります.依存するファイルは、ブラウザ

に依存するファイルよりも早くロードする必要があります.

jsロード時ブラウザはページレンダリングを停止し、ファイルをロードすればするほど、ページの応答時間が長くなる

requireJSを使った例を見てみましょう

  //      myModule.js
  define(['dependency'], function(){
      var name = 'Byron';
      function printName(){
          console.log(name);
      }

      return {
          printName: printName
      };
  });

  //     
  require(['myModule'], function (my){
  　 my.printName(); });

構文
requireJSは、モジュールを定義するグローバル変数である関数defineを定義します.

  define(id?, dependencies?, factory);

id:モジュールの識別を定義するオプションパラメータ.パラメータが指定されていない場合、スクリプトファイル名(拡張名を削除)dependencies:現在のモジュール依存モジュール名配列factory:ファクトリメソッド、モジュール初期化実行する関数またはオブジェクト.関数の場合は、一度だけ実行されるはずです.オブジェクトの場合、このオブジェクトはモジュールの出力値である必要があります.
ページでrequire関数を使用してモジュールをロードする

  require([dependencies], function(){});

require()関数は2つのパラメータを受け入れます

の最初のパラメータは、依存するモジュール

を表す配列である.

の2番目のパラメータはコールバック関数であり、前に指定したモジュールが正常にロードされると呼び出されます.ロードされたモジュールは、パラメータとして関数に渡され、コールバック関数の内部でこれらのモジュール

を使用することができる.
require()関数は依存する関数をロードするときに非同期でロードされ、ブラウザが応答を失うことなく指定したコールバック関数は、前のモジュールが正常にロードされた後にのみ実行され、依存性の問題を解決します.

CommonJSサーバ側仕様(node.js使用)

Node.js天然サポートCommonJS仕様

定義モジュール:CommonJS仕様に従って、個別のファイルがモジュールです.各モジュールは、globalオブジェクトとして定義属性

を除き、モジュール内で定義された変数は、globalオブジェクトの属性として他のモジュールによって読み取ることができない個別の役割ドメインである.

モジュール出力:モジュールには出口が1つしかありません.module.exportsオブジェクト、モジュールが出力したい内容をオブジェクト

に入れる必要があります.

ロードモジュール:ロードモジュールはrequireメソッドを使用し、ファイルを読み取り実行し、ファイル内部のmodule.exportsオブジェクト

に戻る

  //   a.js     
  var people = {
    name:'ruoyu',
    sayName: function(){
      console.log(this.name)
    }
  }
  module.exports = people;
  //   b.js       ，    node b.js  
  var p = require('./a');
  p.sayName();
  console.log('hello')

requireは同期しています.すなわち、モジュールシステムは、モジュールファイルの内容を同期的に読み取り、モジュールインタフェースを得るためにコンパイル実行する必要がある.これはサーバ側で簡単に実現でき、ブラウザ側でJavaScriptをロードするのに最適で、最も簡単な方法はdocumentにscriptラベルを挿入することです.しかし、スクリプトラベルは生まれつき非同期で、従来のCommonJSモジュールはブラウザ環境で正常にロードできません.
解決策の1つは、サーバ側コンポーネントを開発し、モジュールコードを静的に分析し、モジュールをその依存リストとともにブラウザ側に戻すことです.ただし、サーバに追加のコンポーネントをインストールする必要があるため、一連の下位アーキテクチャを調整する必要があります.
コード効果