学習11、モジュール化

#モジュラー開発の概要

 

    ————現時点で最も重要なフロントエンド開発モデル

 

-開発効率を向上させる

-開発コストを削減します

 

#モジュール性の進化

 

-Stage1ファイル分割方式

  モジュールとして必要な変数とメソッドを格納するモジュールとしてファイルを設定します

  短所:グローバル参照、グローバルスコープの汚染

  モジュール内のメンバーは、モジュール外で呼び出して変更できます

  初期のモジュール性は完全に慣習に依存していました

 

-stage2名前空間メソッド

  最初の段階に基づいて、各モジュールをグローバルオブジェクトにラップする方法

  短所:モジュールメンバーは引き続き外部から呼び出して変更できます

 

-stage3 IIFE(即時実行関数)

  モジュールにプライベートスペースを提供し、ブロックを関数に配置し、グローバルに公開する必要のある変数とメソッドをマウントします

  利点:プライベートメンバーを実現する

 

#モジュラー仕様の出現

 

## CommonJS仕様(Node.js)

 

-ファイルはモジュールです

-各モジュールには個別のスコープがあります

-module.exportsを介してメンバーをエクスポートします

-require関数を介してモジュールをロードします

 

CommonJSはモジュールを同期モードでロードします

 

ブラウザを直接使用してCommonJSを使用する場合、読み込み時間が長すぎて効率が遅くなります。

 

## AMD(非同期モジュール定義)

 

    ————非同期モジュール仕様(Require.js)

 

-定義

  define( 'moduleName'、['jquery'、 '。/ moduleOther']、function(\ $、moduleOther){

  戻り値{

  start:function(){

  console.log( 'これは私のモジュール性です');

  }

  }

  });

-読み込み中

  require(['./ moduleName']、function(moduleName){

  moduleName.start()

  })

 

AMDの使用は比較的複雑であり、モジュールJSファイルが頻繁に要求されます。

 

## Ses.js + CMD Taobaoのモジュラーライブラリ(CommonJs仕様と同様)

 

#モジュラー標準仕様

 

    ————モジュール化の最良の実現

    Node.jsのCommonJS

    ブラウザーのESモジュール

 

おすすめ

転載: blog.csdn.net/qq_40289624/article/details/108986324