详解JS模块导入导出


Posted in Javascript onDecember 20, 2017

开发中基本不会将所有的业务逻辑代码放在一个JS文件中,特别是在使用前端框架,进行组件化开发中时,会复用相应的组件。这时,就会用到模块导入/导出的方法了。

当然,上面提到有模块的概念,也是在JS用于服务器端编程的时候才会出现,我们在使用前端框架时,使用npm run dev,不就是启动了一个node服务。 对于JavaScript模块化编程的起源可以追溯到2009年,Ryan Dahl在github上发布了node 的最初版本。

本文主要介绍几种模块导入/导出的方法。

node 中模块导出/导入

平时我们接触最多的模块导入的例子,就是使用npm安装各种开源模块,然后在项目中使用例如import,require的方法引入,或者更加直白的直接使用script标签引入入node_module中对应模块打包过后的源文件。

为什么可以直接引入这些npm模块呢?一般在每个模块的源文件里面,都会找到modules.exports方法。用来导出变量。比如下面我们在使用gulp打包压缩时,经常使用到的gulp-rename这个插件通过npm安装后,在node_modules中的gulp-rename/index.js

'use strict';

var Stream = require('stream');
var Path = require('path');

function gulpRename(obj) {

 var stream = new Stream.Transform({objectMode: true});
 ... 

 return stream;
}

module.exports = gulpRename;

看到的基本思路就是,定义了gulpRename 方法,然后把它抛出去。

node中的module都遵循CommonJS规范。在CommonJS中有一个全局的require()方法,用于加载模块;module.export 和 export 方法,导出模块。

这里比较重要的一点是: 我们在写模块时用到的exports对象实际上只是对module.exports的引用,所有在一些js库的源码中,经常可以看到这样的写法:

exports = module.exports = somethings

// export.js 文件中
var export1 = "from export1"
var export2 = function(){
 return "from export2";
}
exports.export2 = export2;
 // modules.js 文件中
 var module1 = "from module1";
 var module2 = function(e){
 return "from funModule2";
 }
 module.exports.str1 = module1;
 module.exports.fun2 = module2;

最后在common.js文件中引入exports.js文件和 modules.js 文件,

var md1 = require("./module.js")
console.log(md1);
var export3 = require("./export");
console.log(export3);

最后在gitbash中,使用node 执行相应的commons.js文件;

详解JS模块导入导出

在使用exports方法是,不能直接exprots = {},这样改变了exports方法的引用, 相应就无法实现导出模块的功能了。

es6导出方法

es6中也同样提出了比较好用的模块导出的方法,包括两种。

命名导出

如果在一个文件中想要导出多个不同的变量,可以分别对不同的变量命名,然后分别导出,避免相互污染。

// export3.js 文件
 export const myModules = {c:1 }
 export const myModules2 = {d:2 }
 // import.js 文件
 import {myModule1,myModule2} from './export3.js' ;
 console.log(myModule1);
 console.log(myModule2);
 // index.html 文件
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>es6</title>
 </head>
 <body>
 <script src="./import.js"></script>
 </body>
</html>

然后,我们尝试使用最经新出的 打包工具parcel(node版本在8.0以下安装会报错)小试牛刀, 具体已经安装完成了,在命令行中输入 parcel index.html,就会在1234 端口启动服务,主要为了能够在http://localhost:1234/中看到console。

详解JS模块导入导出

默认导出

如果只在一个文件中提供了一个导出的口,就可以使用默认导出

//export4.js 
 const str2 ="hello world";
 export default str2 ;
 // import2.js
 import anyName from "./export4.js"
 console.log(anyName);

在index.html 中 <script src="./import2.js"></script>可以看到输入 hello world

同样是模块导入导出方法,使用es6的模块方法,要比node中 的(也就是CommonJS模块)方法更加的差异非常大。
主要有如下两点差别:

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

以上就是我们本次给大家介绍的关于JS模块导入导出问题的全部内容,如果大家还有任何不明白的地方可以在下方的留言区域讨论,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
Js动态创建div
Sep 25 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 #Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 #Javascript
常用的9个JavaScript图表库详解
Dec 19 #Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 #Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 #Javascript
Angular2实现组件交互的方法分析
Dec 19 #Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 #Javascript
You might like
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python实现二分查找算法实例
2015/05/26 Python
python编码最佳实践之总结
2016/02/14 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
pandas删除指定行详解
2019/04/04 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
个性婚礼策划方案
2014/05/17 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
公司租房协议书范本
2014/10/08 职场文书
团结友爱主题班会
2015/08/13 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL