zoukankan      html  css  js  c++  java
  • js的模块化规范-AMD、CMD、CommonJS模块、ES6模块

    js的模块化规范-CMD、AMD、CommonJS模块、ES6模块


    提纲
    0、模块化的简介
    1、前端开发中的模块化
    2、AMD
    3、CMD
    4、CommonJS模块
    5、ES6模块


    0、模块化的简介

    模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一定的分类方式,把问题进行系统性的分解,以便分块处理。

    模块化是一种分解代码的方式,可以将一个复杂系统分解为代码结构更合理、可维护性更高的可管理的多个模块。

    可以想象一个包含很多代码的巨大系统,被分割成若干个模块,然后,根据模块之间的内在逻辑有机整合成一个整体。这样做对于软件是一种何等意义的存在。

    对于软件行业来说,解耦软件系统的复杂性,使得不管多么大的系统,也可以有序管理,使得研发和运行维护变得有章可循,是具有革命性的意义的。


    1、前端开发中的模块化

    具体到前端开发这个领域中,起初只要在script标签中嵌入几十上百行代码就能实现一个页面所需的交互效果了。

    后来js得到重视,应用也广泛起来了。jQuery,Ajax,Node,MVC,MVVM等相继出现,使得前端开发得到更大的重视,也使得前端项目越来越复杂。

    然而,JavaScript中却没有有效组织代码的机制,甚至没有类的概念,更不用说模块(module)了。那么,在代码复杂度变大的背景下,各种js的模块化方案也就产生了。

    模块是什么呢?
    一个模块就是一个实现特定功能的文件。

    有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。

    但是,模块开发需要遵循一定的规范,否则就都乱套了。

    AMD,CMD,CommonJS模块,ES6模块,这四个都是模块化的实现方案。下面按照 ADM -> CMD -> CommonJS模块 -> ES6模块 的顺序逐个介绍。


    2、AMD

    AMD:Asynchronous Module Definition, 异步模块定义。

    它是一个在浏览器端JS的模块化开发的规范,实现这个规范的JS库是RequireJS。

    它的作者James Burke。实际上,AMD 是 RequireJS 在推广过程中对它自己的模块规范进行提炼得来的。


    3、CMD

    阿里巴巴公司的一个前端程序员玉伯写了一个js库——seajs,在这个js库中使用一个新的模块化规范,那就是CMD规范。

    AMD和CMD的区别:

    • 区别1:
      对于依赖的模块,AMD 是提前执行,CMD 是延迟执行,不过 RequireJS 从 2.0 开始,AMD也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible。

    • 区别2:
      AMD 推崇依赖前置
      CMD 推崇依赖就近

    • 概括区别
      AMD 依赖于 requirejs,是异步加载的,是提前加载,立即加载

    CMD 依赖于 seajs,是异步加载,延后加载,就近加载,用时加载


    4、CommonJS模块

    CommonJS是JavaScript语言的一部分规范。
    JS的标准规范是ECMAScript,但是它只指定了CoreJavaScript,就是只有js的语法和语言特性的标准,却没有对JS应该有的API进行标准化规定。
    所以,CommonJS规范诞生了,它试图定义一套普通应用程序使用的API,从而填补 JavaScript 标准库过于简单的不足。

    CommonJS是一种规范,NodeJS是这种规范的实现。说白了,commonJS规范是node这个软件中使用的规范。

    CommonJS 规范包括的内容很多,具体有:

    • 模块(modules)
    • 包(packages)
    • 系统(system)、
    • 二进制(binary)
    • 控制台(console)
    • 编码(encodings)
    • 文件系统(filesystems)
    • 套接字(sockets)
    • 单元测试(unit testing)
      等部分,CommonsJS对以上的几个部分都做出标准的规定。

    这里要讨论的是 CommonJS中的一个标准规范,也就是CommonJS的模块标准。

    CommonJS模块标准在Node中被使用,Node使用的模块标准就是CommonJS。这是我们应该关注的重点,以上的AMD、CMD了解即可。

    上面是对CommonJS模块的说明,通过这个说明,就可以清楚地知道CommonJS模块的基本情况。下面,介绍一下node中如何制作一个符合CommonJS模块规范的模块,也就是看看CommonJS如何规定一个模块的。


    • 定义模块
      根据CommonJS规范,一个单独的文件就是一个模块。
      每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性。
    • 模块输出
      模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象。
    • 加载模块
      想要使用一个模块的时候,如何使用呢?使用之前,首先要加载模块,加载使用require方法。
      该方法读取一个文件并执行,返回文件内部的module.exports对象。

    5、ES6模块

    ES6标准中引入了自己的模块化规范。前三者都是民间定义的,说白了,就是requireJS、sea.js和node这三个软件分别使用的模块化规范。而ES6模块规范是国际标准组织ECMA定义的ECMAScript规范中的模块化部分。

    ES6是ES2015的简称,一般通过export来暴露模块,import来导入模块。

    ES6中的模块系统,会统一整个前端开发的模块加载规则。但是对于Node中惯用的commonjs规范全部转ES6模块规范,可能还需要一段时间。虽然有这样的库可以支持,但是对于之前写的流行库,与框架还没修改过来。

    浏览器是支持es6模块化规范,但是目前前端一般用node做开发,模块使用commonjs,这样要让cjs的代码能够在浏览器里执行,必须先将cjs转成es6,那么这个任务就是用grunt/gulp/webpack/rollup/vite/snowpack等打包工具来实现。webpack可以将源代码中的cjs转成es6的代码来给浏览器执行。

    现在的前端离不开vue,react等现代框架,还用到ES6等模块化语法,这些模块化的语法是不能在浏览器环境中运行的,所以我们需要这些将这些互相依赖的文件进行编译打包(其实就是转换、统一到浏览器能够执行的格式),编译成浏览器能够运行的代码。这个编译转换过程被称为打包,一般的打包工具有很多,常用的是webpack。





    参考资料:

    1、[requireJS]学习笔记:了解CMD、AMD、CommonJS,https://www.jianshu.com/p/7fcaa4a75ac1

    2、ECMAScript6面试考点之CommonJS模块和ES6模块的区别,https://www.jianshu.com/p/d69676cacec6

    3、Javascript模块规范,https://www.cnblogs.com/gaoxue/p/4329623.html

    4、详解JavaScript模块化开发,https://mp.weixin.qq.com/s?src=3&timestamp=1632382447&ver=1&signature=AK52qFjJE6YewqJhsrRFs-1ThkJoDRsOS2jMECys9hPb66nLMIFoxmw3rMcwRdEKZYNIYfqprHKIfXNQL85c6200Qno6ukAdsgfRTFFiO2NYtFDQ071k-g8ge91wlYme73leQIRfs0OsZKCXk0ZBRNgQ5-p8ytmaQ-ZXg4gBf*U=




  • 相关阅读:
    Editor HDU
    Out of Sorts II
    庭师的利刃
    HDU 2087: 剪花布条
    【高精度】高精度乘法
    【高精度】高精度数除以低精度数I
    【高精度】高精度阶乘
    【高精度】高精度分数
    【高精度】简单高精度减法
    【高精度】简单高精度加法
  • 原文地址:https://www.cnblogs.com/zhangzl419/p/15324552.html
Copyright © 2011-2022 走看看