模块

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-05-21

命名空间

命名空间用来避免命名冲突；

// 定义
namespace app {
  export namespace models {
    export class UserModel {}
    export class TalkModel {}
  }
}

// 访问
var user = new app.models.UserModel();

// 可以包含点号
namespace app.models {

}

模块

模块加载器

  • RequireJS: RequireJS 使用了一个被称作异步模块定义的语法（AMD）；
  • Browserify: Browserify使用的语法被称为（CommonJS）；
  • SystemJS: SystemJS是一个通用的模块加载器，这意味着它支持所有的模块定义语句法（ES6、CommonJS、AMD和UMD）

Node.js使用的是CommonJS

TypeScript允许我们选择在运行环境中使用哪种模块定义的语法

# 使用CommonJS 对应的module选项则还有amd umd system
tsc --module commonjs main.ts

但是在程序设计阶段只能选择外部模块语法 或 ES6模块语法；

ES6模块-运行时与程序设计时

// user.js
// 导出 export class User {}
class User {}
export { User };
// 或者使用别名 export { User as Usr }; User输出为Usr

// 导入
import { User } from './user';

外部模块语法-仅在程序设计阶段可用

应尽量避免使用这种语法而应使用ES6语法来代替，但是要简单看一下， 因为可能会处理一些老的程序或查看一些老的文档

// 导出
export class User {

}
// 或者
export = User;

// 导入
import User = require('./user');

AMD模块定义语法-仅在运行时使用

/**
 * @param1 { Array } 包含了依赖的模块名列表
 * @param1 { Callback } 回调，将在所有的依赖全部加载完成是执行，将所有依赖的模块作为它的参数
 */
define(['require', 'exports'], function(require, exports) {
  function User() {
    // ...
  }
  return User;
})

AMD模块可以被RequireJS模块加载器加载，浏览器端一般采用AMD；

CommonJS模块定义语法-仅在运行时使用

// 导出
function User() {
 // ...
}

module.exports = User;

// 导入
const user = require('./user');
// 或使用 import
import User = require('./user');

可以使用 --compile commonjs 将使用外部模块语法的代码编译为使用commonjs

当在浏览器中使用require关键时，会抛出异常，因为require未定义，可以使用 Browserify 解决这个问题；

# 安装依赖
npm i -g browserify

# 使用
browserify main.js -o bundle.js

UMD模块定义语法-仅在运行时使用

通用模块定义：

(function (root, factory) {
  if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('b'));
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define(['b'], function (b) {
      return (root.returnExportsGlobal = factory(b))
    })
  } else {
    // 全局变量
    root.returnExportsGlobal = factory(root.b)
  }
} (this, function(b) { // this 就是 root， 这个匿名函数就是 factory
  // 真正的模块
  return {};
}))

可以使用--compile umd 为程序中的每一个模块生成一个umd模块，或使用 Browserify。

SystemJS模块定义-仅在运行时使用

如同UMD为你提供了一种生成一个模块即兼容 AMD 又兼容 CommonJS的方式，SystemJS 可以让你在不兼容ES6的浏览器上，更加贴近它们语义地使用ES6模块定义方式。