一文读懂JavaScript模块化开发(一)

一文读懂JavaScript模块化开发(一)
JavaScript模块化开发,早期会使用CommonJS或者AMD标准进行开发,但从ES6开始确定了原生支持的模块化标准。本文主要探讨CMD模块化开发和ES模块化标准的使用差异。

CommonJS模块化

CommonJS模块化运用于Node.js开发中,使用require和exports语法来输入和输出。

例如,我们输出a变量和func函数:

exports.a = 1;
exports.func = function(){
    console.log("hello!")
}

那么输入语法可以这样写:

var cmdModule = require("./cmdModule.js");
cmdModule.a     // 1
cmdModule.func  // function

输出的变量和函数在导入时会自动被包裹上一层命名空间(JSON),需要打点去调用所暴露的变量和函数。

此外require语句无论调用几次均只执行一次,在第一次加载时模块会被缓存,之后都从缓存中直接读取结果。

使用exports可以向外暴露很多东西,但如果我们只需要向外暴露一个类,那么此时调用时候会很不方便,例如

输出:

function People(name, age){
    this.name = name;
    this.age  = age;
}
exports.People = People;

调用:

var People = require("./People.js");
var person = new People.People("小明", 18);

可以看到,调用函数new的时候需要写People.People(),十分的麻烦。

如果js文件只需要向外输出一个函数,此时可以使用module.exports = xx的写法。

例如刚才的例子,我们可以改为

输出:

function People(name, age){
    this.name = name;
    this.age  = age;
}
moudle.exports.People = People;

调用:

var People = require("./People.js");
var person = new People("小明", 18);

总结,如果一个js模块要向外暴露很多个变量,那么我们应该使用exports.xx = xx;如果仅仅暴露一个东西,通常是构造函数,此时我们使用module.exports = xx。

ES模块化

直接罗列需要输出的变量或者函数

export let a = 1;

export function sayHello() {
  console.log("hello!")
}

顶部定义,底部向外暴露:

function calCircleArea(r){
    return Math.PI * Math.sqrt(r);
}

export { calCircleArea }

引入时:

import { calCircleArea, a, sayHello } from "./circle.js";

当然我们还可以给定一个Namespace,引入该包里的所有函数和变量:

import * as Circle from "./circle.js";

如果我们只向外默认暴露一个东西,那么可以使用export default写法:

export default function People(name, age) {
  this.name = name;
  this.age = age;
}

People.prototype.sayHello = function() {
  alert("Hello!");
}

引入时:

import People from "./People.js"

let xiaoming = new People("小明", 18);
xiaoming.sayHello();

注意,这里引入的People是一个Alias,可以起任意的名字,我们不需要纠结到底暴露的是什么函数名。

CommonJS模块和ES模块差异

ES6的设计思想是尽量静态化,能保证在编译时就确定模块之间的依赖关系,每个模块的输入和输出变量也都是确定的,而CommonJS无法在编译时就确定这些内容,只能在运行时确定。
其次CommonJS输出的是一个值的拷贝,而ES模块输出的是值的动态映射,并且这个映射是只读的。

以CommonJS为例

// calculator.js
let count = 0;
const add = function(a, b) {
    count += 1;
    return a + b;
};
export { count, add };

// index.js
import { count, add } from './calculator.js';

console.log(count); // 0(对 calculator.js 中 count 值的映射)
add(2, 3);
console.log(count); // 1(实时反映calculator.js 中 count值的变化)

// count += 1; // 不可更改,会抛出SyntaxError: "count" is read-only

index.js中的count是对calculator.js中count的一份值拷贝,因此在调用add函数时,虽然更改了原本calculator.js中count的值,但是并不会对index.js中导入时创建的副本造成影响。

另一方面,在CommonJS中允许对导入的值进行更改。我们可以在index.js更改count和add,将其赋予新值。同样,由于是值的拷贝,这些操作不会影响calculator.js本身。

下面我们使用ES6 Module将上面的例子进行改写:

// calculator.js
let count = 0;
const add = function(a, b) {
    count += 1;
    return a + b;
};
export { count, add };

// index.js
import { count, add } from './calculator.js';

console.log(count); // 0(对 calculator.js 中 count 值的映射)
add(2, 3);
console.log(count); // 1(实时反映calculator.js 中 count值的变化)

// count += 1; // 不可更改,会抛出SyntaxError: "count" is read-only

上面的例子展示了ES6 Module中导入的变量其实是对原有值的动态映射。index.js中的count是对calculator.js中的count值的实时反映,当我们通过调用add函数更改了calculator.js中count值时,index.js中count的值也随之变化。

Reference

JavaScript前端开发

研究一下WebSocket

2021-5-10 18:12:04

CSS前端开发

研究一下Flex布局

2021-5-26 21:38:14

搜索