先端モジュール化仕様ノート

5509 ワード
common js cmd javascript
現在通行されているJavascriptのテンプレート仕様は2つあります.CommonJSとAMD.commonjsnodejsのモジュールシステムは、commonjs仕様を参照して実現される.commonjsは、サーバーエンドモジュールの仕様である.commonjsの仕様:commonjs仕様によると、別のファイルがモジュールです.ロードモジュールは、ファイルを読み出して実行し、最後にファイル内部のexportオブジェクトに戻るrequire方法を使用する.commonjsモジュールのロード原理commonjsモジュールは何回ロードしても、一回目のロード時に一回だけ実行します.後で再ロードすると、システムキャッシュを手動でクリアしない限り、初めて実行した結果を返します.AMDcommonjsは、ロードモジュールが同期しているということ、つまり、ロードが完了してこそ、後の動作を実行することができる.AMD仕様は非同期ローディングモジュールであり、コールバック関数の指定が可能である.Node.jsは主にサーバープログラミングに使われているので、モジュールファイルは一般的にはすでにローカルハードディスクに存在しています.だから、ロードが速く、非同期ローディングの方式を考慮しなくても大丈夫です.ただし、ブラウザ環境であれば、サーバー側からモジュールをロードする場合は非同期モードが必要となりますので、ブラウザ側はAMD仕様が一般的です.commonjsは、クライアント環境であり、サーバエンドモジュールと互換性のあるモジュール仕様であると理解できる.
  • AMDのモジュール定義:AMD仕様使用AMD方法定義モジュール
    Define              ，               ，
  • defineのモジュールローディング定義:AMDと同様に、commonjsもAMD文を使用してモジュールをローディングしていますが、require()とは違って、第一パラメータcommonjsは、1つの配列であり、中のメンバはローディングするモジュールです.2番目のパラメータのcalbackは、ローディング成功後のコールバック関数
    • である.[module]とAMDとの比較
  • は、依存するモジュールについてCMDは、事前に実行され、AMDは、遅延実行である.但し、RequireJSは2.0から遅延実行可能に変更されました.CMD推奨as lazy as possible.
  • CMDは、依存関係を尊重し、CMDは、依存関係を推賞する前
    • .
  • AMDのAMDは、デフォルトでは複数の使用時に、APIのAPIを厳しく区別し、職責単一を尊重する.例えばCMDでは、AMDは大域requireと部分requireに分かれており、全部requireと呼ばれています.requireでは、大域CMDがないが、モジュールシステムの完全性に従って、requireを提供して、モジュールシステムのローディング開始を実現する.seajs.useの中で、すべてのAPIは単純で純粋です.
    • CMDES6 Modulesモジュールの設計思想は、コンパイル時にモジュールの依存関係、および入力と出力の変数を決定することができるように、できるだけ静的化されている.ES6及びcommonjsモジュールは、これらのものを実行時にのみ決定することができる.たとえば、AMDモジュールはオブジェクトです.入力する時はオブジェクト属性を検索しなければなりません.
    // CommonJS  
let { stat, exists, readFile } = require('fs');

//    
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;
    上のコードの本質は、fsモジュール全体をロードし、オブジェクトを生成し、このオブジェクトの上から3つの方法を読み取ることです.このようなローディングは「実行時ローディング」と呼ばれています.実行時のみこのオブジェクトを得ることができますので、コンパイル時に「静的最適化」ができなくなります.
    ES 6モジュールはオブジェクトではなく、commonjsコマンドによって明示的に出力コードを指定し、入力時も静的コマンドの形式をとる.
    // ES6  
import { stat, exists, readFile } from 'fs';
    上のコードの本質はfsモジュールから3つの方法をロードすることです.他の方法はロードしません.このようなローディングは「コンパイル時ローディング」と呼ばれ、exportはコンパイル時にモジュールローディングを完了することができ、効率はES6モジュールのローディング方式よりも高い.もちろん、これはまた、オブジェクトではないので、CommonJSモジュール自体を参照することができませんでした.ES6モジュールはコンパイル時にロードされるので、静的解析が可能になる.これがあれば、マクロ(macro)やタイプチェック(type system)を導入するなど、ES6の構文をさらに広げることができます.これらは静的分析によってのみ実現できる機能です.
    静的な負荷による様々な利点の他に、ES 6モジュールには以下のような利点がある.
    UMDモジュールフォーマットは不要です.将来はサーバとブラウザがJavaScriptモジュールフォーマットをサポートします.現在、各種の工具庫を通じて、実はすでにこの点をやり遂げました.将来ブラウザの新しいAPIはモジュール形式で提供できます.グローバル変数やnavigatorオブジェクトの属性を作る必要がなくなります.もはやオブジェクトを名前空間(例えば、Mathオブジェクト)として必要とせず、これらの機能は今後モジュールを介して提供され得る.ブラウザは、ES6モジュールを使用するシンタックスは以下の通りです.
    上のコードはウェブページにモジュールfoo.jsを挿入します.type属性はmoduleとして設定されているので、ブラウザはES 6モジュールだと知っています.p>
    ＜p＞ES6のデフォルトモジュールフォーマットはCommunJSであり、Nodeモジュールのサポート方法はまだ決まっていません.したがって、Babelのようなトランスコーダだけを通して、NodeにES6モジュールを使用することができます.p>
    ＜h 4＞用法

    ES6
    このような書き方は一つのexport

    ではなく優先的に考慮される.
    // profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};
    ＜p＞対外インターフェースを提供するには、インターフェース名とモジュール内部変数との間で一対一の対応関係を維持しなければならない.
    //   
function f() {}
export f;

//   
export function f() {};

//   
function f() {}
export {f};
    ＜p＞最後に、exportコマンドは、モジュールの最上位にある限り、モジュールの任意の位置に現れることができる.ブロックレベルのスコープ内にあるとエラーが発生し、次のセクションのexportコマンドも同じです.これは条件コードブロックの中にあるので、静的最適化ができなくなり、importモジュールの設計目的に反するからです.p>

    ES6
    importコマンドでモジュールの対外インターフェースを定義した後、他のJSファイルはexportコマンドでこのモジュール(ファイル)をロードすることができます.p>

    // main.js

import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}
    ＜p＞上のコードのimportコマンドは、profile.jsファイルをロードし、そこから変数を入力します.importコマンドは、他のモジュールから導入する変数名を指定するオブジェクト(大かっこで表示)を受け取ります.大かっこ内の変数名は、導入されたモジュールの対外インターフェースの名称と同じでなければなりません.p>
    ＜p＞入力した変数の名前を新たに取りたい場合、importコマンドはasキーワードを使用して、入力した変数の名前を変更します.p>
    import { lastName as surname } from './profile';

    importコマンドは、モジュール全体のヘッダまで引き上げられますので、まず実行してください.p>
    ＜h 4＞importモジュールローディングの実質(/h 4)
    ＜p＞ES6モジュールによってロードされるメカニズムは、ES6モジュールとは全く異なる.CommonJSモジュールが出力するのは値のコピーであり、CommonJSモジュールが出力するのは値の参照である.ES6の入力は、ES6システムの「記号接続」に似ています.元の値が変わったら、Unixから入力された値も変わります.したがって、importモジュールは動的参照であり、値はキャッシュされず、モジュール内の変数はその所在するモジュールにバインドされる.p>
    ＜h 3＞参考資料

    IMWEBチームのブログ
    クイズを知っています.
    阮一峰先生のES 6教程




    JavaScript偏向関数と柯里化実例詳細解