フロントエンドの知識 JavaScript モジュール モジュールの学習

モジュールはJSモジュールで、同じタイプまたは関連するデータや関数が多数あり、メソッドを全体として表示する必要がある場合、モジュールとして個別に定義できると理解しています。つまり、モジュールです。 Module の意味は、コードをモジュール化して、コードを論理的に独立したサブセットに分割し、各サブセットが特定の関数を処理し、個別に呼び出すことです。 モジュール、つまりモジュールは、
モジュールヘッダーに「user strict」が追加されているかどうかに関係なく、

自動的にstrictモードを採用し、

引数は関数パラメータの変更を自動的に反映しません、そしてこれを指すことを禁止しますグローバルオブジェクトにはmodulesにはImportsとExportsの2つのキーワードがあります

Imports:他のモジュールによって提供される関数を入力するために使用されます

• Exports:外部インターフェースを指定するために使用されます
モジュールは独立したファイル

では、ファイル

内のすべての変数を外部 から取得することはできません。モジュール内の変数を外部から読み込む場合は、出力に加えて export キーワードを使用する必要があります。出力変数の名前を変更したい場合は、インポート コマンドで as キーワードを使用し、名前を a に変更する必要があります。例:

let a='a';
let b='b';
let c='c';
export {a,b,c}

さらに、インポートには改善効果があります

、どこで引用されても、

モジュール全体の先頭に昇格され、最初に実行されます

特定の値を指定してロードするだけでなく、全体、つまりアスタリスク (*) を使用してオブジェクトを指定すると、すべての出力値がこのオブジェクトにロードされます。たとえば、

import {name as a} from '.../xxx.js'

exportdefaultは、モジュールファイル

のデフォルト出力を設定します。デフォルト出力は、モジュールの変数名を知る必要はありません。さらに、

exportdefault は中かっこ

を追加する必要はありません。本質的に、

exportdefault はdefault と呼ばれる変数またはメソッドを出力し、システムではそれに任意の名前を付けることができるためです

import * as a from '.../xxx.js'
console.log(a.area(4));
console.log(a.cire(4));

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

複数回ロードされた場合は、

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

Browse など、マージ後のロードと同等 ES6 モジュールをロードするには、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグも使用されますが、type="module" 属性が必要です追加される。

import {b} from '.../xxx.js'
import {c} from '.../xxx.js'
//等同于
import {b,c} from '.../xxx.js'

ブラウザは <script></script> と type="module" を非同期で読み込みます。これによりブラウザはブロックされません。つまり、ページ全体がレンダリングされるまで待機します。その後、モジュール スクリプトを実行すると、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの defer 属性をオンにするのと同じになります。 モジュールでは、最上位の this キーワードは、window を指すのではなく、unknown

を返します。つまり、モジュールの最上位で this キーワードを使用すると同時に、最上位の this という構文ポイントを使用することは無意味です。 unknown

と等しく、現在のコードが ES6 モジュール内にあるかどうかを検出できます。 。

関連記事: 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签，但是要加入type="module"属性。

<script type="module">
</script>

浏览器对于带有type="module"的3f1c4e4b6b16bbbd69b2ee476dc4f83a，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的defer属性。

模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的，同时利用顶层的this等于undefined

Webフロントエンドを学ぶための共通知識ポイントを詳しく紹介

JavaScriptを始めるための基礎知識 これからjsを学びたい友達は参考にしてください

以上がフロントエンドの知識 JavaScript モジュール モジュールの学習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。