模块加载规范对比

Posted 初学者学习笔记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模块加载规范对比相关的知识,希望对你有一定的参考价值。

一、commonJS模块加载规范

CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。浏览器端一般采用AMD模块加载方式或者ES6的模块加载标准。

模块导出方法(为防止混淆,建议一律采用module.exports而非exports):

模块导入方法:利用require

//文件a.js
module.exports=function(){
  console.log(a);  
}

//在文件b中使用
var a=require(./a.js);
a();

/*在文件a.js中利用对象的形式导出*/
module.exports.a=function(){
    console.log(a);
};
//在文件b中使用
var obj=require(./a.js);
obj.a();

 

var a=require(filePath);

 

需了解模块加载规则:

(1)如果参数字符串以“/”开头,则表示加载的是一个位于绝对路径的模块文件。比如,require(‘/home/marco/foo.js‘)将加载/home/marco/foo.js

(2)如果参数字符串以“./”开头,则表示加载的是一个位于相对路径(跟当前执行脚本的位置相比)的模块文件。比如,require(‘./circle‘)将加载当前脚本同一目录的circle.js

(3)如果参数字符串不以“./“或”/“开头,则表示加载的是一个默认提供的核心模块(位于Node的系统安装目录中),或者一个位于各级node_modules目录的已安装模块(全局安装或局部安装)

(4)如果指定的模块文件没有发现,Node会尝试为文件名添加.js.json.node后,再去搜索。.js件会以文本格式的javascript脚本文件解析,.json文件会以JSON格式的文本文件解析,.node文件会以编译后的二进制文件解析。

(6)如果想得到require命令加载的确切文件名,使用require.resolve()方法。

 

二、ES6模块加载规范

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

ES6的模块命令主要包括export和import,

 

// profile.js
var firstName = Michael;
var lastName = Jackson;
var year = 1958;

export {firstName, lastName, year};

 

import {firstName, lastName, year} from ./profile;

此外还有export default命令

从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

export default function () {
  console.log(foo);
}

上面代码是一个模块文件export-default.js,它的默认输出是一个函数。

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from ./export-default;
customName(); // ‘foo‘

 

以上是关于模块加载规范对比的主要内容,如果未能解决你的问题,请参考以下文章

CommonJs模块规范

JS - CommonJSES2015AMDCMD模块规范对比与介绍(附样例)

NodeJS - path模块简单使用

NodeJS - path模块简单使用

单页面应用和多页面应用的区别对比

论AMD,CMD,CommonJs 和 ES6对比