JavaScript模块化 CommonJS、AMD和CMD

xiaoxiao2021-02-28  74

1.CommonJS

    CommonJS是一个更偏向于服务器端的规范。Node.JS采用了这个规范。CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本时就会执行整个脚本,然后在内存中生成一个对象:{id:"...",exports:"...",loaded:"..."...}。以后需要用到这个模块时,就会到exports属性上取值。即使再次执行require命令,也不会再次执行该模块,而是到缓存中取值。

    CommonJS时同步加载模块的,对于服务器端并不是一个问题,因为所有的模块都放在本地硬盘,等待模块事件就是硬盘读取文件的事件,很小。但是,对于浏览器而言,它需要加载模块就需要通过服务器端,涉及到网速、代理等问题。一旦等待时间过长,浏览器就会处于“假死”状态。所以在浏览器端,不适合使用CommonJS规范。

2.AMD

    AMD是“Asynchronous Module Definition”的缩写,即异步模块定义。它采用异步方式加载模块。模块的加载不影响它后面语句的运行。这里异步值得是不阻塞浏览器其他任务,而加载内部是同步的,加载完模块后,立即执行回调函数。

    AMD也采用require命令加载模块,但是不同于CommonJS,它要求两个参数:require([module],callback);

        [module]:要加载的模块的名字;

        callback:加载完成后的回调函数,参数对应[module]中的成员;

    requireJS加载模块,采用的是AMD规范,也就是说,模块必须按照AMD规定的方式来书写,模块书写必须使用扩展的define()函数来定义。

    AMD是依赖前置的,当有多个依赖时,就将所有的依赖都写在define()函数的依赖数组中。

    AMD模块的定义:define(id?,dependency?factory);

        id:模块的名字,如果未提供,模块的名字默认为脚本文件的名字;

     dependency:模块的依赖,已经被模块化定义的模块标识的数组字面量。如果忽略此参数,它应该默认为["require","exports","module"];

        factory:模块的工厂函数,模块初始化需要执行的函数或者对象。如果为函数,它应该只被执行一次;如果是对象,此对象应该为模块的输出值。

3.CMD

    CMD是“Common Module Definition”的缩写,即通用模块定义;CMD推崇依赖就近,延迟执行,可以把依赖写进代码的任意一行;

    CMD模块的定义:define(factory);

    factory为函数时,表示的是模块的构造函数,执行该构造函数可以得到模块向外提供的接口。factory方法在执行时,默认会传入三个参数:require、exports和module。

    这个规范实际上是为了SeaJS的推广而出的。SeaJS和AMD规范都是预加载依赖JS的,明显不同的地方是调用和声明依赖的地方。

4.ES6中的模块

    ES6通过import、export实现模块的输入输出,其中import命令用于输入其他模块的功能;export命令用于定义模块的对外接口。

    export default(仅有一个 export default)

    在export输出内容时,如果同时输出多个变量,需要使用大括号{},同时导入也需要大括号。使用export default输出时,不需要大括号,而输入export default的变量时也不需要大括号。

    本质上,export default输出的是一个叫做default的变量,输入这个default变量时不需要大括号。

转载请注明原文地址: https://www.6miu.com/read-2600294.html

最新回复(0)