• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 详解Sea.js中Module.exports和exports的区别

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

作者:信鑫 字体:[增加 减小] 来源:互联网 时间:2017-05-11

信鑫通过本文主要向大家介绍了module.exports,js module.exports,module.exports app,vue module.exports,add module exports等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、官方解释

因为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变量上,这可能不是你想要的。
</div>

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.属性)
</div>

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;
}
</div>

二、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);
</div>

从事例一中,可以看出来

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

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

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

事例二: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的函数');
  }

};
</div>
// 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 
</div>

由例二可以知道:

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

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

      3.若exports和module.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
</div>
// 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);
</div>

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

总结

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详解Node.js中exports和module.exports的区别
  • Node.js 中exports 和 module.exports 的区别
  • 详解nodejs中exports和module.exports的区别
  • 详解Sea.js中Module.exports和exports的区别

相关文章

  • 2017-05-11vue.js+Element实现表格里的增删改查
  • 2017-05-11jQuery中绑定事件bind() on() live() one()的异同
  • 2017-05-11jqGrid翻页时数据选中丢失问题的解决办法
  • 2017-05-11Angularjs实现搜索关键字高亮显示效果
  • 2017-05-11JSONP基础知识详解
  • 2017-05-11微信小程序 基础组件与导航组件详细介绍
  • 2017-05-11Bootstrap超大屏幕的实现代码
  • 2017-05-11快速使用node.js进行web开发详解
  • 2017-05-11xmlplus组件设计系列之选项卡(Tabbar)(5)
  • 2017-05-11微信小程序 扎金花简单实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Bootstrap select下拉联动(jQuery cxselect)
    • jQuery命名空间与闭包用法示例
    • 微信小程序 登陆流程详细介绍
    • js 时间 时分秒选择
    • js前端实现图片懒加载(lazyload)的两种方式
    • js实现简单的获取验证码按钮效果
    • javascript实现日期三级联动下拉框选择菜单
    • 利用jquery禁止外层滚动条的滚动
    • Vue监听数据对象变化源码
    • 详解nodejs中的process进程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有