详解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 相关文章推荐
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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
ip签名探针
2006/10/09 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Express 配置HTML页面访问的实现
2020/11/01 Javascript
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
台湾良兴购物网:EcLife
2019/12/01 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书