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

在了解此之前先明白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(){

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

})
1
2
3
4
5
6

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

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

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

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

})
1
2
3
4
5
6
7

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");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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);
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

主要执行的代码入口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"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

---

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>
1

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

---

Ts数据类型描述

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

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

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

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

布尔值

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

undefined

var a:undefined;
a=undefined;
1
2

null

 var o:null=null
1

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

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

数组的写法

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

泛型数组

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

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

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

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

enum COLOR{RED,GREEN,BLUE};

enum COLOR{RED="red",GREEN="green",BLUE="blue"};
console.log(COLOR.RED);
1
2
3
4

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

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

设置函数返回的类型

返回一个数字 
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");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

断言
继承后的对象遍历

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();
    
});
1
2
3
4
5
6
7
8
9
10
11

获取document对象

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

---