7.JavaScript模块的CommonJS、AMD、UMD、ES6 Module

1.CommonJS

CommonJS以服务器为目标环境,能够一次性把所以模块加载到内存。

  • 导入:require(‘路径’)
  • 导出:module.exports和exports
//hello.js模块
'use strict';

var s = 'Hello';

function greet(name) {
    console.log(s + ', ' + name + '!');
}

module.exports = greet;
'use strict';

// 引入hello模块:
var greet = require('./hello');

var s = 'Michael';

greet(s); // Hello, Michael!
module.exports = variable;

输出的变量可以是任意对象、函数、数组等等。

2.AMD(Asynchronous Module Definition)

AMD(异步模块定义)以浏览器为目标执行环境,这需要考虑网络延时的问题。

  • 导入:require([‘模块名称’], function (‘模块变量引用’){// 代码});
  • 导出:define(function (){return ‘值’);
define('moduleA',['moduleB'],function(moduleB) {
  return {
    stuff: module.doStuff();
  };
});

3.UMD(Universal Module Definition)

UMD(统一模块定义)是为了统一CommonJS和AMD生态系统而生。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        //浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

4.ES6 Module

ES6 Module是ECMA-262引入的模块规范,可运用于浏览器或服务器环境。

  • 导入:import {模块名A,模块名B…} from ‘模块路径’
  • 导出:export(命名导出)和export default(默认导出)
import { foo } from './fooModule.js';
//命名导出多行形式
const foo = 'foo';
export { foo };
//命名导出单行形式
export const foo = ‘foo’;
//命名导出别名
const foo = 'foo';
export { foo as myFoo };
//默认导出多行形式
const foo = 'foo';
export default foo;
//默认导出单行形式
export { foo as default };

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/basic/js/3556.html

发表评论

邮箱地址不会被公开。 必填项已用*标注