JS之AMD、CMD、CommonJS、ES6、UMD的使用笔记

前端开发作者： 2024-08-20 18:40:01

前言如下图： AMD与CMD的主要区别： 1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：

// CMD
define(function(require,exports,module) {
    var a = require('./a')
    a.doSomething()
    var b = require('./b')
    b.doSomething()
})
 AMD 默认推荐的是
define(['./a','./b'],function(a,b) {  依赖必须一开始就写好  
    a.doSomething()
    b.doSomething()
})

 define(id?,dependencies?,factory);

id: 定义中模块的名字;可选；如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字；
dependencies：依赖的模块；
factory：工厂方法，返回定义模块的输出值。

 define("alpha",["require","exports","beta"],1)"> (require,beta) {
       exports.verb = () {
           return beta.verb();
           Or:
           return require("beta").verb();
       }
   });

 define(["alpha"],1)"> (alpha) {
        {
         verb: (){
           return alpha.verb() + 2;
         }
       };
   });

   define({
     add: (x,y){
       return x + y;
     }
   });

define(var a = require('a'),b = require('b');

     exports.action =  () {};
   });

require([dependencies],1)">function(){});

第一个参数是一个数组,表示所依赖的模块
第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用.加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

require(['alpha'],1)">(alpha){
    alpha.verb ();
})

define `Function`

define `define(factory)`

define({ "foo": "bar" });

define('I am a template. My name is {{name}}.');

define( 模块代码

});

define `define(id?,deps?,factory)`

define('hello',['jquery'],1)">
});

define.cmd `Object`

if (typeof define === "function" && define.cmd) {
   有 Sea.js 等 CMD 模块加载器存在
}

require `Function`

require `require(id)`

define( 获取模块 a 的接口
  );

   调用模块 a 的方法
  a.doSomething();

});

require.async `require.async(id,callback?)`

define( 异步加载一个模块，在加载完成时，执行回调
  require.async('./b',1)">(b) {
    b.doSomething();
  });

   异步加载多个模块，在加载完成时，执行回调
  require.async(['./c','./d'],1)">(c,d) {
    c.doSomething();
    d.doSomething();
  });

});

exports `Object`

define( 对外提供 foo 属性
  exports.foo = 'bar';

   对外提供 doSomething 方法
  exports.doSomething = () {};

});

define((require) {

   通过 return 直接提供接口
   {
    foo: 'bar',doSomething: () {}
  };

});

module `Object`

module.id `String`

define('id',[],1)">
});

module.exports `Object`

define( exports 是 module.exports 的一个引用
  console.log(module.exports === exports);  true

   重新给 module.exports 赋值
  module.exports = new SomeClass();

   exports 不再等于 module.exports
  console.log(module.exports === exports);  false

});

common.js
module.exports = (a,b) {
return a-b
}

let minus = require('./common.js')  文件相对路径
console.log(minus(5,4)) 
 结果： 1

导出

命名导出
默认导出

命名导出

 写法1
export const name = 'calculator';
export const add =  (a,b) {
    return a + b;
}

 写法2
const name = 'calculator';
const add =  b;
}
export {name,add};

const name = 'calculator' 在导入时即为name 和 getSum

默认导出

export default {
    name: 'calculator';,add:  b;
    }
};

导入

 calculator.js
const name = 'calculator' 一般导入方式
import {name,add} from './calculator.js'
add(2,3);

 通过as关键字对导入的变量重命名
import {name,add as calculateSum} from './calculator.js'
calculateSum(2,1)"> 使用 import * as <myModule>可以把所有导入的变量作为属性值添加到<myModule>对象中，从而减少了对当前作用域的影响
import * as calculateObj from './calculator.js'
calculateObj.add(2,3);

import {default as myCalculator} from './calculator.js'

 index.js
import React,{Component} from 'react';

复合写法

export {name,add } from './calculator.js'

import calculator from './calculator.js'
export default calculator;

((root,factory) {
    typeof define === 'function' && define.amd) {
         AMD
        define(['jquery'],factory);
    } else typeof exports === 'object') {
         Node,CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
         浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this,1)">($) {
     方法
     myFunc() {};

     暴露公共方法
     myFunc;

}));