JavaScript 中什么是模块化？你能列举一些常用的 JavaScript 模块化方案吗？

模块化是指将一个大的程序文件分割成许多小的文件(模块),然后将这些文件组合起来。
JavaScript 中常用的模块化方案有:

1. ES6 模块:ES6 标准引入的原生模块化方案。使用 export 关键字导出变量和函数,使用 import 关键字导入。

// module.js
export const name = 'Tom';
export function sayHi() { ... }

// main.js 
import { name, sayHi } from './module.js';

2. CommonJS:Node.js 中实现的模块化方案,使用 require() 和 module.exports。

// module.js
module.exports = {
  name: 'Tom', 
  sayHi() { ... } 
};

// main.js  
const module = require('./module.js');

3. AMD:主要用于浏览器端,可以异步加载模块,依赖 require.js。使用 define() 和 require()。

// module.js
define(function() {
  return {
    name: 'Tom'
  };
});

// main.js
require(['module.js'], function(module) {
  const name = module.name;
}); 

4. UMD:UMD 模块化可以兼容 AMD、CommonJS 和全局变量定义方式,可在 Node.js、AMD 环境和全局环境下运行。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD environment
    define(['jquery'], factory);
  } else if (typeof exports === 'object') { 
    // CommonJS environment 
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals environment
    factory(root.jQuery);
  }
}(this, function ($) {
  // Methods
  function myFunc() {}

  // Expose public methods 
  return myFunc; 
}));

所以选择合适的模块化方案可以提高 JavaScript 程序的复用性和可维护性。理解各种模块化的差异和用法,是成为 JavaScript 高手的必修课。