seaJs使用心得之exports与module.exports的区别实例分析


Posted in Javascript onOctober 13, 2017

本文实例讲述了seaJs使用心得之exports与module.exports的区别。分享给大家供大家参考,具体如下:

1. exports 是 module.exports 的 辅助对象,exports对外提供api 时需要用return 返回exports 对象

2. module.exports 也可直接向外提供api

参考 : https://github.com/seajs/seajs/issues/242

exports Object

exports 是一个对象,用来向外提供模块接口。

define(function(require, exports) {
 // 对外提供 foo 属性
 exports.foo = 'bar';
 // 对外提供 doSomething 方法
 exports.doSomething = function() {};
});

除了给 exports 对象增加成员,还可以使用 return 直接向外提供接口。

define(function(require) {
 // 通过 return 直接提供接口
 return {
  foo: 'bar',
  doSomething: function() {}
 };
});

如果 return 语句是模块中的唯一代码,还可简化为:

define({
 foo: 'bar',
 doSomething: function() {}
});

上面这种格式特别适合定义 JSONP 模块。

特别注意:下面这种写法是错误的!

define(function(require, exports) {
 // 错误用法!!!
 exports = {
  foo: 'bar',
  doSomething: function() {}
 };
});

正确的写法是用 return 或者给 module.exports 赋值:

define(function(require, exports, module) {
 // 正确写法
 module.exports = {
  foo: 'bar',
  doSomething: function() {}
 };
});

提示:exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时,并不会改变 module.exports 的值。因此给 exports 赋值是无效的,不能用来更改模块接口。

module.exports Object

当前模块对外提供的接口。

传给 factory 构造方法的 exports 参数是 module.exports 对象的一个引用。只通过 exports 参数来提供接口,有时无法满足开发者的所有需求。 比如当模块的接口是某个类的实例时,需要通过 module.exports来实现:

define(function(require, exports, module) {
 // exports 是 module.exports 的一个引用
 console.log(module.exports === exports); // true
 // 重新给 module.exports 赋值
 module.exports = new SomeClass();
 // exports 不再等于 module.exports
 console.log(module.exports === exports); // false
});

注意:对 module.exports 的赋值需要同步执行,不能放在回调函数里。下面这样是不行的:

// x.jsdefine(function(require, exports, module) {
 // 错误用法
 setTimeout(function() {
  module.exports = { a: "hello" };
 }, 0);
});

在 y.js 里有调用到上面的 x.js:

// y.jsdefine(function(require, exports, module) {
 var x = require('./x');
 // 无法立刻得到模块 x 的属性 a
 console.log(x.a); // undefined
});

希望本文所述对大家sea.js程序设计有所帮助。

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
List Installed Software Features
Jun 11 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 #Javascript
JavaScript实现随机数生成器(去重)
Oct 13 #Javascript
AngualrJs清除定时器遇到的坑
Oct 13 #Javascript
React Native中Navigator的使用方法示例
Oct 13 #Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 #Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 #Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 #Javascript
You might like
如何开始收听短波广播
2021/03/01 无线电
php 无法载入mysql扩展
2010/03/12 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery插件之easing使用
2010/08/19 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
如何清空python的变量
2020/07/05 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
法律进企业活动方案
2014/03/04 职场文书
助学贷款贫困证明
2014/09/23 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript