exports and module.exports（9.19）

描述

今天写react 的一个组件的时候，遇见一个问题，我想要exports defaults withrouter(组件名)，也想要 exports defaults conect(...),两个都需要exports，怎么办？当时的想法有两个，一是export default withRouter(connect(...)(组件名));二是module.exports; 很明显第一种做法才是最好的，关于modules.exports，再复习和学习。

问题解决

Q1: module.exports 和exports 的区别是什么？
A1：js 变量值的类型有两种，基本类型：Undefined,Null,Boolean,Number,String 五种；应用类型：保存内存中的对象，不能直接操作，只能通过保存在变量中的地址引用对其进行操作。

• 每一个node.js执行文件，都自动创建一个module对象，同时，module对象会创建一个叫exports的属性，初始化的值是 {}，module.exports = {}
• exports 是指向的 module.exports 的引用,module.exports 被改变的时候，exports不会被改变.
• require() 返回的是 module.exports 而不是 exports
  例子：

var module = {
    exports:{
        name:"我是王丹娜"
    }
};
var exports = module.exports;
  //exports是对module.exports的引用,也就是exports现在指向的内存地址和module.exports指向的内存地址是一样的

console.log(module.exports);    //  { name: '我是王丹娜' }
console.log(exports);   //  { name: '我是王丹娜' }

exports.name = "我是马红";

console.log(module.exports);    //  { name: '我是马红' }
console.log(exports);   //  { name: '我是马红' }
//引用的结果就是a和b都操作同一内存地址下的数据

//这个时候我在某个文件定义了一个想导出的模块
var Boy = {
    name:"boy"
};

exports = Boy;  //  Boy这个Object在内存中指向了新的地址，所以exports也指向了这个新的地址，和原来的地址没有关系了

console.log(module.exports);    //  { name: '我是马红' }
console.log(exports);   // { name: 'Boy'}

---

Q2: 既然 require 返回的是 module.exports,那么import 导入返回的又是什么？require 和import的区别又是什么？
A2: require方法是CommonJs推出的，NodeJs自带了这个功能。而import是ES6推出的. Babel默认会把ES6的模块转化为commonjs规范的。
所以：

import list from './list';
//等价于
var list = require('./list');

---

Q3: 项目中常常看见export, exports ，这两者关联是什么？
A3: module.exports导出对应require导入，export导出对应import导入，也就是说require/modules.exprorts 是一对，import/export 是一对。
CommonJS 还是 ES6 Module 输出都可以看成是一个具备多个属性或者方法的对象；import 是在编译过程中执行，而common的require是同步。还有import传的是值引用，require是值拷贝。require都会用在动态加载的时候，import静态编译，import的地址不能通过计算。

---

Q4:该用require还是import?
A4:目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require。这也是为什么在模块导出时使用module.exports，在引入模块时使用import仍然起效，因为本质上，import会被转码为require去执行。

---

Q5: 项目中常见的export default 的含义？
在export的时候，可能会用到default，说白了，它其实是别名的语法糖：

// d.js
export default function() {}

// 等效于：
function a() {};
export {a as default};

在import的时候，可以这样用：

import a from './d';
// 等效于，或者说就是下面这种写法的简写，是同一个意思
import {default as a} from './d';

反思

学习JavaScript这么久了，许多概念还是很含糊，理解不透彻

action

以后学习的过程遇到不清楚的要查明白，不仅要知其然还要知其所以然。多想想为什么，能不能换个写法。。。不清楚的知识写demo.