JavaScript笔记（CommonJS规范，以及exports、module.exports和export、export default区别）

最新推荐文章于 2024-09-19 11:30:51 发布

缩缩北行鸟

最新推荐文章于 2024-09-19 11:30:51 发布

阅读量4.9k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38801354/article/details/78024680

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

参考网站：

《模块-廖雪峰的官方网站》
《CommonJS规范》
《js模块化编程之彻底弄懂CommonJS和AMD/CMD》
《exports、module.exports和export、export default到底是咋回事》

1 CommonJS规范（node 模块）

为了写可维护的代码，常把很多函数分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较少，很多编程语言都采用这种组织代码的方式。
在 Node 环境中，一个.js文件就称之为一个模块（module），每个文件就是一个模块，有自己的作用域，在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见，而 Node 应用由模块组成，采用 CommonJS 模块规范。

CommonJS 定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

以下演示一个简单的CommonJS规范实例：
创建预引入文件 foo.js

'use strict';

var x = 5;
function addx (value){
	console.log( x + value );
}
module.exports.addx = addx;

创建加载文件 main.js

'use strict'

var example = require('./foo.js');
example.addx(10);
//输出：11 
module.exports.$ = example;

以上就是一个简单的CommonJS规范实例，CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性（注意模块的路径描述）。

CommonJS 模块特点：

1、所有代码都运行在模块作用域，不会污染全局作用域
2、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存
3、模块加载的顺序，按照其在代码中出现的顺序

浏览器不兼容CommonJS的根本原因，正是在于缺少四个Node.js环境的变量：module，require，exports，global

1.1 `module`对象

module对象，代表当前模块。它有以下属性：

module.id 模块的识别符，通常是带有绝对路径的模块文件名
module.filename 模块的文件名，带有绝对路径
module.loaded 返回一个布尔值，表示模块是否已经完成加载
module.parent 返回一个对象，表示调用该模块的模块
module.children 返回一个数组，表示该模块要用到的其他模块
module.exports 表示模块对外输出的值

如在main.js文件中，最后添加console.log(module)命令就可以看出以下输出结果：

Module {
  id: '.',//这里是相对路径
  exports: { '$': { addx: [Function: addx], x: 1 } },
  parent: null,
  filename: 'E:\\html&css\\test2.js',//这里是绝对路径
  loaded: false,
  children: 
   [ Module {
       id: 'E:\\html&css\\test.js',
       exports: [Object],
       parent: [Circular],
       filename: 'E:\\html&css\\test.js',
       loaded: true,
       children: [],
       paths: [Object] } ],
  paths: [ 'E:\\html&css\\node_modules', 'E:\\node_modules' ] 
 }

1.2 `module.exports`属性与`exports`变量

module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports。
而为了方便，Node为每个模块提供一个exports变量，指向module.exports，正因为如此不能直接对exports变量赋值，因为这样会等于切断了exports与module.exports的联系。

1.3 `require`方法

require 方法其实不是一个全局命令，而是指向当前模块的module.require命令。

1.3.1 加载规则

require 命令用于加载文件，后缀名默认为.js，但如果没能查找，Node会尝试为文件名添加.js、.json、.node后，再去搜索。
如果参数字符串不以./或/开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。
举例来说，脚本/home/user/projects/foo.js执行了require('bar.js')命令，Node会依次搜索以下文件：

/usr/local/lib/node/bar.js
/home/user/projects/node_modules/bar.js
/home/user/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

1.3.2 加载机制

CommonJS模块的加载机制是，输入的是被输出的值的拷贝，即一旦输出一个值，模块内部的变化就影响不到这个值，例如：

// foo.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// main.js
var counter = require('./lib').counter;
var incCounter = require('./lib').incCounter;
console.log(counter);  // 3
incCounter();
console.log(counter); // 3

1.3.3 模块的缓存

第一次加载某个模块时，Node会缓存该模块。所有缓存的模块保存在require.cache之中，如果想删除模块的缓存，可以这样写：

// 删除指定模块的缓存
delete require.cache[moduleName];

// 删除所有模块的缓存
Object.keys(require.cache).forEach(function(key) {
  delete require.cache[key];
})

2 ES6 中的模块导出导入

ES6 的模块导出导入主要理解以下几个点：

export 和 export default
import a from .. 和 import {a} from ..

2.1 `export` 和 `export default`

区别：

export 与 export default 均可用于导出常量、函数、文件、模块等
在一个文件或模块中，export、import可以有多个，export default 仅有一个
通过 export 方式导出，在导入时要加 { } ， export default 则不需要
export 能直接导出变量表达式， export default 不行。

例子：

export.js

'use strict'
//导出变量
export const a = '100';  

 //导出方法
export const dogSay = function(){ 
    console.log('wang wang');
}

 //导出方法第二种
function catSay(){
   console.log('miao miao'); 
}
export { catSay };

//export default导出
const m = 100;
export default m; 
//export defult const m = 100;// 这里不能写这种格式。

index.js

//index.js
'use strict'
var express = require('express');
var router = express.Router();

import { dogSay, catSay } from './testEs6Export'; //导出了 export 方法 
import m from './testEs6Export';  //导出了 export default 

import * as testModule from './testEs6Export'; //as 集合成对象导出



/* GET home page. */
router.get('/', function(req, res, next) {
  dogSay();
  catSay();
  console.log(m);
  testModule.dogSay();
  console.log(testModule.m); // undefined , 因为  as 导出是 把 零散的 export 聚集在一起作为一个对象，而export default 是导出为 default属性。
  console.log(testModule.default); // 100
  res.send('恭喜你，成功验证');
});

module.exports = router;