anqier 2019-06-27
模块化,大家用vue
,react
等东西,都会接触到像exports
,module.exports
,export
,export default
,require
,define
,import
等等字段,感觉很多人对于这些东西还是分不清,概念非常的模糊,便想着写这么一篇文章,一是帮助自己梳理知识点,二是跟大家一起成长。其中有写得不对的,请及时提出来 ,我及时更正。
刚开始写的时候有些无从下手,一是因为知识点太多,二是因为自己的经验还不足以帮助大家从深层次剖析js的模块化中的区别,以及其实现原理、思想。这是一篇自己的学习笔记整理,我只能带大家了解前端模块化,区分他们并正确的使用他们。
先给大家扔出几条知识:
CommonJS
:NodeJS
模块系统具体实现的基石。AMD
:异步模块规范,是RequireJS
在推广过程中对模块定义的规范化产出的,推崇依赖前置;UMD
:兼容AMD
和CommonJS
规范的同时,还兼容全局引用的方式;CMD
:是SeaJS
在推广过程中对模块定义的规范化产出的,推崇依赖就近;ES6
:ES6模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量;CommonJS官网上写道,它希望js不仅仅可以在浏览器上运行,而是可以在任何地方运行,使其具备开发大型应用的能力。
javascript: not just for browsers any more!CommonJS定义的模块分为:
require
)exports
)module
)他可以做到:
CommonJS模块的特点如下
前面给大家说过,node.js
是基于CommonJS
的规范实现的,NPM
大家一定都很熟悉,它实践了CommonJS
的包规范。
关于包规范,类比于git
仓库,我们可以这么理解:
git init
在当前文件夹中生成了隐藏文件.git
,我们把它叫做git仓库
。npm init
命令在当前文件夹中生成了配置文件package.json
,它描述了当前这个包,我们管这个文件叫做包(概念不准确,可以这么理解)。严格按照CommonJS
规范来的话,包的目录应当包含以下文件或目录。
package.json
:包描述文件,存在于包顶级目录下bin
:存放可执行二进制文件的目录lib
:存放js代码的目录doc
:存放文档的目录test
:存放单元测试用例代码的目录而package.json
则是一个配置文件,它描述了包的相关信息。
既然node.js
是基于CommonJS
实现的,那么我们先来简单看看NodeJS
的模块原理。
最近参加了公司开展的一次培训,结构性思维培养。任何东西都能够进行分类,事物一旦进行分类,更利于大家对此事物的认知,也能方便大家记忆。所以我们先来看看Node
的模块分类