模块化开发：AMD、CMD、CommonJs和Es6的区别

什么是AMD、CMD、CommonJs？
他们之间有什么区别？
项目当中都是如何运用的？

AMD即Asynchronous Module Definition,是RequireJS在推广过程中对模块定义的规范化产出,它是一个在浏览器端模块化开发的规范。
特点：异步模块定义，依赖前置

// 定义模块 myModule.js
define(['dependency'], function(){var name = 'Byron';function printName(){console.log(name);}return {printName: printName};
});// 加载模块
require(['myModule'], function (my){my.printName();
});

CMD即Common Module Definition通用模块定义,是SeaJS在推广过程中对模块定义的规范化产出,它是一个在浏览器端模块化开发的规范。
特点：异步模块定义，淘宝团队定义,依赖就近

// 定义模块  myModule.js
define(function(require, exports, module) {var $ = require('jquery.js')$('div').addClass('active');
});// 加载模块
seajs.use(['myModule.js'], function(my){});

很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略

CommonJS 是应用于服务端的javaScript，一个js文件就是一个模块，模块中的变量不对外暴露，不支持异步。Nodejs端是使用CommonJS规范的，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的
特点：前端浏览器不支持此种规范，node后端使用此规范。同步加载。module.exports,exports.

//模块定义 myModel.jsvar name = 'Byron';function printName(){console.log(name);
}function printFullName(firstName){console.log(firstName + name);
}module.exports = {printName: printName,printFullName: printFullName
}//加载模块var myModule = require('./myModel.js');
myModule.printName();

ES6特性—export/import
特点：导入导出成对出发，export default，export

export default {name:'',props:[''],data () {return {};},components: {},computed: {},watch: {},created() {},beforeMount() {},mounted() {},methods: {}
};

模块化开发：AMD、CMD、CommonJs和Es6的区别相关推荐

AMD/CMD/CommonJs到底是什么？它们有什么区别？
这篇文章总结的很好. 知道JS有模块化开发的说法,也偶尔听过requireJs,AMD,CMD等等名字,甚至使用node的时候,还用过require之类的方法,但是对这些一直没有一个明确的认识和概念. ...
AMD, CMD, CommonJS和UMD
AMD, CMD, CommonJS和UMD 今天由于项目中引入的echarts的文件太大,requirejs经常加载超时,不得不分开来加载echarts的各个图表.但是使用echarts自带的在线构 ...
让你的插件兼容AMD, CMD ,CommonJS和原生 JS
模块标准 // 支持AMD,CMD以及原生js的引用if (typeof module !== 'undefined' && typeof exports === 'object' & ...
模块化（AMD、CMD、CommonJS、ES6）
1,CommonJS 服务器,同步加载模块,加载机制是:输出拷贝模块导出:module.exports 导入模块:require 2,AMD(异步模块定义) 用于浏览器,防止js加载阻塞页面渲染,异 ...
JavaSript模块化 AMD CMD 详解.....
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理.模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式.可以想象一个巨大 ...
浅析：前端模块化开发规范
浅析:前端模块化开发规范早期的模块化解决方案 NameSpace:命名空间模式匿名闭包:IIFE模式模块模式:IIFE+依赖传参 ES6之前的模块化解决方案 CommonJS模块化规范 AMD模 ...
Requirejs与r.js打包，AMD、CMD、UMD、CommonJS、ES6模块化
一:require.js 1.require.js是什么?为什么要用它? require.js是一个JavaScript模块载入框架,实现的是AMD规范.使用require.js有以下优点: ① 异步 ...
JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）
前言前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别
JS-模块化进程随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...

模块化开发：AMD、CMD、CommonJs和Es6的区别

模块化开发：AMD、CMD、CommonJs和Es6的区别相关推荐

最新文章

热门文章