Jimliu


一只刚上路的前端程序猿


js中引入模块那些事

系统的总结一下 js 引入模块的方式。

主流模块及规范

在es6以前,还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种:CommonJS 和 AMD

CommonJS

在CommonJS中,暴露模块使用module.exports和exports;
在一个node执行一个文件时,会给这个文件内生成一个 exports和module对象,
而module又有一个exports属性。他们之间的关系如下图,都指向一块{}内存区域。

1
exports = module.exports = {};

在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个公共方法模块utils.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
let a = 100;

console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}

exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200}

exports = '指向其他内存区'; //这里把exports的指向指走

//test.js

var a = require('/utils');
console.log(a) // 打印为 {a : 200}
从上面可以看出,其实require导出的内容是module.exports的指向的内存块内容,并不是exports的。
简而言之,区分他们之间的区别就是 exports 只是 module.exports的引用,辅助后者添加内容用的。

exports只辅助module.exports操作内存中的数据,辛辛苦苦各种操作数据完,累得要死,结果到最后真正被require出去的内容还是module.exports的。

所以建议大家还是用module.exports 导出;

ES中的模块

在ES中有 export与export default 和 import a from ‘a’ 与 import {a} from ‘a’;

export 和 export default

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

export.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//导出变量
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var express = require('express');
var router = express.Router();

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

import * as testModule from './export';//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;
最近的文章

centos安装node-canvas的那些坑!

坑一node-canvas包在build的时候 需要c11,所以最低的gcc版本应该为gcc 4.7。但是许多centos系统中安装的gcc默认版本为Gcc 4.4.7.导致node-canvas安装不成功。需要将服务器的gcc版本更新。 坑二我们侥幸的开了 gcc版本的坑,还需要安装cairo …

于  linux, node 继续阅读
更早的文章

logstash解析nginx日志

配置好ELK后,使用logstash读取nginx日志,但是logstash没有默认的nginx日志格式解析插件,需要自己使用正则匹配。这里有一个简便的配置方案: 1.配置nginx日志log format12345678910111213log_format json '{"@times …

于  ELK, linux 继续阅读