module

16916 ワード
テキストリンク
調査のきっかけ
「モジュール」という言葉は馴染みがなく、後でモジュールを使うことが多いので、事前に慣れようと思って整理しました.

モジュールとは


開発されたアプリケーションがますます大きくなるにつれて、ファイルを複数のファイルに分割する必要がある場合、通常、各ファイルは모듈に分割されます.모듈は、クラスまたは特定の目的を有する関数から構成される.
通常は機能別に区分され、このように各ファイルに分割され、再利用性に優れた利点があり、開発効率とメンテナンス性を向上させることができる.
では、モジュールを使わずにファイルを使い分けるだけでいいのではないでしょうか.
モジュールを使用せずにjsファイルを別々に使用する場合、各jsファイルには独立したスキャンがないという問題があります.たとえば、2つのjsファイルをロードすると、1つのグローバルが共有され、予期せぬ重複が発生します.

JavaScriptのモジュール


JavaScriptでは、生まれつきの限界のため、モジュール機能はほとんどありません.したがって、scriptタグを使用してjavascriptファイルをロードすると、グローバルオブジェクトが共有されます.この状態ではモジュール化できません.
したがってjavascriptコミュニティでは様々なモジュール化の試みが行われる.そして,いくつかのモジュールシステムが代表となる,すなわちAMD,CommonJSである.
ユーザーはモジュール化を実現するために、最終的にモジュールライブラリを使用しなければなりません.後でノードを開きます.jsではCommonJSモードに従い,ブラウザでES 6のモジュールを用いてモジュール化を実現する.
しかしながら、ブラウザにおけるES 6モジュールはIEなどの旧式ブラウザをサポートしておらず、一部の機能はサポートされておらず、ES 6モジュールを使用しても変換ファイルのバーベルやバインドにWebパッケージを使用する必要があるため、通常はwebpackなどのモジュールバンドルパッケージを使用する.

輸出入


モジュールはファイルです.つまり、スクリプトはモジュールです.
これらの個別モジュールの機能は、必要に応じてexportおよびimportを使用して呼び出される.
まず,exportは文字通りに書き出す役割を果たし,外部モジュールで利用できる.
次に、importは導入を示し、exportに導出されたモジュールを導入することができる.

きほんモジュール


今回のリリースの目的は、モジュールの動作方法を理解し、熟知することであり、現在は使用されていませんが、ES 6のモジュールを使用しています.それからいろいろな例を通じてよく知っています.
variables.js
エクスポートする変数の場所を定義します.
const foo = 'foo';
const bar = 'bar';

export {foo, bar};
main.js
必要に応じてモジュールを使用するエントリポイントを作成し、必要なものだけを使用することもできます.
import {foo, bar} from './variables.js';

console.log(foo);
console.log(bar);
index.html
ブラウザでtype="module"を指定してESMを使用することを推奨し、.mjs拡張子を追加してモジュールシステムがモジュールであることを明確にします.
<script type="module" src="main.mjs"></script>

义齿

export default構文を使用して、モジュールの1つの代表を指定し、他のモジュールにロードして使用しやすいようにします.
todos.js
let todos = [
  { id: 3, content: 'Javascript', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'HTML', completed: false }
];

const add = newTodo => {
  todos = [newTodo, ...todos];
};

const render = () => {
  todos
    .map(
      ({ id, content, completed }) => `
        <li id="${id}">
          <label><input type="checkbox" ${completed ? 'checked' : ''}>${content}</label>
        </li>`
    )
    .join('');
};


const Todos = { add, render }; 
export default Todos;
上記の例では、export default {add, render}は使用できません.一つしか出口がないからです.
なぜこのように使うのですか?通常、モジュールは複数の関数を含むライブラリ形式ではなく、1つのオブジェクトのみを宣言するモジュールを使用するため、関数、クラス、変数などの機能を持つモジュールによって実現されるべきです.しかし、このように実現すると、ファイルが多くなります.ファイルの名前を付けて複数のフォルダに分けることができますが、export defaultを使用するとモジュール内にオブジェクトが1つしかないことが明確に表現されているようです.個人的には圧縮送信されているような気がします.
1つのモジュール内に複数の関数または変数があり、選択的に導出したい場合、export defaultを使用せずに、export {변수, 함수, 함수}の形式でdefaultを使用することができる.このようにして導出すると、importにおいて、識別子名を同じように装填しなければならないという制約がある.
読み込み後、asを使用して他の識別子名に置き換えることも、*を使用して一度にエクスポートすることもできます.
一度にロードして名前を変更すれば使用できます.import * as todos from './todos.mjs'

好奇心のある部分を解決しましょう。

  • import、export文はblock文では機能しません.
    • if(true) {
  import {sayHi} from "./say.js" // error발생
}

  • 読み取り可能性を考慮すると、スクリプトの上部でimport文を使用してインポートを示し、export文は一番下の位置で示されているようです.エクスポート時にモジュール内で機能を作成してexportを行い、インポート時にインポート後に使用するため、importが1位になると考えられます.

  • 同じモジュールの複数回のインポートも1回のみ評価されます.

  • asyncを使用して外部スクリプトをロードする場合、スクリプトのロードが完了するとHTMLパケットが完全に完了しなくてもモジュールが動作し、これらの特性を利用してどこにも依存しない機能を実現できるという.(広告、訪問者数)

  • ブラウザでは、import文に相対パスまたは絶対パスを入力する必要があります.Node.js環境やバンドルツールを使用する場合は、パスを指定する必要はありません.モジュールの検索方法も知る必要はありません.

  • モジュールはstrictモードで自動的に動作します.

  • 同時に宣言を輸出する場合は、このようにexport 키워드 식별자명を宣言と同時に輸出することができます.

    • モジュール化せずにそのまま使うとどうなりますか?


    複数のscriptラベルを使用して直接ファイルをロードすると、配布ファイルのようにモジュール化されますか?結論から言えない.
    index.html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./bar.js"></script>
    <script src="./foo.js"></script>
    <title>Document</title>
  </head>
  <body>
  </body>
</html>
    foo.js
    const x = 10;

console.log(x);
    bar.js
    const x = 10;

console.log(x);
    indexページを開き、コンソールを表示します.結果は次のとおりです.
    これは,jsファイルを用いて2つのscopeを分割したような感じがするが,実際には1つのscopeグローバル変数を共有していることを意味する.
    10문법에러 : x가 이미 선언되었다.

    結果


    moduleを使うとき、好奇心のあるところをたくさん解決しました.一番いいところは何度も検索して、実験をして、手が少し熟したような気がします.一人で勉強している間にモジュールを使うことがないので、これからもっと使いたいです.そして次はノードjsにおけるCommonJS方式のモジュールについてもご理解ください.
    リファレンス
    https://ko.javascript.info/modules-intro
    https://blaize.tistory.com/58
    https://lily-im.tistory.com/21
    https://enyobook.wordpress.com/2016/08/17/export-default%EC%97%90-%EB%8C%80%ED%95%B4/
    https://medium.com/@_diana_lee/default-export%EC%99%80-named-export-%EC%B0%A8%EC%9D%B4%EC%A0%90-38fa5d7f57d4
    IntelliJ の Live Templateを作成する
    ArangoDBをDockerで構築してみた