ESモジュールが簡単に踏むことができるポイントと一般的な問題の要約を要約します

最近、私は教育の撤回におけるESモジュールのいくつかの内容を体系的に研究し、使用プロセス中に簡単に踏むことができるいくつかのポイントを見つけました。

1つ：スクリプトタグの問題

ここに画像の説明を挿入
のWeb環境でこの問題をチェックするには、ラベルのHTMLスクリプト

ここに画像の説明を挿入
このtype属性を追加しないと、ESモジュールがES6の構文であり、ブラウザがそれを認識できないため、エラーが発生する可能性があります。

トピックから外れて、type = "module"がスクリプトタグに追加された場合、次の特性があります。

デフォルトでストリクトモードになりますが、ストリクトモードで直接使用することはできません
各モジュールは独立したプライベートスコープになり、外部からはアクセスできなくなります
レンダリングをブロックすることなく、スクリプトの実行を自動的に遅らせることができます。延期と同じ効果があります。一般的な現象は、ポップアップウィンドウが書き込まれた後にテキストが出力されることです。テキストは、ポップの終了を待ちます。 -アップウィンドウを出力します。この属性を追加すると、スクリプトが遅延します。実行
要求された外部リンクはCORSをサポートする必要があります

2：デフォルトのエクスポートと通常のエクスポートの問題

通常の輸出について話させてください。

変数の前にエクスポート宣言を使用する

	export const msg = "hello tq~"

	export function add(x){
    
    
    	return function(y){
    
    
        	return x + y
    	}
	}

中括弧を使用する

const msg = "hello tq~"

function add(x){
    
    
    return function(y){
    
    
        return x + y
    }
}

export{
    
    
    msg,
    add
}

次に、対応するインポート構文は次のようになります。

import {
    
     msg ,add} from  './module.js'
console.log(msg)
console.log(add(1)(2))

ピットが来ました：ここでは、固定文法で固定された通常のエクスポート中括弧であり、文法で固定された固定中括弧のみをインポートする派生オブジェクトではありません。
ここに画像の説明を挿入
これが与えられている割り当てを分解しないため、この一般的なエクスポートはオブジェクトではなく、破壊的な割り当てではありません！！
割り当てを破壊しません！**破壊的な割り当てではありません！**重要なことを3回言う

デフォルトのエクスポートを見てみましょう。

const msg = "hello tq~"

function add(x){
    
    
    return function(y){
    
    
        return x + y
    }
}

export default{
    
    
    msg,
    add
}