前端模块化 CommonJS AMD ES6 CMD

不使用模模块化的情况

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

• // util.js
  function getFormatDate(date, type) {
      // type === 1 返回 xxxx
      // type === 2 返回 xxx
      // ...
  }
  
  // a-util.js
  function aGetFormatDate(date) {
      //要求返回 xxx 格式
      return getFormatDate(date, 2)
  }
  
  // a.js
  var 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.js
export {
    function getFormatDate(date, type) {
    // type === 1 返回 xxxx
    // type === 2 返回 xxx
    // ...
    }
}

// a-util.js
var getFormateDate require(‘util.js‘)
export {
    function aGetFormatDate(date) {
    //要求返回 xxx 格式
    return getFormatDate(date, 2)
    }
}

// a.js
var 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.js
define(function () {
    return {
        getFormatDate(date, type) {
    // type === 1 返回 xxxx
    // type === 2 返回 xxx
    // ...
    }
    }
})

// a-util.js
define([‘./util.js‘], function (util) {
    return {
        aGetFormatDate: function(date) {
            return util.getFormatDate(date,2)
        }
    }
})

// a.js
define([‘a-util.js‘], function (aUtil) {
    return {
        printDate: function(date) {
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})

// main.js
required([‘./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.js
module.exports = {
    getFormatDate(date, type) {
    // type === 1 返回 xxxx
    // type === 2 返回 xxx
    // ...
    }
}

// a-util.js
var 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推崇依赖前置。

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

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

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