ESモジュールについて知っておくべきいくつかのタブー(一)

背景ES ModuleはJavaScriptのバージョンで提供された言語標準レベルのモジュール化スキームであり、これまでにES2015は言語レベルのモジュール化システムがなかった.モジュール化のサポートがなく、JavaScriptを使って大規模なアプリケーションを開発するのは困難であるため、多くの実践を経て、コミュニティはいくつかのモジュールローディングスキームを制定しました.最も主要なのはブラウザを実行するJavaScript案とNodejsを代表とするサービス端末で実行するAMD案があります.CommonJSやWebpackなどの包装、転送ツールの出現によって、開発者はすでにBabelを開発中に使用できるようになりました.しかし、ES Module案は、フロントエンド構築ツールとサービス端末における普及度のために、AMD、古いバージョンのNodejsが消滅する前に、私たちはやはりCommonJS案とNodejsとの間の違いに注目したい.後の禁止点のために敷設するために、まず、2つのAPIを理解したり、振り返ったりするようにしましょう.
Object.prevent Extensions
Object.prevent Extensions()は、オブジェクトをもはや拡張不可能としてマークしています.したがって、それを超える拡張不可能としてマークされた属性は永遠に持たれません.なお、一般的には、拡張不可能なオブジェクトの属性は依然として削除され得る.新しい属性を拡張不可能なオブジェクトに追加してみます.沈黙に失敗したり、Type Errorを投げ出したりします.厳格なモードで、拡張不可能なオブジェクトに属性を追加してみたら、異常を投げます.具体的なコードは以下の通りです.

"use strict"
var obj = {
    age: 23,
    name: 'rioli',
    city: ['sz', 'jy']
};
Object.preventExtensions(obj);
obj.province = 'GD';

実行結果:

Uncaught TypeError: Cannot add property 'province', object is not extensible 

Object.freeze
Object.freeze()メソッドはオブジェクトを凍結できます.凍結とは、このオブジェクトに新しい属性を追加できないこと、既存の属性の値を修正できないこと、既存の属性を削除できないこと、また、オブジェクトの既存の属性のエニュメレーション性、配置性、書き込み可能性を変更できないことです.この方法は凍結されたオブジェクトを返します.厳格なモードで凍結されたオブジェクトの属性変更を試みた場合、異常が発生します.具体的なコードは以下の通りです.

"use strict"
var obj = {
    age: 23,
    name: 'rioli',
    city: ['sz', 'jy']
};
Object.freeze(obj);
obj.age = 26;

実行結果:

Uncaught TypeError: Cannot assign to read only property 'age' of object '#

拡張不可能な凍結対象を構築するES ModuleとCommonJSという二つのAPIを利用して、拡張不可能な凍結対象を構築することができます.すなわち、オブジェクトのトップクラスの属性オブジェクトの増加、削除、変更などの操作ができません.

"use strict"
var obj = {
    age: 23,
    name: 'rioli',
    city: ['sz', 'jy']
};
Object.freeze(obj);
Object.preventExtensions(obj);
// obj.age = 26;            
// obj.province = 'GD';             
// delete obj.name;            
//                 ，                        ，                  
obj.city[0] = 'zq';
obj.city.push('st');

ES Module禁忌の全体導入モジュールオブジェクトの直接属性を変更することはできません.
なぜこの禁忌が挙げられているのかというと、Object.preventExtensions案においては、モジュールオブジェクト全体の直接的な属性を変更することができ、Object.freezeにおいて長期間にわたってクロスして使用すると、不必要な記憶を混乱させかねないからです.しかし、Object.preventExtensionsにおいて、全体的に導入されたモジュールオブジェクトは、拡張不可能な凍結された定数オブジェクトであり、その直接的な属性の修正と追加はエラーを引き起こす.Object.freeze環境にあると仮定します.例えば、NodeJSでは、モジュールを導入し、モジュールオブジェクトの属性を修正し、追加してみます.具体的なコードは以下の通りです.ES Module

exports.time = Date.now();
exports.getCurrrentYear = function () {
    return new Date().getFullYear();
}
exports.people = {
    age: 26,
    name: 'rioli',
    cities: ['jieyang', 'shenzhen']
};

