モジュール化の学習と理解
3246 ワード
最近はvueのソースコードを見ています.そしてrollupを見て、またモジュール化の概念を見ました.ですから、モジュール化の概念を勉強してまとめます.以下は私の学習成果です.何か間違いがあれば、教えてください.
モジュール化概念
モジュール化の存在意義:開発者は開発過程で自分の核心業務ロジックだけに注目してほしいです.他のものは直接に他の人が書いたモジュールをロードすることができます.しかし、Javascriptはモジュール化プログラミング言語ではありません.es 6以前は「クラス」をサポートしていませんでした.だから、「モジュール」はありませんでした.
nodejs一つはサーバー端に適用してプログラムして提出される時、Javascriptモジュール化もそのため誕生して、CommonJSモジュール規範は提出されます.S 6モジュールの前に、CommunJSはモジュール化プログラミングを統一しました.
以下、Common JS、AMDCMD、ES 6 Moduleを簡単に説明します.
同期ローディングCommon JS
Common JSにはグローバルな方法があります.モジュールをロードするために使用できます.しかし、この方法はブラウザ側で一定の限界を持っています.JavaScriptは説明言語であり、上から下へ直接実行します.この時の困惑は
その後私が得た答え:
最後に私のノート:CommonJSは同期ローディングの方式です.サーバー側のモジュールは現地に存在します.そうすると、読み取り時間が速くなります.待ち時間が短くなります.同時にローディングできます.しかし、ブラウザ側では、依存モジュールはサーバー側に預けられています.読む時間はネットスピードに依存しています.javascriptはエラーとなりますので、ブラウザ側に非同期でロードする方式が必要です.
module.exportとexportモジュールの導出
以上の書き方はmodule.exportが試しに書いてみました.
requireモジュール導入 AMD/RequireJS非同期ローディング依存フロント、前倒し実行 CMD/sea.js非同期負荷依存性は近く、遅延負荷 ES 6 Module
import導入
よくある使い方:
importは編集時に実行しますので、
import()
importコマンドは編集時に実行されますので、ifコードや関数に入れることはできません.
exportが規定する場合、対外的なインターフェースは、モジュール内部の変数に対して一対一の対応関係を確立しなければなりません.阮一峰の大人を見た内容にはこんなくだりがあります.
今まで彼らの違いを考えたことがありませんでしたが、今日はチェットワンピークのS 6モジュールについての説明をよく読みました.ES 6の設計思想はできるだけ静的になり、コンパイルする時にモジュール間の依存関係を決定することができ、また出力と入力の変数CommonJS、AMD、CMDは実行時のみモジュール間の負荷関係を決定することができる.
モジュール化概念
モジュール化の存在意義:開発者は開発過程で自分の核心業務ロジックだけに注目してほしいです.他のものは直接に他の人が書いたモジュールをロードすることができます.しかし、Javascriptはモジュール化プログラミング言語ではありません.es 6以前は「クラス」をサポートしていませんでした.だから、「モジュール」はありませんでした.
nodejs一つはサーバー端に適用してプログラムして提出される時、Javascriptモジュール化もそのため誕生して、CommonJSモジュール規範は提出されます.S 6モジュールの前に、CommunJSはモジュール化プログラミングを統一しました.
以下、Common JS、AMDCMD、ES 6 Moduleを簡単に説明します.
同期ローディングCommon JS
Common JSにはグローバルな方法があります.モジュールをロードするために使用できます.しかし、この方法はブラウザ側で一定の限界を持っています.JavaScriptは説明言語であり、上から下へ直接実行します.この時の困惑は
その後私が得た答え:
最後に私のノート:CommonJSは同期ローディングの方式です.サーバー側のモジュールは現地に存在します.そうすると、読み取り時間が速くなります.待ち時間が短くなります.同時にローディングできます.しかし、ブラウザ側では、依存モジュールはサーバー側に預けられています.読む時間はネットスピードに依存しています.javascriptはエラーとなりますので、ブラウザ側に非同期でロードする方式が必要です.
module.exportとexportモジュールの導出
let num = 0
function add (a, b) {
return a + b
}
module.exports = {
num: num,
add: add
}
exportsとmodule.exportsの違い:Nodeは各モジュールにexport変数を提供し、module.exportsを指す.以上の書き方はmodule.exportが試しに書いてみました.
//
let num = 0
function add (a, b) {
return a + b
}
exports = {
num: num,
add: add
}
第二の書き方://
let num = 0
function add (a, b) {
return a + b
}
exports.num = num
exports.add = add
nodeの中で、exportはmodule.exportsを指します.もし直接に一つの対象をexportsに割り当てたら、exportsはもとはmodule.exportsを指して破壊されます.この二つの間には連絡がなく、エラーが発生します.どうしてもexportsを使いたいなら、直接exportsに属性を追加できます.requireモジュール導入
let math = require('./math')
非同期ローディングimport導入
よくある使い方:
//
import * as util from 'xxx'
import AA from 'yyy'
//
import { A, B } from 'xxx'
import*as a from'xxx'の文法は、xxxファイル内のexportの関数を一つのオブジェクトに統合します.import AA from'yy'は、export defaultの関数を導入します.importは編集時に実行しますので、
foo()
import { foo } from 'xxx'
エラーはありません.import{foo}from'xxx'は編集時に実行されます.foo()は運転時に実行されます.import()
importコマンドは編集時に実行されますので、ifコードや関数に入れることはできません.
if (a) {
import { foo } from 'xxx'
}
//
import exportはモジュールの一番上だけになり、コードブロックの中ではいけません.これでは、動作時にモジュールを動的にロードすることができません.import()の出現はimport()を使用して、nodeの中のrequire()と同様に、動的にロードされ、import()は非同期的にロードされ得る.import()モジュールのロードが成功すると、このモジュールはオブジェクトとしてthenメソッドのパラメータとなります.import('xxx').then(module => {
...
})
export暴露モジュールexportが規定する場合、対外的なインターフェースは、モジュール内部の変数に対して一対一の対応関係を確立しなければなりません.阮一峰の大人を見た内容にはこんなくだりがあります.
: export var m = 1 export function aa (){} 。
Common JSとES 6 Moduleの違い今まで彼らの違いを考えたことがありませんでしたが、今日はチェットワンピークのS 6モジュールについての説明をよく読みました.ES 6の設計思想はできるだけ静的になり、コンパイルする時にモジュール間の依存関係を決定することができ、また出力と入力の変数CommonJS、AMD、CMDは実行時のみモジュール間の負荷関係を決定することができる.
// CommonJS
let { stat, exists, readFile } = require('fs');
// ES6
import { stat, exists, readFile } from 'fs';
第一と第二の違い:CommunJSはfsモジュールを全体的にロードして一つのオブジェクトを生成し、このオブジェクトの読み込みにstat、exists、readFile方法を探します.これは実行時にES 6モジュールをロードするとfsにstat、exists、readFileの3つのメソッドがロードされます.他の方法はロードされません.