给大家分别介绍一下CommonJS和ES2015的import

2018-07-12  本文已影响5人  千锋H5

COMMONJS:

在ES2015标准之前,JavaScript是没有原生的方式组织代码的。Node.js使用CommonJS模块格式,填补了这方面的空白。

模块是代码结构中最基本的构建块。模块系统允许我们组织代码,隐藏实现细节已经暴露组件的接口。每次我们使用require,都会加载一个新的模块。

下面是一个使用CommonJS的最简单的例子:

要想使用我们刚刚定义的模块,我们必须通过require方式导入他。

事实上,add.js在底层被包装成了如下方式。

这就是为什么我们可以想访问全局变量的方式访问require和module。这样也保证了我们定义的变量和函数,其作用域被限定在了模块内。

require如何工作:

Node.js中的模块加载机制是:第一次调用require时,加载该模块。这也就意味着,每次我们调用require(‘hello-module’),我们得到的是’hello-module’相同的实例。这样保证了我们的模块都是单例模式的,且整个应用程序中,模块的状态是一只的。

在Node.js的模块加载中,最重要的两个函数是__load和__compile

Module._load:

这个函数首先检测加载的模块是否在缓存中,如果在,则直接返回该模块导出的内容。如果该模块为native模块,则调用NativeModule.require()并返回结果。

如果在缓存中没有找到该模块,则创建一个新的该模块的实例,并将它保存到缓存中,以备下次require使用。然后读取该模块的文件内容,并返回模块导出的对象。

Module._compile:

__comile函数在适合的作用域下运行文件,并向该作用域传递requre,module和exports。

ES2015的import

引用阮老师的话:http://es6.ruanyifeng.com/#docs/module

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。

CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

由于 ES6 模块是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。

个人认为,macro和类型检测机制,会使得JS语言越来越走向成熟

除了静态加载带来的各种好处,ES6 模块还有以下好处。

· 不再需要UMD模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点。

· 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者navigator对象的属性。

不再需要对象作为命名空间(比如Math对象),未来这些功能可以通过模块提供。

来源:千锋HTML5

上一篇下一篇

猜你喜欢

热点阅读