欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

模块化之CommonJs、AMD、CMD

程序员文章站 2022-03-04 13:49:33
...

介绍

随着前端业务得复杂程度越来越高,模块化成了大趋势,目前有这么几种模块化得规范,AMD,CMD,CommonJs。CommonJs规范的实践者是nodejs和ES6。AMD、CMD规范的实践者分别是requirejs和seajs。

commonjs

commonjs的目标是制定一个js模块化的标准,它的目标制定一个可以同时在客服端和服务端运行的模块。这些模块拥有自己独立的作用域,也可以向顶层曝露出自己的api也就是module.exports。在ES6中common被制定为标准。但是在ES6还未被浏览器完美支持的情况下,commonjs规范之能在服务端发挥它的作用。比如在nodejs和webpack等中。

nodejs

语法:
模块必须通过module.exports导出对外得变量或接口,通过require()来导入其他的模块。
特点:
每个文件都是一个模块,都有自己得作用域,变量,函数等,对其他文件不可见,
如果想在多个文件分享变量,必须定义为global对象的属性。(不推荐)
CommonJS 模块系统是同步加载。
入口文件:
一般都会有一个入口文件,在index.html中加载这个入口文件,入口再加载其他文件
模块缓存:
第一次加载某个模块时,Node会缓存该模块。以后再加载该模块,就直接从缓存取出该模块的module.exports属性。
加载机制:
CommonJS模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。

ES6模块化

语法:
使用export关键字将任意变量、函数或者类公开给其他模块。
特点:
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

//导出变量
export var color = "red";
//导出函数
export function add(num1,num2){
    return num1+num2;
}
//导出对象,即导出引用
export {multiply}

在模块中使用import关键字来导入其他模块。

import  identifier from "./example.js"

其中还有各种写法,比如
导入单个绑定

import {sum} from './example.js'

导入多个绑定

import {sum,multiply} from './example.js'

限制
export 与 import 都有一个重要的限制,那就是它们必须被用在其他语句或表达式的外部,而不能使用在if等代码块内部。原因之一是模块语法需要让 JS 能静态判断需要导出什么,正因为此,你只能在模块的*作用域使用 export与import。

AMD

AMD是为了弥补commonjs规范在浏览器中目前无法支持ES6的一种解决方案。异步模块定义规范(AMD)制定了定义模块的规则,这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。
定义模块:分两种,独立模块和非独立模块,独立模块是不依赖其他模块;非独立模块是依赖于其他模块。
独立模块

define(function(){
    ……
    return {
        //返回接口
    }
})

非独立模块:

define(['module1','module2'],function(m1,m2){
    ……
    return {
        //返回接口
    }
})

加载模块:
同样使用require()方法来加载模块,但由于是异步的,因此使用回调函数的形式。

require(['foo','bar'],function(foo,bar){
    ……
})

上面方法表示加载foo和bar两个模块,当这两个模块都加载成功后,执行一个回调函数。该回调函数就用来完成具体的任务。
require方法也可以用在define方法内部。

define(function(require){
     var otherModule = require('otherModule');
})

配置:
require方法本身也是一个对象,它带有一个config方法,用来配置require.js运行参数。

require.config({
    paths: {
        jquery:'lib/jquery'
    }
});

使用
在主页面index.html中先通过script标签引入require.min.js。
再通过script标签引入一个入口文件main.js,此入口文件一般用于配置(require.config),以及引入其他模块。

CommonJS与AMD
CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。
AMD规范则是异步加载模块,允许指定回调函数,在回调函数中执行操作。

转载于:https://www.jianshu.com/p/f7f964b96711