http://it.njjyzj.gov.cn

Js模块打包exports require import的用法和区别_JavaScript_网络编程

1、Common之 exports和require用法

Commonejs规定每个文件是一个模块。将一个文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全局环境;而后者会形成一个属于模块自身的作用域,所有的变量及函数只有自己能访问,对外是不可见的。

1.1 CommonJS导出之module.exports

导出是一个模块向外暴露自身的唯一方式。在CommonJS中,通过module.exports可以导出模块中的内容,如:

module.exports = { name: 'commonJS_exports.js', add: function(a, b){ return a + b; } }

为了书写方便,CommonJS也支持另一种简化的导出方式:直接使用exports。效果和上面一样:

exports.name = 'commonJS_exports.js'; exports.add = function(a, b){ return a + b; }

注意:导出时不要把module.exports 与 exports混用,下面举一个错误的示例:

exports.add = function(a, b){ return a + b; } module.exports = { name: 'commonJS_exports.js' }

上面的代码先通过exports导出add属性,然后将module.exports重新赋值为另外一个对象。这会导致原本拥有的add属性的对象丢失了,最后导出的只有name。因此建议一个模块中的导出方式要么使用module.exports,要么使用exports,不要混着一起用。

在实际使用中,为了提高可读性,应该将module.exports及exports语句放在模块的末尾。

1.2 CommonJS导入之require

在CommonJS中使用require进行模块导入。commonJS_exports.js导出代码:

console.log('...hello, 我是commonJS_exports.js....start..') //1、第一种写法 module.exports = { name: 'commonJS_exports.js', add: function(a, b){ return a + b; } }

PageModule.vue页面中导入代码:

//1、测试CommonJS的exports和require var comObj = require('../api/module/commonJS_exports'); console.log('...name: ', comObj.name); try{ console.log('8 + 9 = ', comObj.add(8, 9)); }catch(e){ console.log(e); }

另外,如果在页面中对同一模块进行多次导入,则该模块只会在第一次导入时执行,后面的导入不会执行,而是直接导出上次执行后得到的结果。示例如下:

var comObj = require('../api/module/commonJS_exports'); //再调用一次导入,发现导入模块不会再次执行,而是直接导出上次执行后得到的结果 require('../api/module/commonJS_exports'); console.log('...name: ', comObj.name); try{ console.log('8 + 9 = ', comObj.add(8, 9)); }catch(e){ console.log(e); }

我们看到控制台打印结果如下,导入模块果然只执行了一次:

....test CommonJS 的导入...

...name:  commonJS_exports.js

8 + 9 =  17

在module对象中有一个属性loaded用于记录该模块是否被加载过,它的默认值为false,当模块第一次被加载和执行过后会设置为true,后面再次加载时检查到module.loaded为true, 则不会再次执行模块代码。
require函数可以接收表达式,借助这个特性我们可以动态地指定模块加载路径

const moduleNames = ['foo.js', 'bar.js']; moduleNames.forEach(name=>{ require('./' + name); })

2、ES6 Module 之 export 和 import 用法

2015年6月,发布的ES6才添加了模块这一特性。ES6 Module也是将每个文件作为一个模块,每个模块拥有自身的作用域,不同的是导入、导出语句。import和export也作为保留关键字在ES6版本中加入了进来(CommonJS中的module并不属于关键字)。

2.1 ES6 Module导出之export

在ES6 Module中使用export命令来导出模块。export有两种导出形式:

命名导出

默认导出

2.1.1 命名导出有两种不同的写法:

//第一种导出方式:命名导出 //1.1 命名导出第一种写法 export const name = 'es6_export.js'; export const add = function(a, b) { return a + b; } // //1.2 命名导出第二种写法 // const name = 'es6_export.js' // const add = function(a, b){ return a + b; } // export { name, add };

第一种写法是将变量的声明和导出写在一行;第二种写法则是先进行变量声明,然后再用同一个export语句导出。两种写法的效果是一样的。在使用命名导出时,还可以通过as关键字对变量重命名。如:

const name = 'es6_export.js' const add = function(a, b){ return a + b; } export { name, add as getSum }; //在导入时即为name和getSum

2.1.2 与命名导出不同,模块的默认导出只能有一个。如:

//第二种导出方式:默认导出 export default{ name: 'es6_export', add: function(a, b){ return a + b; } }

我们可以将export default理解为对外输出了一个名为default的变量,因此不需要像“命名导出”一样进行变量声明,直接导出即可。

//导出字符串 export default 'this is es6_export.js file ' //导出class export default class {...} //导出匿名函数 export default function(){ ... }

2.2 ES6 Module导出之import

ES6 Module中使用import语法导入模块。

2.2.1 我们看下对于命名导出模块如何导入

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:详解JS中的对象字面量_JavaScript_网络编程
下一篇:TypeScript泛型参数默认类型和新的strict编译选项_JavaScript_网络编程