前端模块化 CommonJS AMD ES6 CMD

不使用模模块化的情况

• util.js(基础函数库） getFormatDate 函数
• a-util.js（业务基础函数库） aGetFormatDate 函数 使用getFormatDate
• a.js aGetFormatDate

• // util.jsfunction getFormatDate(date, type) { ???// type === 1 返回 xxxx ???// type === 2 返回 xxx ???// ...}// a-util.jsfunction aGetFormatDate(date) { ???//要求返回 xxx 格式 ???return getFormatDate(date, 2)}// a.jsvar dt = new Date()console.log(aGetFormatDate(dt))<script src="util.js"></script><script src="a-util.js"></script><script src="a.js"></script>

  这些代码中的函数必须是全局变量，才能暴露给使用方，全局变量污染
• a.js知道要引用a-util.js，但是他还知道要依赖util.js么？

使用模块化

// util.jsexport { ???function getFormatDate(date, type) { ???// type === 1 返回 xxxx ???// type === 2 返回 xxx ???// ... ???}}// a-util.jsvar getFormateDate require(‘util.js‘)export { ???function aGetFormatDate(date) { ???//要求返回 xxx 格式 ???return getFormatDate(date, 2) ???}}// a.jsvar aGetFormatDate = require(‘a-util.js‘)var dt = new Date()console.log(aGetFormatDate(dt))

• 直接<script src="a.js"></script>，其他根据依赖关系自动引用
• 那两个函数，没必要做成全局变量，不会带来污染和覆盖

AMD（异步模块定义）

• require.js requirejs.org
• 全局define函数
• 全局require函数
• 依赖JS会自动、异步加载

//util.jsdefine(function () { ???return { ???????getFormatDate(date, type) { ???// type === 1 返回 xxxx ???// type === 2 返回 xxx ???// ... ???} ???}})// a-util.jsdefine([‘./util.js‘], function (util) { ???return { ???????aGetFormatDate: function(date) { ???????????return util.getFormatDate(date,2) ???????} ???}})// a.jsdefine([‘a-util.js‘], function (aUtil) { ???return { ???????printDate: function(date) { ???????????console.log(aUtil.aGetFormatDate(date)) ???????} ???}})// main.jsrequired([‘./a.js‘], function(){ ???var date = new Date() ???a.printDate(date)})

使用require.js

<scritp src="/require.min.js" data-main="./main.js"></scritp>

require（）函数在加载依赖函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块加载成功，才会去执行。
因为网页在加载js的时候会停止渲染，因此我们可以通过异步的方式去加载js,而如果需要依赖某些，也是异步去依赖，依赖后再执行某些方法。

CommonJS

• nodejs 模块化规范，现在被大量用于前端
• 其那段开发依赖的插件和库，都可以从npm中获取
• 构建工具的高度自动化，使得使用npm的成本非常低
• CommonJS不会异步加载JS，而时同步一次性加载出来

// util.jsmodule.exports = { ???getFormatDate(date, type) { ???// type === 1 返回 xxxx ???// type === 2 返回 xxx ???// ... ???}}// a-util.jsvar util = require(‘util.js‘)module.exports = { ???aGetFormatDate: function(date) { ???????????return util.getFormatDate(date,2) ???????}}

AMD 和 CommonJS 的使用场景

• 需要异步加载JS，使用AMD
• 使用了npm之后建议使用CommonJS

  ES6实现模块化

  如果使用es6语法，那么则无需引入requireJS进行模块化，它的特点主要为：

  • 在模块顶级作用域中的this为undefine。
  • 单个文件为一个模块，顶级作用域声明的变量只在当前模块生效。对其他模块不影响， 对外导出的变量才能被其他变量使用

  定义

  导出内容有俩种关键字：

  • export 导出该模块要导出的变量、函数、对象等等。

  export const color = ‘#fff‘;

  • as 输出时创建别名，也适用于导入情况。

  const color = ‘#fff‘;export color as white

  • export default 该模块的默认输出值，可以为变量、函数、对象,一个模块只能导出一个默认值。默认导出的内容可以无名称，因为默认导出就代表该模块，但也可以有名称，或者使用别名 as。

  export default const color = ‘#fff‘;// export default 5；// const color = ‘#fff’；// export { color as default ?}

  使用

  • 在模块中使用import关键字来导入其他模块导出的内容。 分为几种情况：

  • 导入非默认内容，需要用结构的方式，因为在模块中，非默认导出的内容，都会被添加到一个变量中，用结构的方式拿出一个或多个内容。

  import { color } from ‘./color‘;

  • 导入默认内容，可以直接导出即可。

  import color from ‘./color‘;

  CMD

  CMD规范的实现代表是sea.js

  • 对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不通过）。

  • CMD推崇依赖就近，AMD推崇依赖前置。

  //AMDdefine([‘./a‘,‘./b‘], function (a, b) { ????//依赖一开始就写好 ???a.test(); ???b.test();}); //CMDdefine(function (requie, exports, module) { ????????//依赖可以就近书写 ???var a = require(‘./a‘); ???a.test(); ????????... ???//软依赖 ???if (status) { ????????????var b = requie(‘./b‘); ???????b.test(); ???}});

  简单来说,就是sea.js属于懒加载,require.js属于预加载.

前端模块化 CommonJS AMD ES6 CMD

原文地址：https://www.cnblogs.com/xiaoyuchen/p/10544835.html