模块化规范

模块化规范

1.模块化

1.1AMD

AMD是RequireJS在推广过程中对模块定义的规范化产出。AMD规范则是非同步加载模块，允许指定回调函数。

// 定义模块，没有依赖项
define(function () {function fn1() {return '你好fn1'}// 导出模块return {fn1}
})// 定义模块有这依赖项
define(['m1'], function (m1) {function fn2() {console.log('m2模块', m1.fn1());};// 暴露模块return { fn2 };
})// 入口文件
(function () {fig({// 配置js路径paths: {m1: './module/m1',m2: './module/m2',jquery: './module/jquery'}});requirejs(['m2', ' jquery'], function (m2) {m2.fn2();$('#box').click(function(){console.log(1111);})})
})()// 页面文件
<div id="box">点击试一下</div>
<script data-main="./main.js" src="./lib/require.js"></script>

1.2 CMD

CMD是SeaJS在推广过程中对模块定义的规范化产出

// 没有依赖的模块
define(function (require, exports, module) {function fn1() {console.log("m1模块下面的fn1方法");};// 导出模块ports = {fn1}
})// 有依赖的模块
define(function (require, exports, module) {// 导入依赖模块let m1 = require('./m1')m1.fn1()function fn2() {console.log('我是m2模块下面的fn2方法');}exports.fn2 = fn2
});// 主入口文件
define(function (require) {let m2 = require('./m2')m2.fn2()let jquery = require('./jquery')console.log(jquery('body'));
})// 页面
<script src="./lib/sea.js"></script>
<script>seajs.use('./module/main.js')
</script>

1.3 CommonJS

其实就是NodeJS以后详细讲解。(nodejs同步)
前端浏览器不支持，Nodejs中使用的是这个规范，核心思想就是通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或者 ports 来导出需要暴露的接口。

2.TypeScript

手动切换npm镜像，执行下面的命令，会在电脑上，多一个cnpm，cnpm就是切换过后镜像npm工具
npm install -g cnpm --registry=★★★★★★★★ 
nrm  : 管理镜像源
npm i -g nrm   cnpm i -g nrm   注：高版本有bug，安装好后，有提示不可用。
打开nrm的安装文件，一般是在这个路径下：C:Users***AppDataRoamingnpmnode_modulesnrm，找到cli.js文件的第17行，做如下修改
把 const NRMRC = path.v.HOME, '.nrmrc');
修改const NRMRC = path.v[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');nrm ls  查看可用的镜像切换镜像
nrm use 名称添加镜像
nrm add 名称  url地址
nrm use 名称nrm del 名称// 安装TS
npm i -g typescript// 检查是否安装成功  查看到版本，表示安装成功
tsc -v

2.1 基本类型

TS和JS有着几乎相同的数据类型，但是TS更为强大。TS通过编译成JS文件从而达到前端运行的目的。
声明类型
类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量（参数、形参）的类型，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错，类型声明给变量设置了类型，使得变量只能存储某种类型的值。
自动类型
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型，工作中建议还是手动指明变量类型，尽量少的去让TS自动判断类型。
将ts文件编译成js文件

// 使用命令行工具，进入到对应的文件目录中，执行如下命令
tsc aaa.ts

（1）布尔类型

let isDone: boolean = false;

(2)数字类型

let decLiteral: number = 6;           // 十进制
let hexLiteral: number = 0xf00d;     // 十六进制
let binaryLiteral: number = 0b1010;  // 二进制
let octalLiteral: number = 0o744;    // 八进制

(3)字符串类型

let name: string = "bob"
let username:string = `aaabbbccc

(4)any和unknown类型

let app:any = 66
let app:unknown = 66

(5)void 类型
它表示没有任何类型, 声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null,一般多用于函数返回值指定

let unusable: void = undefined;
function warnUser(): void {console.log("This is my warning message");
}

(6) null和underfined
undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大

let u: undefined = undefined;
let n: null = null;

(7)never类型
never类型表示的是那些永不存在的值的类型

function error(message: string): never {throw new Error(message);
}// never 永远不存在类型，永远不结束   ts
/* function kill(): never {while (true) { }
}
*//* function myException(): never {throw new Error("erro");
}// string | number 联合类型 string或number
function fn(name: string | number): void {if (typeof name === 'string') {console.log(name)} else if (typeof name === 'number') {console.log(name)}else{// neverconsole.log(name)}
} */

(8)字面量类型
可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

/* // 声明
let name2: 1 | 2 | '先生' | '女士' | true
// 赋值 值只能在字面量中，选一个
name2 = true*/

(9)枚举类型

/* // 如果定义的枚举，没有指定它的值，则默认从0开始
enum Color {Red,Green,Blue
}
// 可以直接打印 申明枚举类型
console.log(Color)
// 0
console.log(Color.Red) */// 如果定义的枚举，如果设置了枚举的值，则值就是为设置的值,如果你设置的值是数据，则它下面的值从你设置向下累加
/* enum Color {Red = 2,Green,Blue
}
// 3
console.log(Color.Green) */// 如果设置为字符串，全部设置
/* enum Color {Red = 'red',Green = 'green',Blue = 'blue'
}
// green
console.log(Color.Green)// 给变量指定枚举类型
var c:Color
c = Color.Red; */
/* 
// 常量枚举，不可直接打印类型
const enum Color {Red = 'red',Green = 'green',Blue = 'blue'
}
// 不可以直接打印类型，但是可以读里面的值
console.log(Color.Red)
var c: Color
c = Color.Red;*/

(10)object

let obj: object = {}
let obj:{id:number,name?:string}  // ?可选
// id是必须要有的，后面可以任意key，key为字符串，值为任意类型
let obj:{id:number,[props:string]:any}
// 给函数参数定义类型和返回值定义类型
type fnType = (a:number,b:number)=>number
const fn:fnType = (a:number,b:number):number=>a+b

(11)数组类型

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

(12)tuple元祖类型
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

let x: [string, number]
x = ["hello", 10]