详解Sea.js中Module.exports和exports的区别


Posted in Javascript onFebruary 12, 2017

详解Sea.js中Module.exports和exports的区别

一、官方解释

因为SeaJs和Nodejs都是基于CommonJS,所以直接看的Node的官方文档解释
Module.exports

The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.exports. Note that assigning the desired object to exports will simply rebind the local exports variable, which is probably not what you want to do.
module.exports对象是由模块系统创建的。 有时这是难以接受的;许多人希望他们的模块成为某个类的实例。 为了实现这个,需要将期望导出的对象赋值给module.exports。 注意,将期望的对象赋值给exports会简单地重新绑定到本地exports变量上,这可能不是你想要的。

exports

The exports variable is available within a module's file-level scope, and is assigned the value of module.exports before the module is evaluated. It allows a shortcut, so that module.exports.f = ... can be written more succinctly as exports.f = .... However, be aware that like any variable, if a new value is assigned to exports, it is no longer bound to module.exports:
译文:exports变量是在模块的文件级别作用域内有效的,它在模块被执行前被赋于 module.exports 的值。它有一个快捷方式,以便 module.exports.f = ... 可以被更简洁地写成exports.f = ...。 注意,就像任何变量,如果一个新的值被赋值给exports,它就不再绑定到module.exports(其实是exports.属性会自动挂载到没有命名冲突的module.exports.属性)

require

从require导入方式去理解,关键有两个变量(全局变量module.exports,局部变量exports)、一个返回值(module.exports)

function require(...) { 
 var module = { exports: {} };
 ((module, exports) => {
 // 你的被引入代码 Start
 // var exports = module.exports = {}; (默认都有的)
 function some_func() {};
 exports = some_func;
 // 此时,exports不再挂载到module.exports,
 // export将导出{}默认对象
 module.exports = some_func;
 // 此时,这个模块将导出some_func对象,覆盖exports上的some_func 
  // 你的被引入代码 End
 })(module, module.exports);
 // 不管是exports还是module.exports,最后返回的还是module.exports 
 return module.exports;
}

二、Demo事例

事例一:1.js

console.log(exports); // {} 
console.log(module.exports); // {} 
console.log(exports === module.exports);  // true 
console.log(exports == module.exports);    // true 
/**
 Module {
 id: '.',
 exports: {},
 parent: null,
 filename: '/1.js',
 loaded: false,
 children: [],
 paths:
  [ 
   '/node_modules' ] 
 }
 */
console.log(module);

从事例一中,可以看出来

      1.每个js文件一创建,都有一个var exports = module.exports = {}; ,使exportsmodule.exports都指向一个空对象。

      2.module是全局内置对象,exports是被var创建的局部对象。

      3.module.exportsexports所指向的内存地址相同

事例二:2.js、3.js

// 2.js
exports.id = 'exports的id'; 
exports.id2 = 'exports的id2'; 
exports.func = function(){ 
  console.log('exports的函数');
};
exports.func2 = function() { 
  console.log('exports的函数2');
};
module.exports = { 
  id: 'module.exports的id',
  func:function(){
    console.log('module.exports的函数');
  }

};
// 3.js
var a = require('./2.js'); 
// 当属性和函数在module.exports都有定义时:
console.log(a.id); // module.exports的id 
console.log(a.func()); // module.exports的函数

// 当属性在module.exports没有定义,函数在module.exports有定义
console.log(a.id2); // undefined 
console.log(a.func()); // module.exports的函数

// 当函数在module.exports没有定义,属性在module.exports有定义
console.log(a.id);    // module.exports的id 
console.log(a.func2());  // 报错了 TypeError: a.func2 is not a function

由例二可以知道:

      1.module.exports像是exports的大哥,当module.exports{}整体导出时会覆盖exports的属性和方法,

      2.注意,若只是将属性/方法挂载在module.exports./exports.上时,exports.id=1module.exports.id=100module.exports.id=function(){}exports.id=function(){} ,最后id的值取决于exports.idmodule.exports.id的顺序,谁在后,就是最后的值

详解Sea.js中Module.exports和exports的区别

      3.若exportsmodule.exports同时赋值时,exports所使用的属性和方法必须出现在module.exports,若属性没有在module.exports中定义的话,出现undefined,若方法没有在module.exports中定义,会抛出TypeError错误。

例三 4.js、5.js

module.exports的对象、prototype、构造函数使用

// 4.js
var a = require('./5.js'); 
// 若传的是类,new一个对象
var person = new a('Kylin',20); 
console.log(person.speak()); // my name is Kylin ,my age is 20

// 若不需要在构造函数时初始化参数,直接调用方法/属性
// a.speak(); // my name is kylin ,my age is 20
// 5.js
// Person类
function Person(name,age){ 
  this.name = name;
  this.age = age;
}
// 为类添加方法
Person.prototype.speak = function(){ 
  console.log('my name is '+this.name+' ,my age is '+this.age);
};

// 返回类
module.exports = Person;

// 若构造函数没有传入参数(name,age),直接传入对象
// module.exports = new Person('kylin',20);

说了这么多,其实建议就是,如果只是单一属性或方法的话,就使用exports.属性/方法。要是导出多个属性或方法或使用对象构造方法,结合prototype等,就建议使用module.exports = {} 。文章有很多地方描述的可能不是很准确,提到的点也不够全面,如果有不对的地方,还望斧正!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
node内置调试方法总结
Feb 22 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 #Javascript
超全面的vue.js使用总结
Feb 12 #Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 #Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 #Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 #Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 #Javascript
JavaScript表单验证的两种实现方法
Feb 11 #Javascript
You might like
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
深入学习python的yield和generator
2016/03/10 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
外贸采购员求职的自我评价
2013/11/26 职场文书
优秀党员主要事迹
2014/01/19 职场文书
中学教师请假制度
2014/02/03 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
公司委托书格式范文
2014/10/09 职场文书
公司年会开场白
2015/06/01 职场文书
郭明义观后感
2015/06/08 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL