面经准备整理3——模块化

模块(Module):一块具有独立功能的代码,可以是一个函数、一个对象、甚至一个字符串或数字,通常存储为一个单独的JS文件。

      过去,JS很难编写大型应用,因为有以下两个问题:

1.全局变量污染

2.难以管理的依赖关系

     于是,先后出现了两大模块化标准,用于解决以上两个问题:CommonJS/ES6 Module

CommonJS标准和使用

node中的所有代码均在CommonJS规范下运行

具体规范如下:

1.一个JS文件即为一个模块

2.如果一个模块需要暴露一些数据或功能供其他模块使用,需要使用代码module.exports = xxx,该过程称之为模块的导出

3.如果一个模块需要使用另一个模块导出的内容,需要使用代码require("模块路径")

1.路径必须以./或../开头

2.如果模块文件后缀名为.js,可以省略后缀名

3.require函数返回的是模块导出的内容

4.模块中的所有全局代码产生的变量、函数,均不会对全局造成任何污染,仅在模块内使用

5.模块具有缓存,第一次导入模块时会缓存模块的导出,之后再导入同一个模块,直接使用之前缓存的结果。

ES6 module

由于种种原因,CommonJS标准难以在浏览器中实现,因此一直在浏览器端一直没有合适的模块化标准,直到ES6标准出现

ES6规范了浏览器的模块化标准,一经发布,各大浏览器厂商纷纷在自己的浏览器中实现了该规范

ES6标准和使用

1.模块的导出分为两种,基本导出和默认导出。可以将整个模块的导出想象成一个对象,基本导出导出的是该对象的某个属性,默认导出导出的是该对象的特殊属性default 。

2. 模块的导入

import c, {a,b} from "模块路径" //相当于 import {default as c, a, b} from "模块路径" 

总结:

CommonJS和ES6 Module模块化标准区别:

1. ES6 module 是官方的模块化标准,CommonJS 不是    2. CommonJS 是通过新增API而实现的模块化,ES6 module是通过新增语法实现模块3. ES6 module 采用依赖预加载模式,所有模块导入代码均会提升到代码顶部,而且不能动态依赖。CommonJS使用的是运行时依赖,因此可以使用动态依赖   4. ES6 module 导入时绑定的标识符是不可变的(常量),而CommonJS无此约束。5. ES6 module 导入时绑定的标识符始终指向原始值,而CommonJS是值的传递



node中的所有代码均在CommonJS规范下运行,浏览器运行的是html页面,并加载页面中通过script元素引入的js,而nodejs遵循EcmaScript标准,但由于脱离了浏览器环境,因此CommonJS标准难以在浏览器中实现。ES6规范了浏览器的模块化标准,现在很多浏览器对ES6支持良好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。