关于ES模块你必须要知道的一些禁忌(一)

背景

ES ModuleJavaScriptES2015版本开始提供的语言标准级别的模块化方案,在此之前JavaScript一直没有语言级别的模块化体系。没有模块化的支持,使用JavaScript开发大型应用将举步维艰,所以经过大量的实践,社区制定了一些模块加载方案,最主要的有运行于浏览器的AMD方案和运行于以Nodejs为代表的服务端的CommonJS方案。

由于WebpackBabel等打包、转义工具的出现,开发者已经可以在开发中使用ES ModuleAMD已是明日黄花,使用的人越来越少,不太值得去关注。但CommonJS方案由于Nodejs在前端构建工具和服务端中的普及度,在Nodejs全面支持ES Module、老版本Nodejs消亡之前,我们还是要关注CommonJS方案以及它与ES Module之间的区别,以免搞混、记忆混淆,酿成bug。为了为后面的禁止点做铺垫,先让我们来了解或回顾两个API:Object.preventExtensionsObject.freeze

Object.preventExtensions

Object.preventExtensions()将对象标记为不再可扩展,因此它将永远不会具有超出它被标记为不可扩展的属性。注意,一般来说,不可扩展对象的属性可能仍然可被删除。尝试将新属性添加到不可扩展对象将静默失败或抛出TypeError(在strict mode下)
当我们在严格模式下,尝试对不可拓展的对象进行属性添加时,就会抛出异常,具体代码如下:

"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 '#<Object>'

构建不可拓展的冻结对象

我们可以利用Object.preventExtensionsObject.freeze这两个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禁忌之不可以修改整体导入模块对象的直接属性

为什么会列出这个禁忌,这是因为在CommonJS方案中,你是可以修改整体导入模块对象的直接属性的,长期在CommonJSES Module中交叉使用,难免会造成不必要的记忆混淆。但是在 ES Module中,整体导入的模块对象是一个不可拓展的冻结的常量对象,对其直接属性的修改和新增将引发报错。

假定我们正处于CommonJs环境下,例如NodeJS中,我们导入等个模块,然后尝试对模块对象的属性进行修改和新增,具体代码如下:

lib.js

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

main.js

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' ] }

ES Module环境下,整体导入的模块对象,但我们对其进行修改和新增属性的时候,其表现和上述利用Object.preventExtensionsObject.freeze这两个API来组合构建一个不可拓展的冻结对象的表现一样,即:这个模块对象是一个不可拓展的冻结的常量对象。演示代码如下:

lib.mjs

export const time = Date.now();

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

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

main.mjs

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 <anonymous>
===================================
不允许修改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 <anonymous>
===================================
不允许对lib对象新增属性,整体导入时,不允许给模块对象新增属性,因为整体导入时的模块对象是一个不可拓展的对象,不可以给模块对象新增任何属性
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355

推荐阅读更多精彩内容