amd模块化——typeScript下载于安装以及运行 ——yarn下载——TS的运行——Ts数据类型描述

Posted 2022-08-12 勇敢*牛牛

在了解此之前先明白amd模块化

一、amd定义及规范说明

• AMD(Asynchronous Module Definition)：异步模块加载机制，是一个在浏览器端模块化开发的规范。
• 什么是异步模块加载机制：javascript在浏览器中被解析和执行时具有阻塞的特性，当JavaScript代码执行时，页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕。
• 模块化的标准规范函数：异步加载模块require.js，依赖前置：在一开始就将所有依赖项加载完全 ，
• API—define()：具有异步性。当define函数执行时，它首先会异步的去调用第二个参数中列出的依赖模块，当所有的模块被载入完成之后，如果第三个参数是一个回调函数则执行，然后告诉系统模块可用，也就通知了依赖于自己的模块自己已经可用

1、RequireJs 介绍

requireJs主要解决两个问题

• （1）多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器，即依赖性最大的文件有一定要放在最后面加载【解决：管理每个模块之间的依赖，便于维护】
• （2）js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长【解决：实现js文件的异步加载，避免网页失去响应】

2、requireJs 使用

（1）require.js下载下来之后引包，放在目录上。

（2）定义模块

每个模块都有自己独立的作用域，在定义模块的时候，使用requirejs提供的函数define()来定义，语法函数如下：

define("模块名称", ["模块的依赖项"], function()

可以不用写模块名称
函数体：模块的具体实现，模块中所有的代码全都放在该函数中

)

（3）在require.js中，使用require.js提供的函数 require()来引用一个模块

require(["模块文件的路径(不带.js后缀的)"], function()

模块加载成功之后的回调函数

模块的加载是异步的，在模块加载完成之后，才能使用模块的相关功能

)

a.js

define(function () 
    return 
        a: 1,
        b: 2,
        c: function () 
            console.log("AAAA");
        ,
        rand:function()
            return "#qweeqwer"
        
    
);


相当于以下代码
export default 
    a: 1,
    b: 2,
    c: function () 
        console.log("AAAA");
    

c.js
如果模块之间有依赖加载：

define(["./a"], function(obj) 
    return 
        init:function()
            var div=document.createElement("div");
            Object.assign(div.style,
                width:"50px",
                height:"50px",
                backgroundColor:obj.randomColor()
            )
            document.body.appendChild(div);
        
    
);

主要执行的代码入口main.js

require(["./a","./b","./c"],function(obj,fn,init)//可以解构
    console.log(obj);
    fn();
    init();
)

require(["./a","./b","./c"],function(obj,fn,o)//和以上做个对比
    console.log(obj);
    console.log(obj.randomColor());
    fn();
    o.init();
)


相当于import obj from "./a"

那以上代码就必须依靠require.js执行
在html中，运行。

<script src="./require.js" data-main="./js/mian.js"></script>

---

typeScript下载

下载与安装
npm i typescript -g
查看版本
tsc -v

yarn下载

支持断点续传
npm i yarn -g
如果这个npm运行比较慢就可以使用yarn，他的运行结果和npm一致
yarn init -y
yarn等价于npm i
下载
yarn add bootstrap
yarn remove bootstrap

---

执行ts文件

• 创建一个typescript文件夹
• 在这个文件终端打开
• 输入tsc --init初始化TS工程生成一个tsconfig.json文件

解析这tsconfig文件
ts转化为es几

- "target": "ES5",

转换为什么模块化

• "module": "AMD",

ts文件所在的根目录

• "rootDir": "./",

输出路径 ts转换为js放在什么路径下

• "outDir": "./",

"declaration": true, 声明定义
"declarationMap": true, 声明映射
"sourceMap": true, 源映射

接下来：在ts文件夹创建Main.ts

在命令行中输入tsc -w 监视转换

知识点：es6卸载ts里面是支持的，并且配置好会自动转化为es5

写完之后在typescript下新建一个index.html文件
引文文件和配置。

<script src="./require.js" data-main="./js/Main.js" async defer></script>

然后执行这个inde.html文件就可以使用写在typesrcipt里面的内容了。

---

Ts数据类型描述

强类型语言，一旦声明就要赋值，不然就会报错
数字型

var a:number=1;
//a="a"; 当类型不一致时会报错			
var b:Number=2;				
var c:number =3;
console.log(a,b,c);

类型的描述：小写支持栈中存储这个类型，大写支持栈中存储类型和堆中存储的该类型对象类型。
字符串

var a:string="a";
var b:String="a";

布尔值

var a:boolean=true;
var b:Boolean=false;

undefined

var a:undefined;
a=undefined;

null

 var o:null=null

a的类型既可以是数值也可以是字符串
a的类型可以是数值也可以是字符串

var a:number|string;
var o:object|null=a:1,b:2;

数组的写法

var arr:number[] = [1,2,3];
var arr1:number[][] = [[12,3],[2,4]];

泛型数组

var arr1:Array<number>=[1,3];
var arr:Array<Array<number>>=[[12,3],[2,4]];
var arr:Array<number|string>=[1,2,"asd"];

元组 把每个下标变量全部指出类型
必须按照顺序写

var arr:[string,number,boolean]=["a",1,true];

枚举
如果枚举没有设定时，默认输出的是以0开始的下标
只能使用赋值数值和字符

enum COLORRED,GREEN,BLUE;

enum COLORRED="red",GREEN="green",BLUE="blue";
console.log(COLOR.RED);

任意类型 ，禁用！！！！！

var a:any=3;
 a="a";

设置函数返回的类型

返回一个数字 
function fn():number

    return 1;

当函数没有使用return返回结果时，是void
function fn():void

    console.log("aa");

返回一个对象
function fn_1():object

    return 

永远不成功的值
function fn():never

    throw new Error("aa");

设置一个对象类型的数据但是不能修改（接口）

var o:object=a:1,b:2;

断言
继承后的对象遍历

var arr:Array<Box> =[];
// arr.push(new Box)
arr.push(new Ball)
// arr.push(new Box)
console.log(arr);
arr.forEach((element:Box) => 
    console.log(element);
    (element as Ball).run();
    (<Ball>element).run();
    
);

获取document对象

var div:HTMLElement|null = document.querySelector("div");
var div:HTMLElement = document.querySelector("div") as HTMLElement;

---