CommonJS

const lib = require('./lib');
const people = lib.people;

const print = (data) => {
    console.log("===================================");
    console.log(data);
};

print(people);
print(lib);

people.age = 999;
print(people);

people.father = 'baba';
print(people);

lib.people = 23;
print(lib);

lib.people.age = 666;
print(lib);

lib.provices = ['GD', 'FJ'];
print(lib);

運転結果は、コンソール出力の結果は以下の通りです.

===================================
{ age: 26, name: 'rioli', cities: [ 'jieyang', 'shenzhen' ] }
===================================
{ time: 1545274516494,
  getCurrrentYear: [Function],
  people: { age: 26, name: 'rioli', cities: [ 'jieyang', 'shenzhen' ] } }
===================================
{ age: 999, name: 'rioli', cities: [ 'jieyang', 'shenzhen' ] }
===================================
{ age: 999,
  name: 'rioli',
  cities: [ 'jieyang', 'shenzhen' ],
  father: 'baba' }
===================================
{ time: 1545274516494, getCurrrentYear: [Function], people: 23 }
===================================
{ time: 1545274516494, getCurrrentYear: [Function], people: 23 }
===================================
{ time: 1545274516494,
  getCurrrentYear: [Function],
  people: 23,
  provices: [ 'GD', 'FJ' ] }

CommonJS環境において、全体的に導入されたモジュールオブジェクトですが、属性が修正され、追加された場合、その表現と上記のES ModuleとES Moduleという二つのAPIを利用して、拡張不可能な凍結オブジェクトを構築するという表現は同じです.すなわち、このモジュールオブジェクトは拡張不可能な凍結定数オブジェクトです.デモコードは以下の通りです.CommonJs

export const time = Date.now();

export function getCurrrentYear() {
    return new Date().getFullYear();
}

export const people = {
    age: 26,
    name: 'rioli',
    cities: ['jieyang', 'shenzhen']
};

lib.js

import { people } from './lib.mjs';
import * as lib from './lib.mjs';

//        ，       import * as xx from 'yy'            ，  xx           

const print = (data) => {
    console.log("===================================");
    console.log(data);
};

print(people);
print(lib);

//     
people.age = 999;
print(people);

//     
people.father = 'baba';
print(people);

//      ，         ，                ，       
try {
    lib.people = 23;
    print(lib);
} catch (e) {
    print(e);
    print("     lib.people，         ，                ，       ");
}

//     ，         ，                ，   
//              ，       （           ）
lib.people.age = 666;
print(lib);

//      ，            ，                      ,              
try {
    lib.provices = ['GD', 'FJ'];
    print(lib);
} catch (e) {
    print(e);
    print("    lib      ,     ，            ，                      ,              ");
}

具体的な運行結果:

===================================
{ age: 26, name: 'rioli', cities: [ 'jieyang', 'shenzhen' ] }
===================================
{ getCurrrentYear: [Function: getCurrrentYear],
  people: { age: 26, name: 'rioli', cities: [ 'jieyang', 'shenzhen' ] },
  time: 1545275257126 }
===================================
{ age: 999, name: 'rioli', cities: [ 'jieyang', 'shenzhen' ] }
===================================
{ age: 999,
  name: 'rioli',
  cities: [ 'jieyang', 'shenzhen' ],
  father: 'baba' }
===================================
TypeError: Cannot assign to read only property 'people' of object '[object Module]'
    at ModuleJob.run (internal/modules/esm/ModuleJob.js:106:14)
    at 
===================================
     lib.people，         ，                ，       
===================================
{ getCurrrentYear: [Function: getCurrrentYear],
  people:
   { age: 666,
     name: 'rioli',
     cities: [ 'jieyang', 'shenzhen' ],
     father: 'baba' },
  time: 1545275257126 }
===================================
TypeError: Cannot add property provices, object is not extensible
    at ModuleJob.run (internal/modules/esm/ModuleJob.js:106:14)
    at 
===================================
    lib      ,     ，            ，                      ,