AMD、CMD、UMD等模块解决方案和工具使用总结

js组件和模块解决方案

1、AMD(Asynchromous Module Definition - 异步模块定义)

AMD是RequireJS在推广过程中对模块定义的规范化产出,AMD是异步加载模块,推崇依赖前置。

    define('module1', ['jquery'], ($) => {
      //do something...
    });
2、CMD(Common Module Definition - 公共模块定义)

CMD是SeaJS在推广过程中对模块定义的规范化产出,对于模块的依赖,CMD是延迟执行,推崇依赖就近。

    define((require, exports, module) => {
          module.exports = {
        fun1: () => {
           var $ = require('jquery');
           return $('#test');
        } 
      };
    });
  • CommonJS:CommonJS是服务端模块的规范,由于Node.js被广泛认知。根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的module.exports对象。CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。
3、UMD(Universal Module Definition - 通用模块定义)

UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先,异步加载;CommonJS是服务器优先,同步加载。

既然要通用,怎么办呢?那就先判断是否支持node.js的模块,存在就使用node.js;再判断是否支持AMD(define是否存在),存在则使用AMD的方式加载。这就是所谓的UMD。

4、ES6 风格:

通过import–export对管理依赖模块,可以选择性加载单个变量、函数等。

关于模块管理工具:

Gulp / Grunt 是一种工具,能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说,就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。

browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。

seajs / require : 是一种在线”编译” 模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。
这样就知道,Gulp是一个工具,而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

JavaScript模块化指的是将代码分割成可重用的、独立的模块,以便提高代码的可维护性、可重用性和可扩展性。模块化在前端开发中扮演着非常重要的角色。 CMDAMD是两种常用的JavaScript模块化规范,它们都允许模块化编程,但它们的实现方式略有不同。 1. CMD(Common Module Definition) CMD是一种JavaScript模块化规范,它是由阿里前端开发玉伯提出的。CMD规范的实现工具有Sea.js、RequireJS等。CMD规范的特点是延迟执行,即模块在require时才会执行,不会立即执行。其语法如下: ```javascript define(function(require, exports, module) { // 模块代码 }); ``` 2. AMD(Asynchronous Module Definition) AMD也是一种JavaScript模块化规范,它是由Dojo的前端开发者提出的。AMD规范的实现工具有RequireJS等。AMD规范的特点是提前执行,即模块在define时就会执行,而不是等到require时才执行。其语法如下: ```javascript define(['module1', 'module2'], function(module1, module2) { // 模块代码 }); ``` 3. UMD(Universal Module Definition) UMD是一种通用模块定义规范,它可以在AMD和CommonJS规范之间进行切换,适用于多种JavaScript环境。其语法如下: ```javascript (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object' && typeof module === 'object') { // CommonJS module.exports = factory(require('jquery')); } else { // Browser globals root.returnExports = factory(root.jQuery); } }(this, function ($) { // 模块代码 })); ``` 以上三种模块化规范都有其各自的优缺点,选择适合自己的规范进行开发即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值