JavaScriptカーネルシンボル33(+ES 6)#8.IIFE, Modules and Namespaces

IIFE
IIFEは、即時呼び出し関数式を表す.スキャン領域内の外部変数のアクセスを阻止し、すぐに呼び出すための関数を作成する場合に使用します.

//1.
(function()){
 	console.log("Hello World!")
 }()//Hello World!

//2.
(function func()){
 	console.log("Hello World!02")
 }()//Hello World!02
func()//error

//3.
(func03 = function(x){
  console.log(`Hello World! ${x}`)
})();//Hello World! undefined
func03("kim")//Hello World! kim

宣言と同時にIIFEを呼び出す.フィーチャーは関数名を省略できます.通常の関数式のようにハイライトされます.
2回目のように、関数宣言式をすぐに関数式に変換できます.でもこれ以上使えません.
3番目のように、関数式をすぐに作成できます.再利用可能です.やってみた
Module
当初,モジュール化システムはなかったが,絶えず発展するフロントエンド環境に適応するために,モジュールの重要性を認識し導入を試みた.現在のノード.jsはCommonJSのモジュールシステムを採用し,ES 6からJavaScriptが独自にモジュールシステムを導入した.CommonJSとAMDのNAVER D 2について
モジュールはローカルファイルでは動作せず、HTTPまたはHTTPSプロトコルのみで動作します.🤣
-Nodeのmodule:require.

//file01.js
const mode = "kim";
module.exports = mode;
//------------------------------------
//file02.js
const mode = require('./file01.js')
console.log(mode)//kim

繰り返しエクスポートできます.関数もエクスポートされます.

//file01.js
const mode01 = "kim";
const mode02 = function(){
 	return "lee" 
}
module.exports = { mode01, mode02 }
//------------------------------------
//file02.js
const mode = require('./file01.js')
console.log(mode.mode01)//kim
console.log(mode.mode02)//kim

相対パスのファイル拡張子.js, .json, .nodeファイルを読み込むことができます.

フォルダをパスとして指定した場合は、そのフォルダのインデックスファイルを参照してください.

パスタグがない場合は、最上位パスから/node modulesフォルダを前面に配置し、ナビゲートします.

上位3ビット

が見つからない場合は、OSグローバルファイルを参照してください.

-browserのmodule:import.
ES 6はモジュール化システムを導入した.しかしIEが起動できないので2022年中旬まで待ちましょう.
importモジュールの特徴!😊

モジュールは常に厳格なモードで動作します.

モジュールには独自のスキャナーがあります.したがって、モジュール内で定義された変数または関数は、他のスクリプトからアクセスできません.

は複数の場所で同じモジュールを使用しているが、モジュールは最初の呼び出し時に1回のみ実行される.実行後の結果は、このモジュールをインポートするすべてのモジュールに出力されます.たとえば、File 01でPropertyを変更すると、File 02でもPropertyが変更されます.

import.metaオブジェクトは、現在のモジュールに関する情報を提供します.

thisは未定義のものを出力します.

<script type="module">
	let user = "John";
</script>
<script type="module">
	alert(user)//error
</script>

モジュールを使用する場合はtype=「module」を指定する必要があります.前述したように、モジュールレベルスキャンの開始は、独立した領域となる.alert(ユーザー)にエラーが発生した原因.

//file01.js
export const mode01 = "kim";
const mode02 = "lee";
const mode03 = "park";

export mode02
//or 여러개 내보낼때 export {mode02, mode03}

//------------------------------------
//file02.js
import mode from "./file01";//export한거 객체 불러오기
import {mode02, mode03} from "./file01";//export 부분만 불러오기

console.log(mode.mode01)//kim

file 01はmode 01の前にexportを追加し、すぐにエクスポートできます.

requireのように集約およびエクスポートすることもできます.

を一度に読み込む場合は、インポートモジュールの名前を指定する必要があります.

インポートは、

の一部のみをロードする場合、エクスポートの一部のみをロードできます.

//file01.js
const mode01 = "kim";
export default mode01

//------------------------------------
//file02.js
import mode from "./file01";
console.log(mode)//kim

export defaultでは、モジュールファイルで指定した1つのみをエクスポートできます.

//file01.js
export const mode01 = "kim";
export const mode02 = "lee";

//------------------------------------
//file02.js
import {mode01, mode02 as A , B}mode from "./file01";
import * All from "./file02";
console.log(mode)//kim

asで別名を指定できます.
*すべてのエクスポートをインポートできます.
Namespaces
ネーミングスペースとは、オブジェクトや変数が重ならないように安全なソースコードを作成することです.
JavaScriptでは、ネーミングスペースの機能はサポートされていません.しかし、ネーミングスペースのような効果を実現する方法はいくつかあります.
Namespaces_01. IIFEの使用
IIFEを使用すると、グローバル変数を減らすことができます.宣言後すぐに実行し、グローバルオブジェクトを汚染しません.

var obj = (function func02(){
	var say = "HI";
  	
  	return console.log(say)
})();//Hi!

obj()

このように使用すると、IIFEのsay変数名が消えてしまうので、心配する必要はありません.
もう1つの方法は、インスタントオブジェクトの初期化です.

({
	name : "kim",
  	say(){
    	console.log(`HI ${this.name}`)
    }
}).say()//hi kim

オブジェクトを使用すると、そのオブジェクトはすぐに消えます.
Namespaces_02. オブジェクトの操作
これは最も基本的な図案です.オブジェクトを作成したら、ここにすべてのオブジェクトを追加します.

let container01 = {
	A : 1,
    B : 2,
  	subCon : {
    	C:3,
      	D(){
        	console.log("HI01")
        }
    }
}

let container02 = {
	A : 1,
    B : 2,
  	subCon : {
    	C:3,
      	D(){
        	console.log("HI02")
        }
    }
}

container01.A//1
container02.subCon.D()//HI02

学習の過程で、私がプロジェクトで使用しているCSSネーミングモードとよく似ていることがわかりました.例えばword pressは、このモードでCSSを作成しました.あとClassと文法も似ています