TypeScript学习日志-第二十天(模块解析)

模块解析

一、ES6之前的模块规范

前端模块化规范是有很多的,在es6模块化规范之前分别有一下的模块化规范

一、Commonjs

这是 NodeJs里面的模块化规范

javascript 复制代码
// 导入
require("xxx");
require("../xxx.js");
// 导出
exports.xxxxxx= function() {};
module.exports = xxxxx;

二、AMD

AMDCMD 都是浏览器下使用的规范。

AMD 遵循的是 requireJs

javascript 复制代码
// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...});
// 加载模块
require(["module", "../app"], function(module, app) {...});

三、CMD

CMD 遵循的是 seaJs

javascript 复制代码
define(function(require, exports, module) {
  var a = require('./a');
  a.doSomething();
  
  var b = require('./b');
  b.doSomething();
});

四、UMD

UMDAMDCommonJS 的糅合

javascript 复制代码
(function (window, factory) {
    // 检测是不是 Nodejs 环境
	if (typeof module === 'object' && typeof module.exports === "objects") {
        module.exports = factory();
    } 
	// 检测是不是 AMD 规范
	else if (typeof define === 'function' && define.amd) {
        define(factory);
    } 
	// 使用浏览器环境
	else {
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});

二、ES6模块化规范用法

一、默认导出

默认导出的东西没有规定类型可以是任意类型,但是一个模块只能出现一个默认导出,我就使用一个数值类型的导出,如图:

使用默认导出的,接收的时候就可以自行命名,如图:

这时候打印出来的就是一个对象 { a:1 }

二、分别导出

所谓分别导出 就是有多个需要导出的东西 使用多个 export导出,如图:

那要怎么使用呢,如图:

三、重名问题

当我们引入的东西和我原本存在的东西重名了,我们可以给引入的东西一个别名,即可解决这个问题,如图:

使用as 给重名的变量或方法重名

四、动态引入

当我们在不同的时候 需要按需进行引入的时候,就需要使用动态引入了,我们要怎么进行动态引入呢,如图:

单纯使用 import 是不能在 方法里面的 它只能在最顶层,所以可以按上述写即可

相关推荐
奔跑的蜗牛ing4 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
光影少年10 小时前
Typescript工具类型
前端·typescript·掘金·金石计划
开心不就得了1 天前
React 状态管理
react.js·typescript
冷冷的菜哥1 天前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
lypzcgf2 天前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
患得患失9492 天前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
万添裁2 天前
ArkAnalyzer源码初步分析I——分析ts项目流程
typescript·arkanalyzer
凡二人3 天前
Flip-js 优雅的处理元素结构变化的动画(解读)
前端·typescript
烛阴3 天前
【TS 设计模式完全指南】TypeScript 装饰器模式的优雅之道
javascript·设计模式·typescript
YaeZed3 天前
TypeScript7(元组)
typescript