JS 导出选项

在前端开发中，导出选项是非常重要的，它能让开发者以不同的方式导出数据、函数、变量和对象。本文将介绍几种常见的 JS 导出选项。

CommonJS

CommonJS 是一个常用的 JS 导出选项，它是 Node.js 和 Browserify 默认使用的导出选项。可以通过 module.exports 对象导出模块：

// 导出一个函数
module.exports = function() {
  console.log('Hello, world!');
};

// 导出一个对象
module.exports = {
  name: '张三',
  age: 18
};

// 导出一个变量
const foo = 'bar';
module.exports = foo;

在其他文件中，可以通过 require 函数引入这些模块：

const helloWorld = require('./helloWorld');
helloWorld(); // 输出 "Hello, world!"

const person = require('./person');
console.log(person.name + person.age); // 输出 "张三18"

const foo = require('./foo');
console.log(foo); // 输出 "bar"

ES6 模块

ES6 模块是 ECMAScript 6 标准中引入的模块化规范。通过 export 和 import 关键字可以导出和引入模块：

// 导出一个函数
export function helloWorld() {
  console.log('Hello, world!');
}

// 导出一个对象
export const person = {
  name: '张三',
  age: 18
};

// 导出一个变量
export const foo = 'bar';

在其他文件中，可以通过 import 关键字引入这些模块：

import { helloWorld } from './helloWorld';
helloWorld(); // 输出 "Hello, world!"

import { person } from './person';
console.log(person.name + person.age); // 输出 "张三18"

import { foo } from './foo';
console.log(foo); // 输出 "bar"

AMD

AMD 是另一种 JS 导出选项，它采用异步方式加载模块。可以通过 define 函数定义模块：

// 定义一个模块
define('helloWorld', function() {
  return function() {
    console.log('Hello, world!');
  };
});

// 定义一个模块
define('person', function() {
  return {
    name: '张三',
    age: 18
  };
});

// 定义一个模块
define('foo', [], function() {
  return 'bar';
});

在其他文件中，可以通过 require 函数引入这些模块：

require(['helloWorld'], function(helloWorld) {
  helloWorld(); // 输出 "Hello, world!"
});

require(['person'], function(person) {
  console.log(person.name + person.age); // 输出 "张三18"
});

require(['foo'], function(foo) {
  console.log(foo); // 输出 "bar"
});

UMD

UMD 是一种通用模块定义规范，它兼容 CommonJS、AMD 和全局变量方式导出模块。可以通过以下方式定义模块：

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'));
  } else {
    root.myModule = factory(root.jQuery);
  }
}(this, function($) {
  function helloWorld() {
    console.log('Hello, world!');
  }

  return {
    helloWorld: helloWorld
  };
}));

在其他文件中，可以通过以下方式引入这些模块：

// CommonJS
const myModule = require('./myModule');
myModule.helloWorld(); // 输出 "Hello, world!"

// AMD
require(['myModule'], function(myModule) {
  myModule.helloWorld(); // 输出 "Hello, world!"
});

// 全局变量
myModule.helloWorld(); // 输出 "Hello, world!"