ES 6知識点整理のモジュール化の応用詳細

4086 ワード
この実例は、ES 6の知識点整理のモジュール化の応用について述べる.皆さんに参考にしてあげます.具体的には以下の通りです.
現在のブラウザはまだモジュール化を完全にサポートしていません.多くのコンパイル環境を導入する必要があります.次にnodejsでES 6のモジュール化をシミュレートします.
nodejsにおけるモジュール化デモの構成
  • 環境のインストール:npm install --save babel-cli babel-preset-node6
  • 実行:./node_modules/.bin/babel-node.js --presets node6 ./your_script.js
  • 追加.babelrcファイルは、以下のように編集されています.
    
{
 "presets": [
    "node6"
 ]
}
    このファイルを追加しました.実行時に、�Cpresetsパラメータを追加する必要はありません.
  • 参照リンク:https://stackoverflow.com/questions/33604470/unexpected-token-import-in-nodejs5-and-babel
    • 変数をエクスポートする3つのモード
    test 1モジュール:
    
//   1
export var a = "I am a";
//   2
var b = "I am b";
export {b};
//   3
var c = "I am c";
export {c as d} //  c   d,         import d
    indexモジュール:
    
import {a, b, d} from './test1';
console.log(a); // I am a
console.log(b); // I am b
console.log(d); // I am c
    非同期エクスポートモジュールのテスト
    test 2モジュール:
    
//     
var m = "I am m";
export {m};
setTimeout(()=>{
 m = "I am mm";
},1000);
    indexモジュール
    
import {m} from './test2';
console.log(m); // I am m
setTimeout(()=>{
 console.log(m); // I am mm
},1500);
    複数モジュールをそれぞれエクスポート
    test 3モジュール
    
var A = 1111,
 B = 2222,
 C = 3333;
var M = 'M';
export default M;
export {A as A1, B as B1, C as C1};
    indexモジュール:
    
import M, {A1, B1, C1} from './multi';
console.log(A1); // 1111
console.log(B1); // 2222
console.log(C1); // 3333
console.log(M); // M
    オブジェクトのエクスポート
    Userモジュール:
    
export class User{
 constructor(name){
  this.name = name;
 }
 get uname() {
  return this.name;
 }
 set uname(name) {
  this.name = name;
 }
}
    indexモジュール:
    
import {User} from './User';
var user = new User('Joh');
console.log(user.uname); // Joh
user.uname = 'Lily';
console.log(user.uname); // Lily
    エクスポート関数モジュール
    funcモジュール
    
export function Log(str) {
 console.log(str);
}
    indexモジュール
    
Log("I am log"); // I am log
    標準モジュールの名前を変更
    renameモジュール:
    
export default "rename";
    indexモジュール:
    
import {default as nr} from './rename';
console.log(nr); // rename
    デフォルトのモジュールは他のモジュールと一緒にエクスポートされます.
    commbineモジュール:
    
export var a = 1;
export default 111;
    方式1:
    indexモジュール:
    
import {default as com, a as comA} from './com';
console.log(com); // 111
console.log(comA); // 1
    方式2:
    indexモジュール:
    
import t, { a as comA} from './com';
console.log(t); // 111     t         
console.log(comA); // 1
    その他の注意事項
  • でexportを定義する場合、最上階で定義しなければならないが、他のところでは関数内部
    • のように定義できない.
  • defaultの後には、export default var name = ‘Joh';というように、varを連れて導出することができません.
  • は、全モジュールをimport *でエクスポートしないでください.これは非常に良くないです.
  • {}が導入したのはデフォルトモジュールではなく、デフォルトモジュールは{}
    • を持つ必要がない.
  • defaultから導出されたものは再び修正されない.defaultから導出されたものがデジタル変数である場合、他のところで修正されても、元の値は変更されずに維持される.
  • http://es6.ruanyifeng.com/#docs/module ここには他の注意事項のまとめがあります.
    JavaScriptの関連内容については、当駅のテーマを見ることができます.「javascript対象入門教程」、「JavaScript切替特効と技巧のまとめ」、「JavaScript検索アルゴリズム技術のまとめ」、「JavaScriptエラーとデバッグ技術のまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」『JavaScript数学演算の使い方のまとめ』
    本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.
    • nodejsメモリオーバーフロー