AMD、CMD、CommonJS和ES6 Import的区别

最新推荐文章于 2024-12-27 14:12:08 发布

原创最新推荐文章于 2024-12-27 14:12:08 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

Java Script 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了四种JavaScript模块化的实现方式：AMD、CMD、CommonJS及ES6 Import。每种方式都附带了具体的代码示例，帮助读者理解它们之间的区别。AMD依赖前置，CMD依赖就近，CommonJS用于Node.js环境，而ES6 Import则为现代浏览器标准。

AMD、CMD、CommonJS和ES6 Import的区别

四个都是引用js文件的方法，具体实现和使用方式不同

AMD

AMD是requireJS的语法

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

特点是依赖前置、提前执行

CMD

CMD是SeaJS的语法

define(function(require, exports) {
	// 获取模块 a 的接口
	var a = require('./a');
	// 调用模块 a 的方法
	a.doSomething();
});

特点是依赖就近、延迟执行

CommonJS

nodejs的语法

//引入使用require
const config = require('/path/to/file');

//导出有两种方法
module.exports = function() {...}
//或者
exports.get = myget
exports.post = mypost

ES6

es6的语法

// 命名导出写法1
export {get, post}

// 命名导出写法2
export const name = ‘123’
export function hh(){...}

//命名导出引入
import {get, post} from 'tools.js'

//默认导出,一个文件只能有一个export default

//写法1
export default function() {...}

//写法2
export default  {
	get: function() {},
	set: function() {}
}

//默认导出引入

//写法1
import tool from 'tools.js'
tool()

//写法2
import tools from 'tools.js'
tools.get()