CommonJS与ES6模块化

一、  什么是模块?

    1.1   将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起;

    1.2   块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 

二、 使用模块有什么好处:

2.1   最大的好处是大大提高了代码的可维护性。其次,编写代码不必从零开始。当一个模块编写完毕,就可以被其他地方引用。我们在编写程序的时候,也经常引用其他模块,包括 Node.js 内置的模块和来自第三方的模块。

2.2    使用模块还可以避免函数名和变量名冲突。相同名字的函数和变量完全可以分别存在不同的模块中,因此,我们自己在编写模块时,不必考虑名字会与其他模块冲突。

使用模块化好处总结:

避免命名冲突(减少命名空间污染)

更好的分离, 按需加载

更高复用性

高可维护性

三、模块化规范

CommonJS模块化

(1)概述

Node 应用由模块组成,采用 CommonJS 模块规范。每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。在服务器端,模块的加载是运行时同步加载的;在浏览器端,模块需要提前编译打包处理。

(2)特点

所有代码都运行在模块作用域,不会污染全局作用域。

模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。

模块加载的顺序,按照其在代码中出现的顺序。

(3)基本语法

暴露模块:module.exports = value或exports.xxx = value

引入模块:require(xxx),如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径

require命令用于加载模块文件。require命令的基本功能是,读入并执行一个JavaScript文件,然后返回该模块的exports对象。如果没有发现指定模块,会报错



ES6模块化

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

(1)ES6模块化语法

export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

导出模块:   export {basicNum,add}

引用模块        import {basicNum,add}  from'./math'  

使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

export  default  xxx

export  default: 模块默认输出, 其他模块加载该模块时,import命令可以为该匿名函数指定任意名字引入



commonjs与ES6的module的区别:

1.  两者的模块导入导出语法不同,commonjs是module.exports,exports导出,require导入;ES6则是export导出,import导入。

2.  commonjs是运行时加载模块,ES6是在静态编译期间就确定模块的依赖。

3.  ES6在编译期间会将所有import提升到顶部,commonjs不会提升require。

4.  commonjs导出的是一个值拷贝,会对加载结果进行缓存,一旦内部再修改这个值,则不会同步到外部。ES6是导出的一个引用,内部修改可以同步到外部。

5.  两者的循环导入的实现原理不同,commonjs是当模块遇到循环加载时,返回的是当前已经执行的部分的值,而不是代码全部执行后的值,两者可能会有差异。所以,输入变量的时候,必须非常小心。ES6 模块是动态引用,如果使用import从一个模块加载变量(即import foo from 'foo'),那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。

6.  commonjs中顶层的this指向这个模块本身,而ES6中顶层this指向undefined。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容